How to: Create a Child Theme Based on Twenty Eleven

This is a follow-up of our previous post where we reviewed Twenty Eleven – the new default theme for WordPress 3.2. In the previous post I explained the the structure of Twenty Eleven and why it’s so easy for developers to take advantage of the theme to customize it for their own purposes, i.e. creating a child theme based on Twenty Eleven.

Today we’ll have more code, we’ll talk about some neat actions and filters that Twenty Eleven has to offer. We’ll create a new child theme for Twenty Eleven but instead of overriding it’s templates, we’ll use our PHP skills to create a new color scheme for Twenty Eleven — an orange one.

Twenty Eleven Child Theme

Understanding Color Schemes in Twenty Eleven

You’ve all seen the Theme Options settings that Twenty Eleven ships with, which not only looks good and works well, but is also extensible with plugins, extra code snippets in Twenty Eleven (not recommended) and a child theme (recommended). Here’s what the original Theme Options page looks like.

Twenty Eleven Theme Options

And here’s what we’re going to make our child theme add to that screen — a new option for the orange color scheme, which will also set the default links color to orange, but of course can be overridden by the end user.

Twenty Eleven Child Theme Options

In the previous article I wrote about the Twenty Eleven files structure, and just as a recap, the theme options page is not written in the functions.php directly, but included from within functions.php. The actual content for the theme options page is in /inc/theme-options.php file, so let’s take a closer look at that.

There’s a bunch of stuff there, but we’re interested in the function called twentyeleven_color_schemes, which is around line 110. As you can see, the function returns an associative array of arrays defining the existing color schemes. But before it returns that, it runs it through a filter called twenty_eleven_color_schemes. We’ll hook to that filter and add our new color scheme for the options panel.

Second interesting function is the twentyeleven_enqueue_color_scheme at around line 324. It enqueues the dark.css file if the the color scheme is set to “dark”. There, they’ve just shown us the right way to do it. Apparently we can inject our own stylesheet using the twentyeleven_enqueue_color_scheme action, where we’ll have to compare the current selected color scheme to “orange” and enqueue our stylesheet using wp_enqueue_style.

So that’s the game plan — add a new color scheme to the color schemes array, enqueue the stylesheet if our color is selected. But before diving into that part of the code, let’s create our child theme and make sure it works.

Creating the Child Theme

The basic principles of child themes is that they’re themes of their own, but instead of having their own template files, they use the parent theme’s files with the ability to override some of them. This means that if WordPress has been asked for the index.php template file, it will first search your child theme directory for one, and if it isn’t there it will fall back to the parent theme’s directory and and use the parent’s template.

Note that the functions.php file is different — it never gets overridden by child themes because WordPress will load both functions.php files so you don’t have to copy anything from you parent’s functions.php, that will be executed anyway.

The Child Theme Stylesheet

So as the codex entry suggests, let’s create a new child theme called Twenty Eleven Orange. Start by creating a new directory in your themes folder right next to the twentyeleven directory and call it twentyeleven-orange. Note that both themes have to be installed side-by-side in order for your theme to work, since it will be using the template files from the original Twenty Eleven theme.

Stick in a new style.css file into your directory and add the following contents:

/*
Theme Name: Twenty Eleven Orange
Theme URI: http://theme.fm
Description: Child theme for the Twenty Eleven theme
Author: Konstantin Kovshenin
Author URI: http: //theme.fm
Template: twentyeleven
Version: 1.0
*/

@import url("../twentyeleven/style.css");

The header and the import directive is really all we need for our child theme. This will make sure that WordPress recognizes the new theme, and we’re also telling WordPress to use Twenty Eleven as the parent theme using the “Template:” tag. Now, when the theme is activated WordPress will load our stylesheet and not Twenty Eleven’s, so we’re using the import directive in CSS to grab the original stylesheet from Twenty Eleven.

You might ask where the orange stuff is, right? Well we’ll put that in a separate file called orange.css and load it only when it’s been selected in the theme options. This will make sure that the light and dark color schemes of Twenty Eleven still work as expected.

The Orange Theme Stylesheet

Let’s go ahead and create the orange.css stylesheet too, right next to your style.css file. You don’t have to dig into the contents of the file itself, all it’s doing is creating an orange background for the site and making sure that the background color for the navigation menu is orange when hovered.

