WordPress Tip: Stop Editing TwentyTen Theme. Use a Child Theme!

NOTE: While this tip is written 2010 specific, the concepts here apply to ALL themes, let’s read on!

OK, it’s time for another little WordPress tip.  This one won’t be full of all sorts of code or anything.  Just some general guidance, from me to you!  Stop, I repeat STOP editing the twentyten theme.  You know, the one that ships with WordPress.  All kinds of people use it.  And I have repeated myself about 30 times on the forums this week.  Once and for all, stop editing this theme.  Your changes are not safe, and will be LOST!  Let’s discuss your options, they are so easy!

So why aren’t your changes to twentyten safe?  WordPress needs a default theme.  It needs one to work, and it needs one to fall back to if you make a mistake on your own theme.  That’s right, if you wreck your site because of some problem with a theme, you can delete the problem theme and automatically revert to twentyten.  Since WordPress relies on having twentyten available, that theme is considered ‘core’.  When you upgrade WordPress, all core files are replaced.  It’s why nobody recommends ever editing WordPress core files.  But this rule applies to the twentyten theme as well.  So the basic thing to remember here is: If you edit the twentyten theme, all your edits will be lost at some point.

Now for your options.  You basically have 2.  The simpler copy and rename method, or the Child Theme method.  I recommend the child theme method, as do most other WordPress folks I know.  But I’ll discuss both.  You can also do these things with any other theme to keep your changes safe from a theme upgrade.  That’s another thing to consider, themes other than twentyten do NOT get replaced during a WordPress update.  But many theme authors put out updates to their themes.  They fix things, or add cool new features.  If you have directly edited their theme, you will lose your changes on a theme upgrade. 

Option #1, simple copy and rename.  It’s just like it sounds!  Download the theme you are using to your computer.  Unzip it.  On a Windows machine that’s a right click and unarchive.  There are many ways to unzip an archive.  If you are unfamiliar with it, Google is your friend.  Now once unzipped you will have a folder.  Rename the folder to whatever you want to call your new theme.  That’s right, these simple steps are basically creating a new theme!  After renaming the folder, open it up and find style.css.  Open that with a plain text editor.  Wordpad will work fine.  Just right click, open with wordpad.  You will see at the top of the file, a header which looks like this:

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
Author: the WordPress team
Version: 1.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
*/

The only thing you really need to change here is the theme name.  You are welcome to change the other things too, but you must change the theme name.  That’s it!  Once you have done this, save the style.css and close it.  Now you can rezip the newly renamed folder containing the theme.  Again, usually a right click, send to->compress(zip)folder on a Windows machine, but Google if you need to learn.

Once you have zipped up the newly renamed and slightly edited theme, you install it just like any other theme.  Done!  Now it’s an exact copy of twentyten (or whatever other theme) but since its renamed it is safe from upgrades, edit it all you like.  You can also do all this using ftp or a file manager if you prefer.  Just by copying the existing twentyten theme and making the edits online.  Also, after doing this, never delete the twentyten theme.  It’s very important it stay online.

OK, that’s the simple copy and rename method.  Let’s look at the Child Theme method.  I’m going to attach the most basic examples of a child theme for twentyten just for example here.  We’ll discuss what’s up with it.  But if you were to install this theme right now, your site would be running Voodoo Child theme, but it would look identical to twentyten.  You can create your own now, or use mine.  It’s just the most basic jumping off point.  This is so simple it’s crazy!  So let’s make this theme!

First, just make a new folder on your desktop and name it what you like, I called mine voodoochild (its best to keep the folder name lowercase, all one word).  Next you want to make a plain text document, using any plain text editor.  I use wordpad since my options are limited at work, where I usually create my files.  In that document you want to put this:

/*
Theme Name: Voodoo Child
Theme URI: http: www.rvoodoo.com/projects/wordpress/wordpress-tip-stop-editing-twentyten-theme-use-a-child-theme
Description: Child theme for the Twenty Ten theme
Author: Rev. Voodoo
Author URI: http: //www.rvoodoo.com
Template: twentyten
Version: 0.1.0
*/

@import url("../twentyten/style.css");

 And that is it!  Obviously you would want to change up any of those details to match your preferences.  The only line you wouldn’t change is Template: twentyten.  That is telling WordPress that this is a child theme to twentyten.  Now you can save this file.  Quick note again.  This is important, it has to be saved as style.css, you have to be careful in windows or you’ll get style.css.txt.  Go to Save As in the file.  At the bottom where it says ‘Save as Type’ change it to all files.  then name it style.css and save it. 

You now have your style.css file in a folder.  Just zip it up and install it!  Bam, instant child theme!  You are free as a bird!  Oh wait, you don’t know how to use it?  OK let’s talk some more.  We’ll start with basic css edits.

First, this line here:

@import url("../twentyten/style.css");  

What is it?  What does it do?  That tells your child theme to go grab all the css from twentyten and use it.  Once again you have options.  You can leave that line there, and add your own rules.  CSS that you add to the style.css in your child theme under that line will take precedence over twentyten’s css.  So you can just add your changes under there and be done.  But what if you have a tonne of edits you want to make?  Easy.  Just delete that line.  And instead copy all of the css from twentyten, and paste it into your style.css.  Just the actual css, not that header.  You need to keep your header in place.  Now you can freely edit the css as you wish.

So you can either import twentyten’s css and just add your own rules, or paste all of twentyten’s css into your file and edit it.  Got that?

So what’s next?  What if you want to alter the loop?  Or change the single.php layout?  It’s all very easy.  Just grab the file you want to edit, put it into your child theme and edit it!  You can do this with any file.  Basically with your child theme, WordPress checks your theme first for any templates.  If they are there, WordPress uses them.  If not, WordPress runs over to twentyten and uses it’s version.

The exception to this rule is style.css which we have already talked about working with, and functions.php.  Style.css is only loaded from your child theme.  Unless you have that import rule in place.  Functions.php is a bit different.  BOTH are loaded.  So twentyten’s gets loaded, and yours gets loaded.  This means you can’t just copy twentyten’s functions.php over and edit it.  You have to take special care.  You can just add your own custom functions into your child functions.php and they will work.  But to edit a function in twentyten’s functions.php you may need to unregister the function first and register your own.  I won’t get into this so much here, you can read more on the codex.

And then of course you can add files to your child theme which don’t even exist in the parent and they will be used.  Special templates like loop-index.php or taxonomy-product.php or custom page templates, etc.  These are all beyond the scope of this tutorial though.

So there you have it.  A very basic guide to why you need child themes.  And why you need to never touch the twentyten theme ever again!

UPDATE: For lots of great tips on working with a twentyten child theme, check out my new site, VoodooPress. It’s my WordPress help site, the current series of articles deals with all the ins and outs of child themes. Since I’m making one for the first time, each time I finish something I post about it!

css.php
%d bloggers like this: