Introducing Thirty Ten, my guide to creating a Twenty Ten Child Theme

WordPress 3.0 is introducing a new theme that is light years ahead of Kubrick (also known as the old WordPress default), that looks so good you won’t even mind running it on a live site. In addition to being a beautiful theme in it’s own right, it’s also easy to build upon and create your own child themes for. I’ll show you just how easy it is to make some substantial changes. We are going to move the two column Twenty Ten to a three column theme I’m going to call Thirty Ten.

I’m going to lay out a couple of ground rules for myself when building this theme:

  1. I’m not allowed to override any of the template files with my own version. I want this to be as easy to maintain as possible. This means that I have to use footer.php, header.php and all of the other files.
  2. No output buffers This means I can’t use an output buffer and then regular expressions to get around rule number one.
  3. I want the reader of this article to be able to take and borrow any piece of this theme and use it to modify their own theme Every part of this theme and tutorial is licensed under the GNU public license, just like WordPress

The first step is to create a theme folder and put a blank style.css and functions.php in it. This is where the bulk of the changes are going to come in. into our style.css document we are going to insert our header that looks like:

/*
Theme Name: Thirty Ten
Theme URI: http://aaron.jorb.in/thirty-ten
Description: A child theme of the 2010 default theme for WordPress.
Author: Aaron Jorbin based on work by the WordPress team
Author url: http://aaron.jorb.in/
Version: 1.0
Tags: black, blue, white, three-columns, fixed-width, custom-header, theme-options, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
Template: twentyten
*/
@import url('../twentyten/style.css');

My next step is to follow the sage advice: “good artists borrow, great artists steal” and will use the 3c-fixed.css layout style from thematic. I also need to add a fix to make it work with the current Twenty Ten style in all browsers.

@import url('3c-fixed.css');
#access{overflow: visible;}
#main{clear: both;}

So in four lines of css, I’ve switched Twenty Ten from a two column theme to a three column theme. SWEET!

That’s how flexible twenty-ten is. I want to do more then that though, because that alone is boring. Let’s now move our navigation menu to be above our image. This step we are going to be almost as easy.

#header #access{
top: -240px;
position: relative;
}
#site-title {
margin:0 0 44px;
}

All we are doing this time is making the site-title have a bit more of a bottom margin to bump down the image, and then filling that space with our menu. I also want to make a few cosmetic changes to the default link colors and also change the formatting in the footer a bit (which will make a lot more sense after you’ve read the rest of this tutorial) To do this I added the following css:

/* Change our default link colors */
a:link{
color:#fdb120;
}
a:visited{
color:#d00c0d;
}
a:hover{
color:#1143d8;
}
a:active{
color:#a67942;
}
/* Modify the footer to allow for a bigger description and nicer looking links  */
#site-info{
width:250px;
}
#site-generator{
width: 535px;
}

#site-generator a{
background: none;
padding: 0 7px;
}

#jorbin-link a:link, #jorbin-link a:visited, #jorbin-link a:hover,#jorbin-link a:active {
color:#990000;

}
#generator-link a{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../twentyten/images/wordpress.png) no-repeat scroll left center;
color:#666666;
display:inline-block;
line-height:16px;
margin-left:1px;
padding-left:19px;
text-decoration:none;
}

Speaking of the header image, as much as I like the default ones, I want to include some of my own. That’s incredibly easy and leads us to our first additions to the functions.php file.

For this component, Aaron Hockley of Hockley Photography was nice enough to let me use a few of his photos that are available for you to download and use with Thirty Ten. To register some additional headers I’m using the following function:

