Finishing VoodooChild 2011 Setup: An Overview of Our Twentyeleven Child Theme

So over the past couple of days, we got a basic child theme setup. We started with basic width and header images. Then we moved on to margins, and relocating some stuff in the header, and customizing widgets a bit. Let’s just look at our final code.

So here’s the important file. Important because it’s the only file we need to get a child theme running. Our child theme’s style.css.

/*
Theme Name:     Voodoo Child 2011
Theme URI:      http://www.rvoodoo.com/projects/wordpress/wordpress-tip-stop-editing-twentyten-theme-use-a-child-theme
Description:    Child theme for the Twenty Eleven theme
Author:         Rev. Voodoo
Author URI:     http://www.rvoodoo.com
Template:       twentyeleven
Version:        0.1.0
*/
@import url('../twentyeleven/style.css');
@import url('http://fonts.googleapis.com/css?family=Crimson+Text');
@import url('http://fonts.googleapis.com/css?family=Arimo');


#branding img {
	padding-top: 10px;
	border-top: 2px solid #333;
}
#branding hgroup {
	margin: 0;
}
#site-title {
	text-indent: -999em;
	padding: 0;
}
#site-title a {
	color: #111;
	font-size: 1px;
	font-weight: bold;
	line-height: 3px;
	text-decoration: none;
	height: 1px;
}
#site-description {
	margin: 0;
	font-size: 14px;
	position: absolute;
	right: 40px;
	top: 20px;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px #fff;
	font-style: italic;
	font-size: 1.2em;
	background: #fff;
	background: rgba(158, 151, 134, 0.6);
	border: 4px double #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	padding: 5px;
	-webkit-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	-moz-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
}
#branding #searchform {
	position: absolute;
	top: 150px;
	right: 40px;
	text-align: right;
}
#page {
	margin: 1.5em auto;
	max-width: 1050px;
	border-top: 15px solid #bbb;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}
#main {
	clear: both;
	padding: 0.625em 0 0;
}
#primary {
	float: left;
	margin: 0 -32.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 32% 0 4%;
	width: 62.4%;
}
#secondary {
	float: right;
	margin-right: 4%;
	width: 24.8%;
}
#supplementary {
	border-top: 1px solid #ddd;
	padding: 1.625em 4%;
	overflow: hidden;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	margin: 0 auto;
	width: 75%;
}
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -2em;
	padding-left: 0;
}
body, input, textarea {
	color: #373737;
	font: 15px Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}
.entry-title {
	padding-top: 5px;
}
.widget {
	background: #9e9786;
	background: rgba(158, 151, 134, 0.6);
	border: 4px double #ffffff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	padding: 5px;
	-webkit-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	-moz-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	list-style-type: none;
}
.widget_tag_cloud .tagcloud {
	text-align: center;
}

You can see we set up the header in here to reference twentyeleven. Then we have the @import rule to call to twentyeleven’s style.css. If any of this is new to you, read my original article on child themes. The remaining @import rules are simply bringing in some Google fonts.

So after getting the style.css all in place we needed our functions.php file:

//CUSTOM HEADER SIZE
add_filter( 'twentyeleven_header_image_height', 'voodoo_header_height');
function voodoo_header_height($param) {
return 175;
}
add_filter( 'twentyeleven_header_image_width', 'voodoo_header_width');
function voodoo_header_width($param) {
return 1050;
}

Please note that this post has been updated. One of our readers pointed out that the below code wasn’t the best way to change the header image size. The above code is the new and improved updated code. The below code works, but causes errors. I’m keeping it here for reference and comparison.

<?php
//CUSTOM HEADER SIZE
add_action( 'after_setup_theme', 'voodoochild_theme_setup' );

if ( !function_exists( 'voodoochild_theme_setup' ) ):
function voodoochild_theme_setup() {
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 175 ) );
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1050 ) );
}
endif;

This got us our new header image size. And finally, we needed to adjust our header to make everything work as we set up in the css:

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title(''); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed">
	<header id="branding" role="banner">

			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( ! empty( $header_image ) ) :
			?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// The header image
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() &&
							has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT ) ) ) ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else : ?>
					<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>

			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<hgroup>
				<h1 id="site-title"><?php bloginfo( 'name' ); ?></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>

			<?php endif; ?>

			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
	</header><!-- #branding -->


	<div id="main">

This header.php has one additional tweak, I removed the title logic up in the head section, and replaced it with the standard default wp_title. This allows it to play nice with Yoast’s WordPress SEO plugin. And that’s the end of our wrap-up. The basic of getting started with child theme customization. What do you think? I’d love to know if you used this info, and if you went even further with it?

