Built in theme customizer not working in Storefront child theme.

  • Resolved delidoodle

    (@delidoodle)


    9 years, 5 months ago

    I followed James Koster’s instructions for setting up a Storefront child theme so that the custom stylesheet loads after the woocommerce.css stylesheet:

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 30);
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/custom.css',
        array('parent-style')
    );
}

    Now any changes made using the built-in theme customizer (Appearance/Customize) are ignored. How do I re-enable the theme customizer for other users?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey delidoodle,

    All you needed to do to get the woocommerce.css file to load before your child theme’s style.css was to add this line of code to your child theme’s functions.php file:

    add_filter( 'wp_enqueue_scripts', 'storefront_woocommerce_scripts', 1);

    One line of code beats the six you currently have. You don’t need to do the method that James Koster has posted (leaving the child theme’s style.css file empty and enqueueing a separate stylesheet for your child theme or use a custom css plugin/jetpack).

    I’ve tested it and the customizer functions are still in tact. Let me know how it goes for you.

    Also, if you need to add any custom CSS code, you can do so in your child theme’s style.css

    Here’s the explanation of the code snippet:

    The number “1” at the end of the code (above) is the priority number, meaning it has first priority to be executed (along with other default WordPress actions).

    A theme’s stylesheet has a priority of 10 when it is loaded. This is the default setting WordPress have given themes. You can find it in the /wp-includes/default-filters.php file at around line 205.

    Storefront, by default, gives its woocommerce.css file a priority of 20, which is after any parent theme’s style.css or child theme’s style.css. The snippet of code I’ve given you changes the priority of the woocommerce.css from 20 to 1, making it load before any other stylesheet.

    Thread Starter delidoodle

    (@delidoodle)

    Hi Eric,

    I removed the custom.css file and put my css in the child style.css file as you suggested. The storefront customizer is now working. Here is what I put in the child function.php file.

    add_filter( 'wp_enqueue_scripts', 'storefront_woocommerce_scripts', 1);

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

    Thanks for the help.

    No problem, man, glad it helped!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Built in theme customizer not working in Storefront child theme.’ is closed to new replies.