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:
- 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.
- No output buffers This means I can’t use an output buffer and then regular expressions to get around rule number one.
- 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 ' … <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
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?
I created a quick example I call Dirty Ten that shows how you can use output buffers to add a widget area to the header.
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.
Unfortunately as far as I know you can’t have the default images auto resized.
This post has been very helpful either way, so thanks for your reply.
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.
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.
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.
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.
Hello Aaron,
I was wondering if you had any thoughts on how to make Twenty-Ten’s header full width.
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.
Thanks that does help. I am still not quite 100% where I want to be yet.
What I am trying to accomplish is a white stripe like the one on the top of wordcamp.tv
http://wordpress.tv/category/wordcamptv/
Thanks.
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.
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!
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.
Thanks! I’m glad you found this and my presentation useful.
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.
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.
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.
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
I’m glad you came across this and found it helpful.
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.
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.
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?
So here’s the question. Is there an advantage to having twentyten as a parent them over thematic?
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.
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?
Thirty Ten actually requires the files from twenty ten in order to function. Check out the codex to learn a bit more about child themes: http://codex.wordpress.org/Child_Themes
Thanks so much! I love Thirty Ten. It’ s exactly what I was looking for, is so easy to use, and is awesome!
Thanks! I’m glad you like it.
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
Hi Jim and welcome to the world of WordPress. You should check out the Template Hierarchy page in the codex. Also the get_template_part is a function that will come in handy. It allows you to have different loops for different parts of the site. I hope that helps.
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
Nevermind. I restored the theme function file through my file manager and it’s back up and running now.
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.
I just wrote a quick post on how to do this. Check it out http://aaron.jorb.in/blog/2010/07/remove-all-default-header-images-in-a-twenty-ten-child-theme/ for the code you’re looking for.
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/
I’m going to try and have a new version out this weekend fixing this. I’ve opened a bug report at http://code.google.com/p/thirtyten/issues/detail?id=2 for it. Thanks.
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!
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. =)
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?
After the beta (when I wrote this) and before the final release some changes were made to how Twenty Ten does the excerpt changes. I’ll update this when I get a chance to (and opened a ticket to remind myself at http://code.google.com/p/thirtyten/issues/detail?id=1 ) Thanks.
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.
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.
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.
__ 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.
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.
I hope to have an upgrade out next week too fix a few bugs and insure it is fully 1.1 compliant.
http://codex.wordpress.org/Child_Themes is a good place to learn about child themes
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.
Glad you found it usefull. For your goal, I would take a look with firebug and you should be able to figure out which div you need to increase the width of.
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
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?
Hi. Thanks for your guide. I have now set my theme up successfully at http://www.warriormovie.co.uk and it looks great!
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.
That line was removed in version 1. 1 to give users the option of 3 different layouts. If you need the original code, it is available at http://code.google.com/p/thirtyten/source/browse/?r=version-1, but I would encourage you to use the later versions as it contains more information.
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.
Take a look at the options.php file. thirtyten_add_layout_css controls the enqueueing of the stylesheet.
Pingback: Bloviate - Blogs@Baruch, now with BuddyPress!
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
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.
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
If you need support for your own theme, I’d suggest the WordPress support Forums or the IRC channel.
Pingback: WordPress Tip: Replace Default Header Image Twenty Ten Theme | WP TIPS
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!
What you’re most likely looking for is the filter that deals with posts divided up by
tags, which isn’t the same thing as the one that is used for excerpts. Take a look at Personalized Read More to get an idea of how to change that text.
Why is that the column on the right no widgets coming?
Thanks for this theme
You need to make sure you have added widgets to both the Primary and Secondary Widget areas.
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
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
Thanks for this great tutorial. What’s the usage of the secondary widget area? I don’t see it any different from the primary..
By default: not much. By moving them around, they become very usefull.
Pingback: Include Custom Headers in Twenty Ten Child Theme | Zeaks Blog
Pingback: Twenty Ten Child Themes | Zeaks Blog
Pingback: A quick intro to Github for WordPressers | Mettaprogramming
Pingback: ‘Read more’ in Twenty Ten Child Theme | TransformationPowerTools | for personal growth and transformation
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.
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.
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!
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
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.
Remove the section marked
/* Move menu to be above image */from the style sheet.awesome! thanks, probably should have figured that one out.
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
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?
Child themes can not have a child theme as it’s parent. There are no grand-child themes.
Thanks. I never knew that.
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
The most likely cause is a php error in your themes functions.php file. Check your error logs and you should be able to find the cause.
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?
I would suggest either moving a sidebar with css or overriding header.php in your child theme to add it directly.
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
Unfortunately I can’t offer that kind of free support. You may want to contact some of the consultants listed on http://codepoet.com/ for paid support.
Hey Aaron, do you do paid support? Do you accept Paypal?
No, not at this time.
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)
Any steer at all would be hugely appreciated.
Why don’t you pastebin your code and link it. It might be best to post on the WordPress Forums with it though.
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
Pingback: Twenty Ten: Free Wordpress Theme (and Related Articles) | READMORE.CE.MS
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?
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
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!
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 )