add_action( 'after_setup_theme', 'thirtyten_setup' );
function thirtyten_setup(){

/* Add additional default headers  All Photos are by Aaron Hockley of Hockley Photography */
	$thirty_ten_dir =	get_bloginfo('stylesheet_directory');
	register_default_headers( array (
		'lights' => array (
			'url' => "$thirty_ten_dir/images/lights.jpg",
			'thumbnail_url' => "$thirty_ten_dir/images/lights-thumbnail.jpg",
			'description' => __( 'Lights by Aaron Hockley', 'thirtyten' )
		),
		'train' => array (
			'url' => "$thirty_ten_dir/images/train.jpg",
			'thumbnail_url' => "$thirty_ten_dir/images/train-thumbnail.jpg",
			'description' => __( 'Train by Aaron Hockley', 'thirtyten' )
		),
		'bridge' => array (
			'url' => "$thirty_ten_dir/images/bridge.jpg",
			'thumbnail_url' => "$thirty_ten_dir/images/bridge-thumbnail.jpg",
			'description' => __( 'Bridge by Aaron Hockley', 'thirtyten' )
		)

	));
}

This will add three choices for default headers to your site. It keeps all of the original default headers that come with Twenty Ten. If I wanted to get rid of any, I could use unregister_default_headers and just pass the name of the one I wanted to get ride of. Another option would be to create my own version of twentyten_setup. If you do that, make sure you include all the parts of that function you want to keep.

Another change that I want to make is the read more link. Twenty Ten uses the function twentyten_excerpt_more to make the link say ” …Continue reading → “. I’m going to make my own version that says ” …finish reading ” followed by the blog title. I do this by first adding the following function:

function thirtyten_excerpt_more($more){
	return '&nbsp;… <a href="'. get_permalink() . '">' . __('finish reading '.get_the_title() .'', 'twentyten') . '</a>';
}

Next I just have to deregister twentyten_excerpt_more and register my own. By adding the following lines to the function thirtyten_setup that I created earlier, I make sure that we remove twentyten_excerpt_more after it’s been created:

	remove_filter( 'excerpt_more', 'twentyten_excerpt_more' );
	add_filter ('excerpt_more', 'thirtyten_excerpt_more' );

The Next change I want to make is to some of the strings. I want to have a slightly unique footer and I also want to change the meta text on single pages. As I learned in mangling strings for fun and profit/by WordPress lead Developer Peter Westwood, using the WordPress internationalization functions allows me to change almost any string in WordPress (or in this case, Twenty Ten). I use the following code for that purpose:

class Thirty_Ten_Text_Wrangler {
  function site_generator($translation, $text, $domain) {
  $translations = &get_translations_for_domain( $domain );
  if ( $text == 'Proudly powered by <span id="generator-link">%s</span>.' ) {
   return $translations->translate( 'Proudly powered by<span id="jorbin-link"><a href="http://aaron.jorb.in">Aaron Jorbin\'s Idea</a></span>, <apan id="hockley-link"><a href="http://www.flickr.com/photos/ahockley">Aaron Hockley / Hockley Photography</a>, and <span id="generator-link"> </span>' );
  }
  return $translation;
 }
 function single_meta($translation, $text, $domain) {
  $translations = &get_translations_for_domain( $domain );
  // With Tags
  if ( $text == 'This entry was posted in %1$s and tagged %2$s. Bookmark the <a title="Permalink to %4$s" rel="bookmark" href="%3$s">permalink</a>. Follow any comments here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.' ) {
   return $translations->translate( 'This entry was posted in %1$s and tagged %2$s. It can always be found at <a title="Permalink to %4$s" rel="bookmark" href="%3$s">it\'s permalink</a>. Follow any comments left here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.' );
  }
  //Without
  elseif( $text == 'This entry was posted in %1$s. Bookmark the <a title="Permalink to %4$s" rel="bookmark" href="%3$s">permalink</a>. Follow any comments here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.' ) {
   return $translations->translate( 'This entry was posted in %1$s. It can always be found at <a title="Permalink to %4$s" rel="bookmark" href="%3$s">it\'s permalink</a>. Follow any comments left here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.' );
  }

  return $translation;
 }

}
add_filter('gettext', array('Thirty_Ten_Text_Wrangler', 'site_generator'), 10, 4);
add_filter('gettext', array('Thirty_Ten_Text_Wrangler', 'single_meta'), 10, 4);

