For quite a while, there has been a problem messing with the stylesheet in Genesis child themes that use the Customizer to add a new background image to the front-page section(s). At first, I noticed it with Minimum Pro while using the wonderful Carrie Dils’ (you need to know her if you don’t) Genesis Style Trump plugin. This plugin moves the stylesheet down the load stack so you don’t need to put a bunch of !important; all over your stylesheet due to plugins and their rampant use of !important.
The background just wouldn’t load for me if I had the plugin activated. I was furious, but at the time I was much more junior in my ability to find out why.
Fast forward to last week when I went to use my function to use a minified stylesheet with a theme that I’d used on a previous project. The key point with this function is that I wasn’t using a child theme that had front-page background images, so it had always worked.
Now it was a total bust. The stylesheet wasn’t even loading.
I tweaked the code and now it was loading the minified file, but the background images were all gone.
Upon inspection of the generated code, the “inline-css” style block that the Customizer files inject into head were not there at all.
Ugh!
But I digress, you want code to solve your problem, don’t you? First, you need the action to remove the original stylesheet.
//* De-register uncompressed stylesheet - minified loaded above remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
I place that action right below the wp_enqueue_scripts() function in functions.php for consistency. That’s right above the HTML5 markup structure in most Genesis child themes (if you’re new to the Genesis framework or considering switching, here’s why I use it).
Now you need to be within wp_enqueue_scripts() to enqueue the minified stylesheet with this:
$version = defined( 'CHILD_THEME_VERSION' ) && CHILD_THEME_VERSION ? CHILD_THEME_VERSION : PARENT_THEME_VERSION;
$handle = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
wp_enqueue_style( $handle, get_stylesheet_directory_uri() . '/style.min.css', false, $version);
If you do those two steps, you’ll have the same missing background images I had. ¡No bueno! There’s another step to take and you need to go to /lib/output.php for that. The first item should be an action to enqueue the scripts that Customizer needs to output to make the backgrounds appear. What you need to do is edit the priority for that action, whereas it is the default, unnamed priority when it ships. When given a priority of 12, everything works.
add_action( 'wp_enqueue_scripts', 'theme_css', 12 );
Now if you’re also a stickler for customizing the themes completely for clients, you’ll also need to do quite a bit of work to all of the Customizer files to find/replace function names and strings with your project name. If you miss even one spot, you’ll either get filenames that are odd or markup that you don’t want… not to mention it not working at all. My own best practices also includes moving the original theme info right below mine in style.css as a reference when customizing a theme rather than doing full-custom. Then I find/replace the original namespaces and such throughout.
Those are the simple steps to get Customizer images to work if you want minified stylesheets in your Genesis child themes. I hope it makes your day better as you struggle with this and find this info.
Leave a Reply