Laptop child theme styles in admin
|

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.



Child Styles load on the front end

In the screenshots, you can see that my custom CSS is loading just fine on the front end of the website however on the back end, in the WordPress blocks editor they are non-existent. The reasoning here is simple; custom child theme styles are set to load on the front end of the website by default.


Load child styles in the back end/block editor

To force my custom child theme styles to load in the back end (aka editor) we need to hook into a function that loads elements into the admin side of WordPress. To do this we create a function that calls the child theme styles and loads it into the “admin_head”.

The code below is the function needed to achieve the desired result. Add this to your child theme’s function.php file.

// 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');

How to insert the CSS classes

In the event you also need a bit of help with targeting the elements with custom CSS, here’s how I did it.

in the editor, select the title block, make sure it’s set to “H1” and then within the block settings at the bottom you should see “Advanced”. Add the class name to the “Additional CSS class(es)” box. Create your CSS in the Styles.css within your site’s child theme and add your custom parameters. Repeat this step for the row, section or div block.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

19 − fifteen =