The final change is that I want to change how my authors page looks, or at least how posts show up on them. Twenty-ten makes it easy for child themes to have their own loop on a specific page type. All it takes is creating a loop-templatename.php  file and inserting your loop there.  So I made loop-author.php file and my custom loop lives there.

If you want to download this theme and use it for your own, you can Download thirtyten here. Also, take a look at to see this Twenty Ten Child Theme in action. And I’ve added all the code to a mercurial Google code site for you to easily make changes to. And finally make sure to comment below if you use it or do something cool with it so I can check it out.

UPDATE: I’ve added the ability to pick which style of three column theme you want.  Check out http://aaron.jorb.in/thirtyten/three-columns-three-ways/ to see the options.  And Follow the Thirty Ten subsite for more changes

151 thoughts on “Introducing Thirty Ten, my guide to creating a Twenty Ten Child Theme

  1. Ben

    Thanks Aaron!
    Really interesting read.

    Making a wordpress them myself currently, or at least started till I find out about child themes! Any reason you went for making a child of 2010 rather than using the other frameworks / parent themes out there? I’m a confident with PHP, so getting my hands really dirty isn’t so much of an issue for me.

    Cheers

    Reply
    1. Aaron Jorbin Post author

      I used 2010 because it is a great, well written easily extendable theme. Plus it was brand new and I wanted to play with it. My previous theme ran on a Thematic and I’ve also used plenty of other frameworks and parents. The main point of this tutorial is to show how to use 2010 because it’s also the one that every user of WordPress will have a chance to see.

      Reply
  2. Richard

    Thank you Aaron for your work. Has helped us a lot.

    I just tried installing a WordPress Network to see if I could easily make a French language version of the site.

    The network admin doesn’t seem to recognise thirty ten as a theme.

    Has anybody else tried this and what did you find?

    Reply
  3. Ken Samson

    Aaron
    Thanks fo the great tutorials, they have been really useful. I want to create additional page templates such as a salesletter page without a header and an optional sidebar, at the same time keeping the header for normal pages, how would I approach this?

    thank you very much
    Ken

    Reply
  4. Tony M

    Hi,

    I am capable of doing this code but am having a slow start.

    The first code you show above, where does it go? Into our blank stylesheet or the twentyten’s existing one?

    The next set you have listed continues under the above?

    Reply
  5. Anthony Wagner

    Aaron, it is a pleasure to meet you. I am currently using your thirty ten theme. I cannot figure how to remove the date stamp from my post how can this be done my site is Prokarateshop.com/blog

    thanks in advance

    Reply
  6. Bob Blick

    Nice. I just added the 3 column to a previous 2 column and it is definitely what I wanted. I was looking through everything though and can’t find out how to change the size of the picture in the header? I like the header image but want to change the height to a smaller size – much like Mandigo allows you to do.

    Is it possible?

    Reply
    1. Aaron Jorbin Post author

      Take a look at the twentyten functions.php:
      // The height and width of your custom header. You can hook into the theme's own filters to change these values.
      // Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
      define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
      define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

      Reply
      1. JoAnn

        I would like the menu below the image too. I figured removing those 7 code lines was the answer. But I’ve done that and nothing has change. Is that the only code I need to remove?

        Reply
  7. Katrina

    Hi, thanks so much for this post!

    I was just wondering if it’s possible to change the header dimensions to “100%” or something that will make the header fill the entire website / screen?

    Thanks for any help, Aaron!

    Reply
  8. Dan Gilmore

    Thanks, Aaron. I’m using this tutorial to make a three-column layout on my new recipe site powered by WordPress. I don’t think I need to pay $60 for a theme when I can whip it up myself :)

    Reply
  9. Alice Mercer

    Having difficulty getting new page editor to show Archives template.

    1. I’ve rename archive.php –> archives.php
    2. I’ve put it in the Twenty-ten and Thirty-ten theme folders
    3. I’ve de-activated, and re-activated the theme.

    Any ideas or references you could point me to would be appreciated.

    Reply
  10. Romeo Cahucom

    I want to maintain the same default picture while converting the 2 two column to three columns. Is there anything else I need to do, other than follow the procedure you indicated? Thanks

    Reply
  11. Goran

    Thanks for the tutorial.

    I wounder if it is possible to import the three columns to the parent theme “Twenty ten” and if so how?

    I want to do that, because I think it’s easier to do all the other changes I will do in “Twenty Ten”

    Thanks!

    Reply
    1. Aaron Jorbin Post author

      I strongly encourage you to not do that. The point of a child theme is to make it so you can update the parent when it is updated. For example, by doing a twenty ten child theme when WordPress 3.0 came out, I was able to take advantage of post formats when they were added in WordPress 3.1. If I had modified twenty ten, it would have meant redoing my modifications just to have this feature available.

      Reply
      1. Goran

        Ok I will then try to make a child theme of my own.

        How do I edit php-files for exampel loop-single.php if I want to remove the navigation between posts, like the ones you have on this post “← Shortribs #100meat and Tweets from the week before 2010-04-05 →”
        Do I just copy loop-single.php from Twenty ten and remove the code from there and save the new loop-single.php into the child theme?

        What way is the easiest whay to work with child theme to se the result fast? I usually make the changes in the admin section of my site, because I can see the changes instantly.

        Reply
  12. Tammy

    Hi, I have never created a child before, so learning is a little slow. I’ve followed up to steps 2. And have put the .css file into the twentyten-child directory. I also put the functions.php file in there.

    Then I wanted to see the changes of to the theme on the website, I reloaded my homepage, but then realized I have to ‘activate’ this new thirtyten theme. Prior to activating, I wanted to preview. When I hit the preview button, I get the following error:

    ~~
    Fatal error: Cannot redeclare twentyten_page_menu_args() (previously declared in /var/www/vhosts/getlasvegasnow.com/httpdocs/wp-content/themes/twentyten-child/functions.php:221) in /var/www/vhosts/getlasvegasnow.com/httpdocs/wp-content/themes/twentyten/functions.php on line 224
    ~~

    Have I forgotten to do something, or do I have to put more of your ideas into the .css file the that?
    Should I have edited the code in your first step to show the url of my own site, or do I just leave it as you have put it. I just left it as you have it.

    Thanks in advance
    Tammy

    Reply
  13. Pingback: Thirty Ten theme | Zeaks Blog

  14. Rob Cubbon

    I found this so useful to start me off making a child theme for 2010. Unfortunately, I’m finding the information I need to carry on (about all the filters and hooks) hard to come by. Making a child theme is a daunting prospect for someone who has just messed around by altering themes’ files. I wish there were more people like you writing about this! Thanks.

    Reply
  15. Pingback: How to Customize your WordPress Website

  16. Pingback: While I’m Away. | Michael Strassburger

  17. marco

    Hi,
    I have a problem, while the home is perfect with the content in the center, on the following pages, all with the sidebar on the right is the side bar widget that overlap the footer content. How can I fix this?

    Reply
  18. Dave

    Hi–
    What steps would we need to take if we already modified the twenty-ten theme directly…didn’t know about Child Themes until after the theme was customized.

    Dont want to have to start over!

    Thanks!

    Reply
  19. JoAnn

    I finally got the menu to move. Well actually I didn’t do anything with it, I just added a new pic and when I went to the page, Firefox finally showed it updated. Not sure why, but at times Firefox won’t show my updates. Anyway, is there a way to make the page bigger? I like the 3 column layout, and but I would like to make all three columns a bit bigger. Which area do I want to change to do that? Or can I just add new coding to your style.css sheet?

    Reply
  20. Pingback: WordPress Twenty Ten Child Themes: WordPress.TV | Lisa Sabin-Wilson

  21. Pingback: CP theme is nod for the ..

  22. Pingback: January meetup link roundup

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>