Additional Colour Schemes for Your TwentyEleven Child Theme

I’ve wanted to add an additional colour scheme to my child theme here on VoodooPress since the twentyeleven theme first came out in it’s very early stages. I had pecked around at it from the start, but the code kept changing in the early days. After that I got pretty busy, and haven’t been able to revisit the idea until now. With a little bit of help from Alchymyth and Zeaks I’ve got a new colour scheme set up on here. I haven’t done anything with it yet, but the foundation is in place. Let’s take a look at how to add some additional colour schemes to your 2011 child theme.

The first thing we need to do is set up some files. I made a blank file called voodoopress_scheme.css and put it in my Voodoo Child 2011 theme root. Of course you can put this anywhere in your theme, just remember where it is so you can call it properly later when we get to the code. If you plan to make many schemes, you’ll probably want a folder for these css files. I wanted mine in the root, that way I could edit it directly in the theme editor. You don’t need to put anything in the css file right now, we’ll get things set up and you can edit later.

The next thing you need is a nifty thumbnail. You can base it off of the existing ones for consistency if you’d like. You can take a look at the 2 images that ship with twentyeleven by downloading a fresh copy or looking through your files and hitting up twentyeleven->inc->images and looking at light.png and dark.png. The important thing is to make your thumbnail 136x122px. That way your admin menu will stay consistent. I put this in my images folder within my child theme, again, the location is totally flexible as long as the code matches the physical location of the image.

So now you have a css file in place, and a thumbnail. Let’s take a look at some code. First off we’ll just add a single scheme. Then I’ll show how to add a scheme to that. Once you see the pattern, you can add schemes all day long.

// SETUP THE VOODOOPRESS COLOUR SCHEME
add_filter('twentyeleven_color_schemes', 'voodoopress_color_scheme');
add_action( 'twentyeleven_enqueue_color_scheme', 'voodoo_enqueue_color_scheme' );

function voodoopress_color_scheme($color_schemes) {
	$color_schemes['voodoopress'] = array(
		'value' => 'voodoopress',
		'label' => __( 'VoodooPress', 'twentyeleven' ),
		'thumbnail' => get_stylesheet_directory_uri() . '/images/vp_scheme.jpg',
		'default_link_color' => '#401f1f'
	);
	return $color_schemes;
}

function voodoo_enqueue_color_scheme( $color_scheme ) {
	// voodoopress
	if ( 'voodoopress' == $color_scheme )
		wp_enqueue_style( 'voodoopress', get_stylesheet_directory_uri() . '/voodoopress_scheme.css', array(), null );
}

How’s that for simple? On lines 2 and 3, we run our filter and hook as necessary to get our function containing all of our colour schemes onto twentyeleven_color_schemes, and to enqueue our stylesheets as well.

Now that that’s in place, we need the actual functions. Line 5 starts our funtion to register the additional scheme. you can see the value is the name of the colour scheme, and should match whats in the square brackets above it. The label value is the displayed name for the scheme. The thumbnail points to the example thumbnail we discussed earlier. Finally we set the default link colour for the scheme.

The second function simply states that if the colour scheme selected is voodoopress, then enqueue the appropriate stylesheet. In the case of the example, that would be voodoopress_scheme.css. Once you have this in place, if you visit the theme options panel, you’ll see your new thumbnail and scheme name ready to be selected.

Now that you’ve seen how easy it is to add a colour scheme, you probably want more than one right? Why not be able to change the look of your site as often as you like? Well, let’s add a scheme to the above code!

// SETUP THE VOODOOPRESS COLOUR SCHEME
add_filter('twentyeleven_color_schemes', 'voodoopress_color_scheme');
add_action( 'twentyeleven_enqueue_color_scheme', 'voodoo_enqueue_color_scheme' );

function voodoopress_color_scheme($color_schemes) {
	$color_schemes['voodoopress'] = array(
		'value' => 'voodoopress',
		'label' => __( 'VoodooPress', 'twentyeleven' ),
		'thumbnail' => get_stylesheet_directory_uri() . '/images/vp_scheme.jpg',
		'default_link_color' => '#401f1f'
	);
	$color_schemes['voodoopress_light'] = array(
		'value' => 'voodoopress_light',
		'label' => __( 'VoodooPress Light', 'twentyeleven' ),
		'thumbnail' => get_stylesheet_directory_uri() . '/images/vp_light.jpg',
		'default_link_color' => '#cb1404'
	);
	return $color_schemes;
}

function voodoo_enqueue_color_scheme( $color_scheme ) {
	// voodoopress
	if ( 'voodoopress' == $color_scheme )
		wp_enqueue_style( 'voodoopress', get_stylesheet_directory_uri() . '/voodoopress_scheme.css', array(), null );
	// voodoopress light
	elseif ( 'voodoopress_light' == $color_scheme )
		wp_enqueue_style( 'voodoopress_light', get_stylesheet_directory_uri() . '/voodoopress_light.css', array(), null );
}

See what we did there? Just added into each function. On the first we copied the color_schemes array and changed what we needed as far as names, image, and link colour. In the secon one, we copied the if statement, made it an elseif statement, and changed the name and file path to match the stylesheet.

What do you think? Pretty easy once you see how to do it! Give it a try, show me your cool new schemes!

2 Replies to “Additional Colour Schemes for Your TwentyEleven Child Theme”

  1. Dumb question #1: You’re merely talking at this point about the background color, right?

    Ok, I presume this sets all posts and pages etc to the same color, but is there a way to perhaps have the background behind posts one color, and the background behind pages be another color?

    It seems that the contrast to a new member or guest would be impressive.

    Thanks, Magyver.

    1. Nope. What this whole business does is install a new colour scheme. So, currently, if you have twentyeleven running and go to appearance -> theme options in your admin menu, you have to options, a light, and a dark colour scheme. Switching to the dark changes your entire site’s colour scheme. What I’m doing in this tutorial is adding a third custom colour scheme.

      If you performed this tutorial as it’s written, and then went to that menu, you would see a third colour scheme. However, if you selected it, your site would look exactly the same. All I’m doing here is showing how to install the scheme. It would be up to the user to fill out their new scheme’s stylesheet however they see fit.

      If all you want to do is change some colours, this is far more than what you need. In that situation, you would simply make a child theme using the @import rule to call to twentyeleven’s styling. Then copy over rules, or create new ones to change the various colours.

      You can change anything on a page any colour you want. You can also do it for individual posts, pages, categories, whatever. It’s done with the body class. If I hit view source in my browser right now, on this post, I scroll down to where the body section of my site starts and see this:

      <body class="single single-post postid-693 single-format-standard logged-in admin-bar single-author two-column right-sidebar">
      

      so here’s a real simple bit of css

      .entry-title {
           color: #401f1f;
      }
      

      If that were added to the child theme style.css, all post and page titles would turn maroon. But looking at that body class we can get more specific.

      .single .entry-title {
           color: #401f1f;
      }
      

      would change the color of the title only on the single post view

      .postid-693 .entry-title {
           color: #401f1f;
      }
      

      would change the color only on this very post
      So in your example:

      .page .content {
           background: #333;
      }
      

      would change the background behing posts only on pages

Leave a Reply