34 Replies to “Finishing VoodooChild 2011 Setup: An Overview of Our Twentyeleven Child Theme”

  1. Thank you so much for this! It’s so useful as there’s very little out there yet on customising twenty eleven which makes it hard for beginners like me…

    Just wondering if you’re planning to do anything on changing the fonts/sizes? I’m having real trouble as for example the h1 in page content appears the same as h2. Ideally I’d like to define my own font families and sizes for each of the h1, h2 etc …

    1. Sure, I can write something up. It’s all about using available css selectors. 2011 may not have a font set for certain elements, so it gets inherited from the more general rules. 2011 only sets fonts in certain areas. So changing the existing fonts is easy to find and change, but when trying to adjust more specific items on the page, you may have to put new rules into your css. I’ll try to write a bit tomorrow about it!

    1. What do you mean moved your header graphic up? Did you change the size? Adjust some css? I’m not sure what exactly that means? Also, if you already had images uploaded and then change the size, some layouts will be messed up a little. I used the regenerate thumbnails plugin to fix the issue on my site

      1. I adjusted the php header page to moved everything between the tags down like you said to. I also increased the page width #page, I did not make any changes in PHP for that though. Thats all I did for my site, now the header is on the top of the page and the nav bar stayed put.
        Here is my CSS

        /* =Structure
        ----------------------------------------------*/
        
        #page {
        	margin: 2em auto;
        	max-width: 1050px;/*W5 changed from 1000px to widen page*/
        }
        
        /* =Menu
        -------------------------------------------------------------- */
        
        /* Search Form */
        #branding #searchform {
        	position: absolute;
        	top: 150px;
        	right: 40px;
        	text-align: right;
        }
        
          1. DUH

            /* =Structure
            ----------------------------------------------*/
            
            #page {
            	margin: 2em auto;
            	max-width: 1050px;/*W5 changed from 1000px to widen page*/
            }
            
            /* =Menu
            -------------------------------------------------------------- */
            
            
            
            #branding img
            {
            	/* Removed border and padding to clean up the header
            	graphic and remove whitespace on top*/
            }
            
            #branding hgroup
            {
                margin: 0;
            }
            
            #site-title
            {
                text-indent: -999em;
            	padding: 0;
            }
            
            #site-title a
            {
                color: #111;
                font-size: 1px;
                font-weight: bold;
                line-height: 3px;
                text-decoration: none;
                height: 1px;
            }
            
            #site-description
            {
                margin: 0;
                font-size: 14px;
                position: absolute;
                right: 40px;
                top: 20px;
                color: rgba(0, 0, 0, 0.6);
                text-shadow: 0 1px 1px #fff;
                font-style: italic;
                font-size: 1.2em;
                background: #fff;
                background: rgba(158, 151, 134, 0.6);
            }
            
            /* Search Form */
            #branding #searchform
            {
            	position: absolute;
            	top: 307px;
            	right: 40px;
            	text-align: right;
            }
            
  2. Agree, awesome tutorials and so much help as there’s so little on twenty eleven at the moment.
    Thank you for offering to help with font styling – it would be much appreciated as I’ve tried without success to change them

    1. OK, so I have a new post up now about working with fonts. It’s pretty basic. I wasn’t exactly sure what you were looking for. Check it out if you like, and if you need more info let me know in the comments, and I can add further info.

  3. Hi
    I’m trying to customise the navigation menu – colours, increase height, spacing, highlight colours etc but having a bit of trouble.
    Also the search box is now not in line with the menu text so I think I may be adjusting the wrong thing using #access a
    …sorry for basic questions but I’m still trying to learn CSS so any help much appreciated.
    Thank you

    1. #access is the proper bit of css for working with the nav menu. #access is the overall menu, #access ul is the actual list, #access li is each individual top level menu item, #access a is the text in the list item, #access ul ul is the dropdown. Editing the menu shouldn’t affect the search box….. the search is positioned with

      /* Search Form */
      #branding #searchform {
      	position: absolute;
      	top: 3.8em;
      	right: 7.6%;
      	text-align: right;
      }
      

      But, if you’re editing the header area in other ways, that can affect the search box. It depends on what you’ve done to the theme so far.

  4. Thanks – Really helpful just spent a day targeting pages and changing them individually with css. Had twentyten set up like this already. Really needed to know how to do it more efficiently in twentyeleven and you’ve just shown me how.

  5. Hey, I didn’t see any reference to this in your article or comments, but I noticed that you managed to remove the vertical spacing between items in the dropdown menu. I’m indexing a 15-20 post ‘series’ from this menu (as I write each post…), and I’d like it to fit on the screen once I have more posts completed. Twenty eleven has the items separated by a space that’s almost as tall as each list item! I see that you’ve eliminated the white space between the two grey lines, so that it appears to have just one grey line separating the listed items. I want to do exactly that. Little help?

    I’m at http://www.essentialdecibels.com, and the dropdown menu that I want to fix is:

    Sound>Live Sound Explained>…(soon-to-be ~20 item list)…

    Thanks!
    -Greg

    1. You actually have something pretty bizarre going on in your menu. That is not default behaviour. My menu is untouched, that is how the default menu should look. http://cdn.rvoodoo.com/ if you take a look at this link, it is my test WP install. Specifically the ‘Parent Page’ tab. I added some more items there for you to see. That is a totally untouched twentyeleven theme. YOu can see the menu does not have any of the strange spacing that you have. I looked at your child theme css, and I see you have no css in there other than the import rule. Did you make any modifications to the parent theme at all?

  6. Umm… yeah. I did modify the parent. I’m kind of new to dealing with css, and I wasn’t sure how to edit just the child theme.

    I saw the menus in your test install. I wish I’d noticed when that went haywire. I think I’ll just reinstall the whole theme/child if I’ve managed to mess that up… I was just eager to get my hands dirty, I guess…

    Before I do so, am I supposed to put modified css into the child theme following the import rule? Does that override the parent theme’s settings?

    Gosh. I feel dumb now…
    -Greg

    1. You always leave the parent theme untouched, so best thing would be to reupload a fresh twentyeleven theme. Any css you wish to edit, you copy from the parent to the child, and then make the edits. You can also add brand new rules to your child. You put your css underneath the @import rule. The parent theme css loads first, and then the child. So your child css is what gets displayed. The whole reason for making child themes is so you can safely make edits. Any good WP theme needs to be updated over time, for a variety of reasons. If you edit the theme directly, when it gets updated, your edits get lost. But if you keep your edits within a child theme, the parent can safely be updated without your changes being lost.

  7. Hi there, I have a small problem. I’m completely new to all this. I checked out loads of themes before I realised I would have to do some modifications of my own to twentyeleven. Firstly I would need to learn how to modify though! I’ve followed your tutorial and have copied the code into functions.php in the child theme folder. You can see the site is starting to look completely different to 2011 bestinteriordecorators.org with my own banner. However when I log in to the dashboard through http://bestinteriordecorators.org/wp-admin/ I get an error code which you will see. Please help, heres my functions.php

    <?php
    // REMOVE TWENTY ELEVEN DEFAULT HEADER IMAGES
    function wptips_remove_header_images() {
    	unregister_default_headers( array('wheel','shore','trolley','pine-cone','chessboard','lanterns','willow','hanoi')
    	);
    }
    add_action( 'after_setup_theme', 'wptips_remove_header_images', 11 );
    //CUSTOM HEADER SIZE
    add_filter( 'twentyeleven_header_image_height', 'voodoo_header_height');
    function voodoo_header_height($param) {
    return 175;
    }
    add_filter( 'twentyeleven_header_image_width', 'voodoo_header_width');
    function voodoo_header_width($param) {
    return 1050;
    }
    ?>
    1. Aaaaah, fixed thanks to a Google search. I was confused with the error, but now i’m a bit more adept at understanding errors. It was a simple case of deleting some white space at the end of the code.

  8. I have gone from almost zero knowledge of css and php to reasonable understanding from following this. Brilliant. Thanks. I really like 2011 theme but wanted to make many of the same changes as you. Now I can work out how to do what I want to do differently and get it the way I want.

  9. On July 25, 2011 Rev. Voodoo wrote:
    “#access is the proper bit of css for working with the nav menu.
    #access is the overall menu,
    #access ul is the actual list,
    #access li is each individual top level menu item,
    #access a is the text in the list item,
    #access ul ul is the dropdown”

    How does one KNOW what these various line items affect and/or control if they are not commented as such in the original style.css style sheet (which they’re not in twenty eleven and/or most other style sheets I’ve seen)? These names are often quite non-intuitive, so how do you find out just what they control?? Thanks very much!!!

    1. Well, how much do you know about html/css? The first thing to do is get a bit familiar with the workings. lynda.com offers some really helpful tutorials, I paid for a month subscription and learned the basics. I know how the code you listed works, because it’s general css. What I do is look through the template files, and I can see that #access is the menu. Beyond that, the ul, li, etc is how all css based dropdown menus work. So It’s just pretty much learning css that lets me do that.

      You can use a tool like firebug for firefox, or I believe google chrome has dev tools built right in. Using those tools, you can point at elements of a web page and see what css is applying.

      Once you get familiar with css and html, you can read the template files, or vew the page source from within a browser, and know how the html relates to the css. A lot of it has been trial and error for me to. You learn the basics like if I go in 2010/2011 header.php and see div id=”access” I know I’m looking in css for #access. when you see a div, li, span, etc, with an id, you look for a (#) in the css, if you see a class, it’s a dot (.) in the css.

      2010 and 2011 are pretty well commented. Not everything can be commented though, every additional character in the code increases loading time. So it’s a balancing act. If you can get the basics figured out, you’ll start to see that it is fairly easy to match the code to the css.

      It’s definitely a bit overwhelming at first, but just like anything else, if you can get the basics / rules figured out, you can start to spot patterns, and it doesn’t take long before you are reading the code and knowing what it means.

      1. Thank you very much for a very prompt, thorough and detailed explanation to the question asked. You are one of the most thorough writers on WordPress and CSS on the web. Your work is much appreciated!!

Leave a Reply