• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Petersen Media Group

Petersen Media Group

We help you spend less time ensuring your site is there, and more time making it profitable.

  • Home
  • About Us
  • FAQs
    • WordPress Hosting
    • Hosting Services
  • Benefits
  • Services
    • Choose your plan

Use Minified Stylesheet with Genesis Themes with Front-Page Customizer Backgrounds

August 4, 2016 by

Inline CSSFor 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.

No images

No inline CSS blockUpon 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 );

Generated code workingNow 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.

Background images working

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.

Genesis Framework code,  Genesis Framework

Primary Sidebar

Recent Posts

  • Change Genesis .site-title H1 Wrap on the Homepage
  • The Year of 2017 Goals for Petersen Media Group
  • Forever to Finish, Gone in the Blink of an Eye: 2016
  • Add Genesis Custom Post Type Archive Settings
  • Use Minified Stylesheet with Genesis Themes with Front-Page Customizer Backgrounds

Recent Comments

  • Mike Hale on The Year of 2017 Goals for Petersen Media Group
  • Little Shiva on The Year of 2017 Goals for Petersen Media Group
  • Luke Cavanagh on A Response to the WordPress Customizer Expansion: Removal
  • Chris Johnson on Why Partnerships Often Don’t Sail
  • divakara ganesh on Two Things You Need to Do to Your Genesis 2.2 Theme

Archives

  • January 2017
  • August 2016
  • May 2016
  • October 2015
  • September 2015
  • August 2015
  • June 2015
  • April 2015
  • December 2014
  • November 2014
  • October 2014
  • August 2014
  • May 2014
  • April 2014
  • February 2014
  • January 2014
  • November 2013
  • September 2013
  • July 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • January 2000

Categories

  • Business Tips
  • Genesis Framework
  • Investments in You
  • Products
  • Technology
  • Uncategorized
  • WordCamp Slide
  • WordPress Tips

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Footer

Petersen Media Group was founded on the idea that good work, transparent and honest communication, and radical generosity are the keys to success in business and life.

The WordPress community has shown up over and over to prove this to be true.

We look forward to being entrusted with your business.

Navigation

  • Home
  • About Us
  • Blog
  • Choose Your Plan
  • FAQs
  • Contact
  • Disclaimer

This site is independently owned. It is not sponsored by StudioPress, WP Engine, WordPress, or Automattic Inc.

Theme and various assets used with permission from SEOThemes and GenesisSiteCare.

Copyright © 2019 · Petersen Media Group