Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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).

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;
share|improve this question
    
Ask only one question per Question, unless they are really closely related. I never played with the theme customizer, but if I wanted to know what's the current skin, making a call in some function in a plugin, how would it be? What's the code you're using for the regular enqueue? . . . You're free to edit the Question whenever needed. –  brasofilo Sep 22 '13 at 0:46
    
Sorry about that. I thought it was closely related since 'mytheme_skin' is the one of the settings my main question was about. If you don't think the relation is close enough, I'd be happy to remove that and post it as a separate question. :) –  Nick Pfisterer Sep 22 '13 at 1:29
    
It would appear you are looking for get_theme_mod() - this should allow you to read your mytheme_skin setting, and enqueue the appropriate script / css based on the setting. –  cale_b Sep 22 '13 at 1:35
add comment

2 Answers

up vote 2 down vote accepted

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.

share|improve this answer
add comment

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
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.