WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Offering different color schemes using customizer (5 posts)

  1. So I've got my customizer all set up thanks to Otto's tutorial, and I have the following:

    function colorpalette_theme_customizer( $wp_customize ) {
    
    	$wp_customize->add_section( 'colorpalette_color_scheme_settings', array(
    		'title'       => __( 'Color Scheme', 'colorpalette' ),
    		'priority'    => 30,
    		'description' => 'Select your color scheme',
    	) );
    
    	$wp_customize->add_setting( 'colorpalette_color_scheme', array(
    		'default'        => 'blue',
    	) );
    
    	$wp_customize->add_control( 'colorpalette_color_scheme', array(
    		'label'   => 'Choose your color scheme',
    		'section' => 'colorpalette_color_scheme_settings',
    		'default'        => 'blue',
    		'type'       => 'radio',
    		'choices'    => array(
    			'Choice 1' => 'blue',
    			'Choice 2' => 'red',
    			'Choice 3' => 'green',
    			'Choice 3' => 'gray',
    		),
    	) );
    }
    add_action('customize_register', 'colorpalette_theme_customizer');

    This works beautifully, but now, I want to do display a different stylesheet depending on which one they choose and this isn't quite right:

    function colorpalette_add_customizer_css() { ?>
    
    	<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>css/<?php echo get_theme_mod( 'colorpalette_color_scheme' ); ?>.css" type="text/css" media="screen">
    
    <?php }
    add_action( 'wp_head', 'colorpalette_add_customizer_css' );

    This results in the words Choice 1 or Choice 2 being displayed in the link. I've never liked radio buttons, but I'm sure I'm missing something simple.

  2. Richard Tape
    Member
    Posted 1 year ago #

    get_theme_mod() only returns the array key (as a string) of the chosen setting which is why you're only seeing 'Choice 1'

    You may have to do this manually, i.e.

    //get what is chosen
    $choice = get_theme_mod( 'colorpalette_color_scheme' );
    
    //default
    $colour_scheme = 'blue';
    
    if ( $choice == "Choice 1" )
        $colour_scheme = 'blue';
    elseif ( $choice == "Choice 2" )
        $colour_scheme = 'red';
    elseif ( $choice == "Choice 3" )
        $colour_scheme = 'green';
    else
        $colour_scheme = 'gray';

    Then you'll need something like

    function colorpalette_add_customizer_css() { ?>
    
    	<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/css/<?php echo $colour_scheme; ?>.css" type="text/css" media="screen">
    
    <?php }
    add_action( 'wp_head', 'colorpalette_add_customizer_css' );

    Note the added forward slash (as get_template_directory_uri() doesn't append one.

  3. Richard Tape
    Member
    Posted 1 year ago #

    I was going to suggest using get_theme_mods() but that only returns the values, rather than the possible options.

    You need a way to compare the chosen mod (which we can easily get with get_theme_mod() ) to the available options which you set in ->add_control()

    As an aside, why would you have 'Choice 1' and not 'Blue' ? Would it not be better for your users to know which scheme they are using? That then makes your life a lot easier, too.

    So;

    function colorpalette_theme_customizer( $wp_customize ) {
    
    	$wp_customize->add_section( 'colorpalette_color_scheme_settings', array(
    		'title'       => __( 'Color Scheme', 'colorpalette' ),
    		'priority'    => 30,
    		'description' => 'Select your color scheme',
    	) );
    
    	$wp_customize->add_setting( 'colorpalette_color_scheme', array(
    		'default'        => 'blue',
    	) );
    
    	$wp_customize->add_control( 'colorpalette_color_scheme', array(
    		'label'   => 'Choose your color scheme',
    		'section' => 'colorpalette_color_scheme_settings',
    		'default'        => 'blue',
    		'type'       => 'radio',
    		'choices'    => array(
    			__( 'Blue', 'locale' ) => 'blue',
    			__( 'Red', 'locale' ) => 'red',
    			__( 'Green', 'locale' ) => 'green',
    			__( 'Gray', 'locale' ) => 'gray',
    		),
    	) );
    }
    add_action('customize_register', 'colorpalette_theme_customizer');

    and then,

    function colorpalette_add_customizer_css() { ?>
    
    	<link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/css/<?php echo strtolower( get_theme_mod( 'colorpalette_color_scheme' ) ); ?>.css" type="text/css" media="screen">
    
    <?php }
    add_action( 'wp_head', 'colorpalette_add_customizer_css' );

    Note I've added internationalization to the choices, too - you'll need to change 'locale' to whatever is relevant for your theme/plugin.

  4. Good point about the use of the word Choice and localization.

    That's awesome and totally works. Thanks so much.

    strtolower () is totally new to me. I'll need to look that up.

  5. Zakir Sajib
    Member
    Posted 11 months ago #

    Lovely code.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.