body {
	background: orange;
}

#access .menu li a {
	color: orange;
}

#access .menu ul.children > li:hover > a,
#access .menu ul.sub-menu > li:hover > a,
#access .menu > ul > li:hover > a,
#access .menu > li:hover > a {
	color: white;
	background: orange;
}

#access .menu ul.children li a,
#access .menu ul.sub-menu li a
{
	background: #333;
	border-bottom: dotted 1px #555;
	color: orange;
}

We’re not creating any rules for the ancor entry for all links, and yes, we want them to be orange. In this case, the body background and the navigation items is enough, since Twenty Eleven has a “default link color” entry for each of the color schemes which the user can then change. We don’t want to hard-code that in our stylesheet, do we? And yes, the background color can be manually changed via the Background options under Appearance too ;)

The Color Scheme Thumbnail

Twenty Eleven uses neat thumbnails when selecting color schemes, so I created a very similar image called orange.png, same size (136 by 122 pixels) and dropped it into my child theme’s directory.

Twenty Eleven Orange Preview

I’ll link to that image when declaring a new color scheme for Twenty Eleven in our next and final step — the functions.php file.

The Functions File

It’s a simple functions.php file lying in your child theme’s directory. This is where we’re going to use the action and filter I spoke about earlier to let Twenty Eleven know about our new color scheme. Make sure you start with an opening PHP tag and then type in the following.

add_filter( 'twentyeleven_color_schemes', 'twentyeleven_color_schemes_orange' );
add_action( 'twentyeleven_enqueue_color_scheme', 'twentyeleven_enqueue_color_scheme_orange' );

function twentyeleven_color_schemes_orange( $color_schemes ) {
	$color_schemes['orange'] = array(
		'value' => 'orange',
		'label' => __( 'Orange', 'twentyeleven' ),
		'thumbnail' => get_stylesheet_directory_uri() . '/orange.png',
		'default_link_color' => '#FFA500',
	);
	return $color_schemes;
}

function twentyeleven_enqueue_color_scheme_orange( $color_scheme ) {
	if ( 'orange' == $color_scheme )
		wp_enqueue_style( 'orange', get_stylesheet_directory_uri() . '/orange.css', array(), null );
}

Let’s quickly run through the code. The first two lines are the ones that add the hooks to Twenty Eleven’s color scheme filter and the enqueue color scheme action. Their definitions are quite simple as well. The twentyeleven_color_schemes_orange function takes the $color_schemes array given by Twenty Eleven. We’re extending that array with our own entry, similar to what Twenty Eleven has for the light and dark schemes, and finally returning the new $color_schemes array.

Note that unlike Twenty Eleven, we’re using the get_stylesheet_directory_uri function instead of get_template_directory_uri. This will make WordPress look for the files in our child theme’s directory and not the original Twenty Eleven. Also note that default_link_color entry set to the orange color. As the name suggests, it’s the default links color throughout the website, and this is the reason why we didn’t have an entry for that in our orange.css stylesheet.

The second function is similar to the Twenty Eleven’s enqueue function that we’ve discussed earlier. The $color_scheme argument contains the value of the selected color scheme. We match that to orange and use wp_enqueue_style to include our orange.css file.

Guess what? You’re done! Go ahead and enable your child theme from the Appearance section in your admin panel. Browse to Theme Options and you’ll see your new color scheme available. Select the color scheme, browse to your homepage and voila, it’s orange! Hopefully…

Twenty Eleven Child Theme Preview

Conclusion

That wasn’t very difficult, was it? Now think about taking this further with a set of five or more different color schemes for Twenty Eleven. Then go back to the Twenty Eleven source code and look for more actions and filters you can take advantage of. Seriously, the possibilities are endless, and with such a clean approach, it’s easier than ever! Yet another reason to love Twenty Eleven and look forward to Twenty Twelve ;)

That’s it folks! Today you’ve learned how to create your very own child theme based on WordPress’ Twenty Eleven theme with only a couple of actions and filters, a stylesheet and an image. Let us know what you have in mind, comments, questions, anything. And thanks for staying tuned to our RSS feed!

Konstantin Kovshenin 2 years ago in

Leave a Comment

119 comments