How do I conditionally enqueue stylesheets or scripts in theme customizer settings?

2 Views

I’m developing a new WordPress theme and I’m at the point where I’m adding theme customizer options. Most of them have been surprisingly easy to implement, but I’m stumped on a couple of important options:

  1. Switching between a light and dark theme
  2. Switching between two web font choices

I understand how to properly enqueue stylesheets and scripts and I’m getting pretty familiar with how to add settings, sections and controls to the Theme Customizer. What I need now is a way to conditionally load stylesheets (the light/dark skins) and scripts (the web fonts).

Read More

How can I do something like this? 

// if the skin is set to 'light'
     // enqueue light.css
// if the skin is set to 'dark'
     // enqueue dark.css

or 

// if the font style is set to 'sans-serif'
     // enqueue source-sans-pro;
// if the font-style is set to 'serif'
     // enqueue merriweather;
Post Views: 2

Related posts

2 comments

  1. Got it! Here’s the code that worked for me.

    — Theme Customizer settings and controls (mine are in a separate customizer.php file):

    function themename_customize_register( $wp_customize ) {

    ...

    $wpcustomize->add_setting( 'themename_skin', array(
        'default' => 'light',
        ),
    );

    $wp_customize->add_control( 'themename_skin', array(
        'label'    => 'Skin',
        'section'  => 'colors',
        'settings' => 'themename_skin',
        'type'     => 'radio',
        'choices'  => array(
            'light' => 'Light',
            'dark'  => 'Dark',
            ),
        )
    );

    ...

}

add_action( 'customize_register', 'themename_customize_register' );

    — Enqueue the light/dark stylesheets in functions.php along with your other scripts/styles:

    function themename_scripts() {

    ...

    /* Enqueue the appropriate CSS based on which skin is selected via Theme Customizer */
    $skin = get_theme_mod( 'themename_skin' );

    if ( $skin == 'light' ) {
        wp_enqueue_style( 'themename-light-skin', get_template_directory_uri() . '/skins/light.css' );
    }
    if ( $skin  == 'dark' ) {
        wp_enqueue_style( 'themename-dark-skin', get_template_directory_uri() . '/skins/dark.css' );
    }

    ...

}

add_action( 'wp_enqueue_scripts', 'themename_scripts' );

    Thanks to cale_b for pointing me in the right direction.

  2. Try this…

    //add your stylesheet url to a variable
$light = 'path to light css';
$dark = 'path to dark css';

add_action('wp_enqueue_scripts', 'theme_color_switcher');

function theme_color_switcher() {

// switch the stylesheet registration
// if light is not blank
if ($light !='') :
// then register the light color
wp_register_style('stylesheet_id', $light);

else :
// else register the dark color
wp_register_style('stylesheet_id', $dark);
endif;

wp_enqueue_style('stylesheet_id');
}

    Please make sure that you add your theme ability to delete the variable $light when it is not selected, or your theme will only register the light theme.

    You can also create two functions and hooks to include the stylesheets and put the action hook inside the ‘if else’ statement like this:

    if ($dark !='' ) :
add_action('wp_enqueue_scripts', 'darktheme_function_callback');
else :
add_action('wp_enqueue_scripts', 'lighttheme_function_callback');
endif;

//register and enqueue you dark css
// register and enqueue your light css

Comments are closed.