Twenty Eleven Dark Child Theme

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.

eleven-child-1

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.

eleven-child-2

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.

eleven-child-3

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.

eleven-child-4

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.

eleven-child-5

You may download the file here or visit the All Downloads page for other files.

Twenty Eleven Child (Dark)

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

6 thoughts on “Twenty Eleven Dark Child Theme

  1. hi,
    this is a very helpful tutorial so i bookmarked it. the only thing i have problem now is the widget title not displaying all i lowercase! does anyone knows how to do it? i tried replacing all to lowercase; everything is fine except the widget title!
    see my blog in progress here: http://redpenredtemper.com/
    regards,
    geraldine

  2. Hi, I discovered this post via the WP forums. Thanks for posting it.
    Can this also be done in Twenty Eleven Version: 1.4?
    Will the implementation be different or can I use this one as it appears here? If you happen to know of other posts about this please direct me there.

    See, my plan is to limit the amount of imported and overridden style sheets and duplication. Already I’ll have to do serious minifying…
    So can I disable them options “dark” in parent theme but have “dark” active in child?

  3. Great job with this function! It really helped me much. However, it loads the custom stylesheet even when you go back to the clear color scheme. How do you resolve that?

  4. Dude,
    Your going through way too much trouble. Just use the:
    !important
    qualifier in your child theme css and it will over ride the dark.css
    like this
    .singular .entry-title {
    color: #FFF200 !important;
    That will change the page title color and over ride the dark.css

    Just add !important to any reference that gets over riden by dark css and you’ve got it solved.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More