How To Load Custom Kadence/Gutenberg Child Theme Styles in WP-Admin/Editor/Backend

If like me, in the process of moving over to Gutenberg Blocks with Kadence Blocks or another blocks addon, you may be struggling to get your custom child theme CSS styles to show up in the editing process. This can make editing extremely difficult as you have to save your work and view it on the front end of the site.

Why would anyone want to bother with custom styles in the first place?

If you’ve worked with content builders like Elementor or Divi designing websites you know these builders have ‘Global Styles’ which you can reuse throughout the site and change their design site-wide by simply changing them in one place. Well, that’s how CSS classes work. For instance, in the screenshots in this article, I merely changed the padding on a section and the size of the h1 font via the style sheet. What this allows me to then do is change those parameters (amount of padding on the section (div) and font size for the h1 heading) for any element I apply that CSS class too. In this case, I’m preparing the design for my primary page’s hero sections.

*If using Generate Blocks: You have the option to use the system’s default “Global Styles” feature to achieve the same result without coding.

*If using Kadence Blocks: You can also use the Templates and Elements features to create a similar effect with Dynamic content. Although I’m using Kadence I prefer to do this with CSS for the instances where I am doing somewhat unique designs for my primary pages. I’ll use those features for my blog posts and product page designs.

// Below: Loads the custom child theme styles onto the admin so the styles work in the editor / preview 
function iloadstyleadmin() {
wp_enqueue_style( 'admin_styles', get_stylesheet_directory_uri() . '/style.css');
}
add_action('admin_head', 'iloadstyleadmin');

Complete Functions file

Here is my complete functions.php file (for now). The first function in the code loads the child theme style sheet into the front end of the website. If you download the Kadnce Child Theme from KadenceWP.com, that first function is commented out by default.

<?php
/**
 * Enqueue child styles.
 */
function child_enqueue_styles() {
	wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri() . '/style.css', array(), 100 );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' ); 
// From above, this loads the style sheet to the front end of the website
// Below: Loads the custom child theme styles onto the admin so the styles work in the editor / preview 
function iloadstyleadmin() {
wp_enqueue_style( 'admin_styles', get_stylesheet_directory_uri() . '/style.css');
}
add_action('admin_head', 'iloadstyleadmin');