Kadence Theme Child Styles Error Fixed
|

Kadence Child Theme Custom Styles Not Loading: Solved

If you’ve run into this issue you may have already banged your head on the wall a few times. Luckily the fix is simple but just to be certain you are here for the right reason, here’s the issue:

Child Theme Active – Styles Not Working

First off, this solution is specific to the Kadence Child theme as far as I know. Also, I downloaded the Kadence Child Theme here. This zip folder actually contains the issue and solution. If you’ve built your own child theme, jump down to Solution 2.

For some reason (likely a good one) the developers of the Kadence Child Theme decided to comment out a key function in the Child Theme’s function file which allows the custom Child styles to work properly. Hence, the solution as simple as removing the comment syntax. See screenshots below:

Commented child style function
Commented child style function

Remove the two // before the add_action function and then remove the entire line after the closing ); tag.

Child styles function comments removed
Child styles function comments removed

Once the code comments are removed the function which pulls in the child styles will be operational on the function file.

Solution 2: Adding the action enqueue the styles sheet.

If you didn’t download your Child Theme from Kadence directly, and instead made your own, the first recommendation I have is to backtrack and use theirs followed by the solution above. Download the Kadence Child Theme here. However, if you would rather you can adjust your functions file (or create one) and add the following code to it:

<?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' ); 
/**
 * Add custom functions here
 * This code was created by KadenceWP.com and they retain all rights to it.  
 */

Once you’ve added the code above, or modified your existing child theme function file you should be good to go. Cheers!

Why use a child theme?

Especially if you are operating a web design company, you should be making each site you design unique and more importantly, properly responsive. Sure, for the most part you can pull this off with a good them and builder like Kadence however, there will come times when you need to add custom CSS to the build. Adding this custom code to via the customizer both makes it cumbersome to make edits as well a potential issue if your client has access to the admin area. With such access, it’s very easy to accidentally destroy your custom CSS.

Similar Posts

Leave a Reply

Your email address will not be published.

eleven − nine =