Migrate Custom CSS Code From Theme Settings To Additional CSS

We all know that, WordPress is being constantly developed and updated with many fixes and arrival of new features. Well, in the newest version of WordPress, ie, in 4.7, there is addition of Additional CSS Box inbuilt with it. So, what now? Are you allowed to add the Custom CSS Box build with the theme? Well, since WordPress provides you this feature inbuilt with it, so, you are not allowed it. So, what we can do to our theme Custom CSS? Well, you need to migrate Custom CSS data to that section if your theme already does that.

What is Custom CSS Box and why we need it?

Custom CSS Box is additional CSS code to your site, which can modify your theme’s as well as the plugin’s default settings. But, if you are already fine with the styling of the theme and plugin data, then, you might not need this section at all. So, you might have got the idea about that who needs the Custom CSS Box for their site.

WordPress ships with Additional CSS section built within it, now what?

Well, as you know that, WordPress is being constantly developed and comes with new features and bug fixes on each version update. This time, in WordPress 4.7, there is the addition of the Additional CSS section built within it.  It is mostly used to modify the theme and CSS styling, as discussed above.

Since WordPress comes built with Additional CSS in it now, you are now not allowed to provide the Custom CSS Box via the theme options. So, what if you have already built the theme with the addition of the Custom CSS? Will it be allowed? No, WordPress will not allow it now and you might need to migrate Custom CSS code added in the Additional CSS section in Customize Options.

How Additional CSS section in WordPress works?

Since, it is being built within WordPress, if you add any of the code in this section, then, it will create a new post type as custom_css and also create the revisions too, on each update. It is also per theme basis, ie, if you switch the theme, then, the CSS code added in one theme will not be globally added for use in another theme.

How to migrate Custom CSS code from theme options to Additional CSS?

Now, after you have got all the required information about the Additional CSS section, hence, it is the time now to migrate Custom CSS code added in theme options to Additional CSS section. Now, why to wait more, lets get ahead. The code which you need to add in the functions.php file of you theme to migrate Custom CSS is below:

function theme_slug_custom_css_migrate() {
    if ( function_exists( 'wp_update_custom_css_post' ) ) {
        $custom_css = get_theme_mod( 'theme_slug_custom_css' );
        if ( $custom_css ) {
            $core_css = wp_get_custom_css(); // Preserve any CSS already added to the core option.
            $return = wp_update_custom_css_post( $core_css . $custom_css );
            if ( ! is_wp_error( $return ) ) {
                // Remove the old theme_mod, so that the CSS is stored in only one place moving forward.
                remove_theme_mod( 'theme_slug_custom_css' );
            }
        }
    }
}
add_action( 'after_setup_theme', 'theme_slug_custom_css_migrate' );

Here, in the above code, what we have done is, we have checked for the function wp_update_custom_css_post if it exists or not. If it exists, then, we are checking for the existing custom CSS code added in theme options via the $custom_css code. Now, after that, we have the code wp_get_custom_css(); to check for the CSS code added in the Additional CSS section.

Now, after all of those checking, we have merged both of the CSS code to the Additional CSS section with the code $return = wp_update_custom_css_post( $core_css . $custom_css ); and finally if all of the migration of Custom CSS code is success, we have removed the old Custom CSS Box theme options via the code remove_theme_mod( 'theme_slug_custom_css' ); since it is no longer required.

Conclusion

Now, if you have followed this tutorial properly and you were totally success in migration of the Custom CSS code from theme options to Additional CSS, we can assume that you can now migrate Custom CSS Box from theme options to Additional CSS section more properly. But, if you are still confused about this, then, do leave a comment below in the comment box and we will follow it up.