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:

[css]
/*
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’);
[/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.

[css]
@import url(‘3c-fixed.css’);
#access{overflow: visible;}
#main{clear: both;}
[/css]

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.

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

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:

[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;
}
[/css]

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:

[php]
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’ )
)

));
}
[/php]

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:

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

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:

[php]
remove_filter( ‘excerpt_more’, ‘twentyten_excerpt_more’ );
add_filter (‘excerpt_more’, ‘thirtyten_excerpt_more’ );
[/php]

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:

[php]
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);
[/php]

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. Great post! I do have to admit though, I am curious about the Dark Arts. Could you give an example of how you might use rule #2 if you didn’t practice such restraint?

  2. This has been extremely helpful, since I’m not so great with PHP. I’m curious if you know how I can change the header image size in my child theme while maintaining the defaults in Twenty Ten since I plan to make several child themes with different header sizes.

  3. I would like to add two additonal “sidebar” widget areas directly underneath the content section (while keeping the two existing sidebars in thirtyten). How do I do this? This would be useful so then I could show the latest article from a category in the widget and feature content. Four to six additional widget areas underneath the content area would be ideal.

    1. I think your best bet for that would be to use a theme such as Thematic rather then Twenty Ten for that. Twenty Ten is a great blogging theme and there is plenty of ways to improve it and personalize it, but it’s not nearly as flexible as Thematic or other similar theme frameworks.

      1. That’s pretty straightforward:

        It involves two files, functions.php and sidebar.php

        In the default twenty ten’s functions.php, navigate down to 363, copy lines 363 to 372 and paste them right after. Replace all instances of ‘secondary widget area’ with ‘tertiary widget area’ or a name of your choice.

        Thereafter copy lines 46 to 56 in sidebar.php and paste them right after as well. Replace the name with whatever you chose earlier, if you followed my suggestion, just replace ‘secondary’ by ‘tertiary’.

        Done.

        This may be replicated for as many widget areas as you wish.

        1. I hesitate the edit the files when creating a child theme as it makes it harder to keep updated. That’s why I recommend using a more flexible framework for changes such as these. My Dirt Ten theme does give an example of adding an additional widget area if you do need an example.

    1. I’m not quite sure what you’re wanting to do, but if you remove the padding from the #wrapper, the header will go from the background to the background with no white space. That might accomplish what you’re after.

        1. This is a little outside the support I can offer on the site, but if you’re really stuck, Feel free to use the contact form in the sidebar and I might be able to do some paid consultation for you.

  4. Hey Aaron –

    Thanks so much for the inspiration here.

    After reading your tutorial, I started what I thought would be a simple project to add some things to a Twenty Ten child, and ended up with a full blown theme that lets one change almost everything you can about Twenty Ten using just CSS.

    If you’re interested in you can see the results of my project and download the new theme I’m calling Twenty Ten Weaver at:
    http://wpweaver.info/themes/twenty-ten-weaver/

    But this would not have happened if not for your tutorial here – thanks again!

  5. Thanks for the tutorial, theres so much code in Twenty Ten that I sometimes get frustrated and can some of it. This helps with some of my confusion on using it.

    Currently using thematic for a client that doesn’t have a large budget. They needed a custom theme so I thought it would be good for an experiment. A bit frustrating to get used to, but its fairly close to my current coding standards. Thanks for the tip to use it at the conference.

  6. Hi Aaron,

    Thank you for providing this great tutorial.
    Do you know a way of having a different header image for each page.

    Thanks again.

    1. Just worked out how it’s done:
      Just uploaded the desired image on the via the page I need it on, then click on the use as featured image and that image is shown in the header.

      1. Glad to see you figured it out. So you know, Twenty Ten requires that the featured image be at least as wide as the HEADER_IMAGE_WIDTH constant which defaults to 940px. You can change that using the twentyten_header_image_width filter.

  7. Wow, I have been working on a three column for over a week. After reading you post, I was going at it all wrong.

    Thanks a lot for the Great post

    Bill and Sheila

  8. Nice post. I’m not sure about Twenty Ten, it seems a little lacking. Might be a nice starting point for a more advanced theme. I haven’t played with it much, and I’m no php expert, but where are the hooks? Why not add some and make it a little more advanced. The reason I really like Thematic is because it’s so easy to do pretty much anything from within functions.php. If Twenty Ten where more like Thematic, Stephens question would have been pretty easy to answer and implement, without touching any of the parent theme files. With the way they have the main div set up I’m not sure it’s possible to create a theme that stretches the entire width of the page without creating new files. It could have been if they would have put the aside in the container div. Seems like kind of a waste to just have the container wrap only the content div. The content encloses the navs and the comments. I might be missing something, but right now the container is just useless extra markup. Anyways I don’t think I’ll be creating any child themes for Twenty Ten, unless I’m only changing the look of it.

    1. Comparing thematic and twentyten is a bit like comparing an electric wok and a gas range. With 2010 you get a great base for building beautiful looking sites, but it has some limitations. Much like you can’t / shouldn’t bake a cake in an electric wok. Thematic is great for sites that you need to have complete control and the ability to customize every aspect of the design. They have different purposes and I like that.

      1. I agree, you can’t compair Thematic to twentyten. I thought I made that clear with my comment. And what site wouldn’t want complete control? What i’m getting at, is it would have been nice to be able to have complete control, and build great child themes, with the theme that’s included and installed with wordpress. How many people use WordPress? How many people have ever heard of Thematic? It would have been nice to just say “install wordpress, install my theme and activate it”. Instead I have to teach people about thematic, then get them to download and install it. If I decide to build a child theme with Thematic, I have to explain why I made the choose to use it and why you should use it as well. Maybe you know more then I. Is there a disadvantage to having a theme like Thematic as the default? Does it slow things down if it’s implemented correctly? I suppose it makes things more complicated, maybe? But a child theme is a child theme, is it not. A perent theme is a parent theme. If you edit the TwentyTen files directly isn’t it going to break on the next update?

          1. Absolutely. Twenty Ten has a much better looking base style and is easier to modify because of it’s simplicity. If you’re looking for a parent for a blog that looks good with very little modification, twenty ten is the top choice right now. If you’re looking for a parent with much more going on and a lot more options for changes, Thematic and similar frameworks is a better choice. It all stems down to what you want to do and choosing the right parent for the job.

  9. I luv the thirtyten demo and am gonna use it on the new site. I am also glad that you have kept the changes as simple and minimal as possible.

    I dont know much of wordpress. So asking: is it ok (not more load on server or something) using a child theme and also the files from twentyten at the same time?

  10. I am brand new to all of this and am slowly feeling my way around WordPress. While what you put together looks simple enough I would appreciate if you could answer a question before I get too deep. I like twentyten but need to have a different presentation of it for each of the sections of my website which is under construction. Does this process do that and if so how do I get the children assinged to the different pages. Thank you

  11. Question for you. I was having problems with the excerpt more function and thought it was related to the changes you made here in thirtyten so I tried to remove the code you have listed above, (I saved it though so I could insert it if there were any problems). It caused a Parse error and now when I paste the code back in I still get the same error. Any advice?

    Here’s the error:

    Parse error: syntax error, unexpected T_STRING, expecting ‘)’ in /home/wiredti2/public_html/wp-content/themes/thirtyten/functions.php on line 29

  12. You say in your post: “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. ”

    Can you please post the code to remove the default headers (preferable all of the blasted things). I’ve been trying to use unregister_default_headers but I’m messing up the syntax somehow and I can’t get it to work.

  13. Hi Aaron,
    I wanted to say that this is a great modification to a very nice theme. Thanks for all the work you put into this.

    I have noticed that there is a bug on the Author Description page. I noticed at the bottom of the author page, I’m getting this:

    Fatal error: Call to undefined function twentyten_cat_list() in /wp-content/themes/thirtyten/loop-author.php on line 141

    It looks like you are, too:
    http://aaron.jorb.in/thirtyten/author/jorbin/

  14. Hi Aaron… I found this tut very useful… just exactly what I needed… thank you.

    However… I cannot for the life of me get the twentyten_excerpt_more thingy to work…
    1st)_ there is no such function in twentyten function.php
    2)_ anything I try to override doesn’t work… I need to override the the twentyten_continue_reading_link function but that is a function not attached as a filter or hook.

    Any ideas? Many thx!

    1. just realized my prob is with excerpts… still how does the logic work? I’d like to customize that – the “Continue reading –>” portion generated from an excerpt…… thx again. =)

    2. I *think* I got it… at least it works… same steps as above but for:
      remove_filter( ‘get_the_excerpt’, ‘twentyten_custom_excerpt_more’ );
      add_filter (‘get_the_excerpt’, ‘thirtyten_custom_excerpt_more’ );

      AND

      function thirtyten_custom_excerpt_more( $output ) {
      if ( has_excerpt() && ! is_attachment() ) {
      $output .= thirtyten_excerpt_more($more);
      }
      return $output;
      }

      Any pointers?

  15. Great work Aaron. I am just beginning to explore wordpress customization myself. I’ve written a few quick-and-dirty plug-ins and modified a few more.

    So, if I understand correctly, thirty-ten is a global customization of twenty-ten? That’s my understanding of a “child theme”. I want to add it only as one of the templates I can choose when I edit a page, as a page-level template. I want some of my pages to be the original 2-column, some 3 column. I’m not sure how to do that.

    I still have a lot to learn.

    1. What I would encourage you to do is create a child theme that incorporates all of the css from twenty ten along with creating your new page template. Then add some css using the cascade to override the default 2-column setup and uses the 3-column setup you desire. Check out Nathan Rice’s Body Class write up to get an idea of how those work if you don’t already.

  16. I’ve learned a lot form this post (being a newbie).

    I am trying to create a function that will scan a folder for images and automatically add them to the header. (I use a plugin that rotates images.) That would make it easy for me to upload images without touching code.

    I assume I can pass an array to register_default_headers. If so, I am having trouble understanding the form of the array. In your code you have a part that looks like:

    'description' => __( 'Lights by Aaron Hockley', 'thirtyten' )

    PHP complains that there isn’t a function defined for “__”. Looking at output from wp_default_headers, the “description” part of the array simply had one string. So I tried to create a similar array with my function. Here is the non working code:

    function folder_to_register_default_headers($imgFolder){
    $cwd=getcwd();
    $arrImgs=scandir($cwd.$imgFolder);
    foreach($arrImgs as $img){
    if(strpos($img,'.jpg')){
    $parts=pathinfo($img);
    $bname=$parts['filename'];
    $headerArr[]= array ($bname => array (
    'url' => "$pccleah_dir/images/headers/$bname.jpg",
    'thumbnail_url' => "$pccleah_dir/images/headers/$bname-thumbnail.jpg",
    'description' => $bname ));
    }
    }
    return $headerArr;
    }

    $myImages=folder_to_register_default_headers('/images/headers');
    register_default_headers($myImages);

    I know there is more to do and the current code can’t have thumbnails but that’s a problem easily solved when the first part is working.

    1. __ is a WordPress function used for translations. If you are calling a script that isn’t in the domain of wordpress you would get such an error.

      The rest of the question is a bit out of the scope of the free support that I can provide at this time. Hopefully someone else comes around and can give you a hand.

  17. Thanks for sharing this I’ve never worked with child themes before and know I would have fouled it up. I have a few questions.

    Noticed that Twenty Ten has an upgrade if I do that will it effect Thirty Ten?

    If I want to change widths do I edit the Twenty Ten theme itself or child theme?

    Last, do you know any sites teaching about Child Themes (I mean for non code people like myself ;)?

    Thanks again.

  18. Great post! I am currently using a modified version of thirtyten on my website after finally ditching the Rhea theme from the early days of WordPress! (It was the only 3-column theme I liked!). I am using the version with the sidebars on either side of the main content and I want to make the sidebars narrower. How would I go about doing that? In the css I have made them narrower by editing the primary and secondary widths but the middle content column stays the same width.

  19. I’m a little apprehensive to post here since I am a total neophyte. I did, however, stumble upon thirty ten in my search for a blog theme and love it. I’ve been fiddling with it as you can see but would like to know if it is possible to either get rid of the black navigation bar at top or at least change its color. Isn’t there a way to put a home link somewhere else? And couldn’t about be a widget in one of the side bars? I hope these aren’t ridiculous questions. Thanks

  20. Since last night I have made haphazard progress just by trial and error as you can see here: quintessenceblog.com. The only things I still need to do are move up the header and figure out what to do with the navigation for home and about – when I made the nav bar white, home doesn’t show up. Also – perhaps a naive question, but as my blog fills up, does the page just naturally get longer to accommodate?

  21. i have downloaded your thirtyten child theme,i am sorry i didn’t find this line ”
    @import url(‘3c-fixed.css’); ” in style.css. but in your tutorial, you used this line.any tips would be appreciated.

      1. thanks for you tips! but in your new theme version, i want to know how you load the the ’3c-fixed.css’. i can’t find any code to do this in your new version theme.

  22. your theme is great, but I want to customize it even more. For my home I see the three columns with the contents at the center, while the other pages I would like the side bar on the right, how can I do? if you can help me I would be very grateful.
    thanks
    p.s. sorry for my English

    1. Like I recommended above for a similar use case, I would use body classes and some css magic to make this happen. Take a look at the link I posted there to get an idea of how those work if you don’t know.

  23. Fantastic tutorial, very useful, thanks!

    Also your other tutorial about removing all standard headers was very useful!

    Now I am looking to replace the default path.jpg header image with my own. And I have tried to use snippets from your code above, but I cannot find a way to figure it out. So far the path.jpg is gone, but my own image is not added as default image.

    Hopefully you can help me out here!

    Thanks,
    Piet

  24. I really enjoyed the tutorial you wrote here! My only problem is that I can’t seem to get the “Continue Reading” link to override properly. I even tried downloading thirtyten to see how you got it to work, and still can’t seem to make it work. Am I mistaken that the override is supposed to change the text used for the link? Thanks!

  25. Nice tutorial! Really appreciate your sharing your efforts.

    So, why the strict rule (number 1) against creating new template files? I guess, really what I am asking is, can you create a new template file as part of a child theme so that updates to the original theme will not break your child theme (at least not so readily)?

    As a follow-up – if one WERE to create a new template file as part of a child theme, do you have advice on how I can learn to employ the child theme’s version over the original theme’s version?

    Thanks!

    Conrad

    1. It was the rule I provided for this project in order to demonstrate the simplicity of building a child theme. How the template selection process works is that if the file exists in the child theme, that one is used. If not, it goes to the Parent theme. get_template_part adds an additional check that allows you to do things such as loop-author.php like in thirty ten

  26. I am using the theme and love it, but I have one issue. The main column where my posts go is too narrow. Is there a way that I can expand the middle column so that my posts take up more room on the page? If it means making the side columns more narrow thats fine.

    1. You need to adjust the width and margins used for the content, primary and secondary divs. If you use firebug, you should be able to figure out the exact settings that look best to you.

  27. I love this theme!

    I did end up adjusting some of the margins, height and width, as well as made both right side sidebar columns 180 px wide each to make things more symetrical. But since I’m comfortable living in CSS, these changes were minor.

    Thanks for sharing this theme with the world!

  28. Hello,
    thank you for creating such a nice wordpress theme!
    I need help to know how to make text on pages and posts to be justify.
    Which css rule shall I change?
    Cheers,

    Diogo

  29. I was just trying to figure out how to make the original twenty 10 theme into three columns and it appears you have done it! well done and thanks.

    My question is, as I’m not well versed in CSS, how can I moved the menu bar below my header image logo. In the 2010 theme, I have the logo set above and the menu right below it, without any border around the logo/header. Id like to have it set up the exact same way, just with 3 columns.

        1. Sorry, I meant to also add to that last comment…If I want to expand the width of the right and left columns, would I just do that under 3c-fixed.css

  30. I’m having trouble extending your theme.

    My new theme used to extend twentyten and it works if i use the Template: twentyten bit in my style header but if i change this to thirtyten it says:

    The parent theme is missing. Please install the “thirtyten” parent theme.

    Its definitely there because i can activate and use thirtyten, do you have any advice?

  31. Hey Aaron,

    I wanted to adjust a current site based on Twentyten to become a child theme, so I deactivated my current theme and activated the original Twentyten theme again. After that I adjusted my current site’s style.css (now deactivated) to make it a child theme style.css’ file. When activing my new child theme, the whole site turned white (both front-end and back-end). I know this might not be best practice when creating child themes, but do you know what might have happened? And also, at what point is creating a child theme do you recommend?

    Asides, thanks for a good blog!

    /Chris
    Sweden

  32. I currently am using the thirty ten theme, I need to know how to add a widget to the header directly below the header image, in your dirty ten example I believe it adds the widget above the header image, but I need to add the widget directly below the header image, can you please explain to me in detail how to do this, I am a beginner when it comes to this, also I assume I need to use a child theme in order to add the widget to the header, I am already using Thirty Ten so is it possible to use more than one child theme?

      1. I have no idea how to do what you described, is there anyway you can tell me exactly what code I need to put and exactly where to put the code, I really need specific detailed information, I would really appreciate your help, thanks

  33. That I wish I’d discovered this blog before doing what I’ve done! Aaron you’re a hero. But I am stuck on something so basic it’s driving me nuts. I began with a child theme to twenty ten to get what I have here: http://www.safeproductions.co.uk/01wp/news/

    This is a straight translation of an earlier html site to put it onto wordpress for cms purposes. All I am trying to do on this page is to change the default css to have different styling for pages that carry blog posts. So I put the following conditional into the header, and the referenced css file into both the parent and the child folders, tried php links and absolute references and nothing seems to call the posts.css file.

    Here’s lines 37-41 of the revised header.php (I have also tried this both in the parent and the child folders)

    
    
    <link rel="stylesheet" href=""  type="text/css" media="screen" />
    

    Any steer at all would be hugely appreciated.

  34. Hey Aaron, just wanted to let you know that I figured it out on my own, I used your dirty ten or dirty thirty, I am not sure which you prefer to call it, anyway I manipulated the dirty thirty to make the widget below the header instead of above the header, so now I have exactly what I want, anyway all though I ended up doing everything on my own I still wanted to say thanks cause I am using your thirty ten and dirty thirty child themes, if not for these child themes I would not have been able to make my site so thanks

  35. I’m playing with Thirty Ten on a new site but I’d like the main area to be a little wider than standard and therefore a wider header image. Can I change HEADER_IMAGE_WIDTH without breaking Thirty Ten?

  36. Hey Aaron, I have another question, when I post content to my blog I include images, but when I do a search on my blog or look through the archives the images don’t display, I am using Twentyten theme along with your Thirtyten child theme and dirtyten child theme , what do I need to do to make the images appear in search and in archives? I did a google search online and the results I got said to go to the search.php file and look for “the_excerpt()” and change it to “the_content()”, but I don’t see “the_excerpt()” in my search.php file, anyway please let me know what to do so the images display in search and in archives as well, thanks so much

  37. I’m probably missing something real obvious, but I don’t see any of the widgets in the second sidebar. I read your answer above tell someone that a widget has to be added to each sidebar. I tried that and still, nothing. I’ll re-re-re-read your article and maybe it’s their all along, but I could sure use a hint…btw…the columns move as expected but just no content as stated above…thanks in advance Aaron!

  38. Just great
    I did not tried it yet, but reading this was quite inspiring
    Many thanks
    ( extended to all the people who have been posting comments )

  39. 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

    1. 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.

  40. 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?

  41. 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

  42. 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?

  43. 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

  44. 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?

    1. 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 ) );

      1. 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?

  45. 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!

  46. 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 🙂

  47. 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.

  48. 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

  49. 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!

    1. 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.

      1. 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.

  50. 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

  51. 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.

  52. 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?

  53. 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!

  54. 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?

Leave a Reply

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