The recent release of WordPress 3.2 and the updated Twenty Eleven theme means that we need a slightly different approach to the child theme styles if we want to use the dark theme.

The new theme options for the dark theme are loaded after the child theme has loaded it’s stylesheet so some color changes will not work, to overcome this we will load a second stylesheet after the parent twenty eleven theme stylesheet and dark stylesheet have loaded.

The Child Theme

Lets use the WordPress Codex example stylesheet and change this for twenty eleven, we copy the screenshot.png image file across to the child themes folder as well, this is the sample style.css updated for the twenty eleven theme.

/*
Theme Name: Twenty Eleven Child
Description: Child theme for the Twenty Eleven theme
Author: Digital raindrops
Template: twentyeleven
*/

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

#site-title a {
 color: #009900;
}

If we activate or child theme we can see that the style for the title color has changed to green, this is the same result we had in the twenty ten theme.

The Dark Theme

A really nice feature of the twenty eleven theme is the dark theme option, if we navigate to Admin > Appearance > Themes > Theme Options, we can activate the dark theme by selection of the dark theme option.

If we now preview the theme we can see the dark theme, however the title has lost our changes, this means that we will not be able to change the color styles from style.css the same way we did for the twenty ten theme.

Looking at the page source we can see that the sequence the stylesheets are loaded into the head section is the reason for our title change being lost, with CSS meaning cascading style sheets, the last change is the one that is applied.

The Changes

What we will do is add a second stylesheet and do all our changes in there, so we create a file in our child theme called custom-style.css and we add our title style into this new file

site-title a {
 color: #009900;
}

We need a way to load this stylesheet, so we create a file called functions.php, there is an action hook ‘after_setup_theme’ we can call this after the child and parent themes have loaded, we create a function to run as an argument, notice the last add_action() we have passed in 11 as the last argument, this means that our stylesheet will be loaded later that the other theme stylesheets.

<?php

/** Tell WordPress to run post_theme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'post_theme_setup' );

if ( !function_exists( 'post_theme_setup' ) ):
function post_theme_setup() {

/* Add our new styles after all stylesheets have loaded */
function twentyeleven_enqueue_child_style() {
wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() . '/custom-style.css', array(), null );
do_action( 'twentyeleven_enqueue_child_style', 'child_style' );
}
add_action( 'wp_enqueue_scripts', 'twentyeleven_enqueue_child_style', 11 );
}
endif;

Conclusion

We can now change the dark theme styles in the custom-style.css without having to change any files in the twenty eleven parent theme, as we can now see our style is loaded.

Registered members can download the child theme used for this example, we hope this quick tutorial will help other WordPress users.

[private]

[download id="74"]

[/private]