How-to: Easily create a child-theme for WordPress (using Thesis Theme as an example)

by Paul on July 25, 2011

When it comes to creating a brand new WordPress site often the hardest part is deciding which WordPress theme design to use.

Some themes get many things right, but get some critical items wrong. Others look nice, but run terribly.

When I need to build a WordPress site for a client, or they need to migrate their existing website to WordPress, 99 times out of 100 I’ll opt to build it on the Thesis Framework.

Why?

  1. Customizing a theme framework is far more accessible than with a “normal” WordPress theme.
  2. Frameworks are built with performance and reliability in mind – important when you want a website to perform as expected.
  3. More functionality is built into the framework core reducing the need for some plugins

The theme framework I always use is the Thesis Theme.

I employ the ‘child themes’ functionality built into WordPress to quickly deploy a new client site.

This article will show you exactly how to create child themes for the Thesis Framework.

What is a child theme and is there any advantage with Thesis?

From WordPress Codex:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme

Using child themes offers these 3 (and many more) advantages compared with not. When you use a child theme, you:

  1. …gain protection against future theme upgrades. When you update the core theme you can be confident that if you’re using a child theme, you will have little or no upgrade problems.
  2. …can quickly change your site design without touching the core theme files – no more need for multiple versions of the configuration files for each site variant – just switch your child theme in the WordPress control panel
  3. …can add/remove functionality to the parent theme without ever touching the parent theme files.

I use child themes with Thesis because it reduces development time and testing of new design elements.

I simply duplicate the files of my child theme, add a couple of changes, design and test. All this without ever changing my core Thesis theme files or breaking my working website.

It’s easy! I think this should be standard practice. And here’s how you set it up…

How to: Create a child theme of the Thesis Theme

I will assume you are using Thesis, and if not, you can swap out the ‘thesis’ terms below with the name of the theme you use. Some parts will be Thesis specific and I’ll indicate this when necessary.

Stage 1 – create the Thesis Theme parent folder

(if you’re not using Thesis, adapt these steps necessary)

  1. Download the latest Thesis Theme (requires a license)
  2. Extract the files from the zip to anywhere on your computer.
  3. Rename the extracted folder to: ‘thesis’. Ensure that the files directly beneath the ‘thesis’ folder are the theme files and there isn’t another sub-folder containing them.
  4. Upload this ‘thesis’ folder to your FTP space in the following location: <Wordpress Installation>/wp-content/themes/ This assumes you don’t have this directory already. If you do, just rename your new folder to something like ‘thesis_parent’, But whatever you call it, remember it, for you will need it in a later section.

Stage 2 – create the child theme folder

  1. On your computer, create a new folder and call it: ‘my_thesis_child’ (or whatever you like)
  2. Inside this folder, create a new text file called: style.css (it is critical you call it this name)
  3. Within style.css, create the following content, replacing items contained within <…> with whatever you like (do not include the ‘<‘ or ‘>’)
/*
 Theme Name: <My Thesis Child Theme>
 Theme URI: http://www.theAddressYouCanGetThisTheme.com/
 Description: <Describe your child theme here>
 Author: <Mr. Thesis Child-Theme Maker>
 Author URI: <http://www.MyAmazingWebsite.com/ >
 Template: thesis
 Version: 1.0
 */

The only thing that is critical in this section is:

Template: thesis

In Stage 1 : step 4 above, I suggested you remember the folder name you used in your FTP space. Where I have written ‘thesis’ here, you must provide exactly the same as the folder name you used.

Not doing this correctly = child theme fail

Stage 3 – copy existing Thesis customizations to your child theme

  1. Go back to your FTP space again and navigate to your themes folder once more. Assuming you are on the latest version of Thesis (v1.8.2 at the time of writing) you probably have a theme folder there called ‘thesis_1.82’. Jump into this folder and download the folder called: ‘custom’ to your computer.
  2. Take that download of the custom folder and move it to your new child theme folder you created in Stage 2 – I suggested you called ‘my_thesis_child’, but you have complete creative license to name this folder as you please.

Stage 3b – a few tweaks specific for the Thesis theme

These Thesis tweaks are you brought to you by Kristarella, someone far better than I at Thesis customizations.

  1. Open up the file ‘style.css’ that you created in Stage 2 and add the following line, ensuring that this is the first non-comment line in the file i.e if you’ve already added some styles to this file, make sure this line comes before them.
    @import url(../thesis/style.css);
  2. Within the custom folder (that you downloaded in Stage 3), open up the custom_functions.php in your favourite editor and add the following line at the top of the file (immediately after the 1st <?php )
    require_once (TEMPLATEPATH.'/functions.php');

Stage 4 – upload your new child-of-Thesis theme

  1. Once again head back to the themes folder on your FTP space once more. Copy up the folder called ‘my_thesis_child’. Once this is complete you should have in your themes folder at least 3 folders:
  • your existing theme folder (i.e. the theme you’re currently using on your site)
  • the folder called ‘thesis’ from Stage 1,
  • and the folder called ‘my_thesis_child’ from Stage 4.

Stage 4b – specific changes for Thesis

If you’ve installed the Thesis theme before, these 2 steps shouldn’t be too foreign to you:

  1. Using FTP or however you see fit, under the custom folder in your child theme directory, change permissions for the folder named ‘cache‘ to ‘775
  2. Using FTP, under the custom folder in your child theme directory, change permissions for the file name ‘layout.css‘ to ‘666

Stage 5 – Activate your new Thesis child theme

Assuming I didn’t screw up in my guide, and you didn’t screw up reading it, you should be able to activate your child theme and it will look identical to your existing site.

  1. Go to menu Appearance > Themes under your WordPress admin control panel
  2. Click ‘Activate’ under the theme called ‘My Thesis Child Theme’ (this name is determined by the first field (‘Theme Name’) in the style.css file you created in Stage 2 earlier.

Oops! I did it again! Here are some tips if it doesn’t work as expected

Didn’t work? Just revert back to the original theme you were using and retrace your steps above. Or, check the following:

  • If you’re using W3 Total Cache (or another caching plugin) clear your WordPress cache and empty your browser cache. Refresh.
  • Ensure you followed Stage 3b to the letter. Where you see ‘thesis’ for the CSS section, that’s the name of the folder containing the parent theme in Stage 1, or the ‘Template’ field in Stage 2
  • Try the excellent WordPress plugin from Vladimir Prelovac – Theme Test Drive
  • Comment below and I can maybe help ya out. Or if you spot errors in this post, let me know.

Alternatively, if all this editing CSS/PHP and theme customization is wrecking your head and you’d prefer to be writing content, give Host Like Toast a look and we’ll manage your WordPress website all for you!

Use the form below to join our Developer Channel

Do you need an automated CPanel web hosting backup script? There is that and more in the Developer Channel

{ 4 comments… read them below or add one }

Jodi Henderson October 8, 2011 at 9:17 pm

Thanks for writing this post. I’m in the process of a couple of redesigns and thought I’d check out the idea of a child theme for Thesis. This post was very helpful, as was the Kristarella post you referenced. One thing I haven’t quite understood, though, is how much value there is in developing child themes for Thesis. I thought that for most themes, a child theme was the only way to avoid losing customizations when updates to the parent theme occurred. In Thesis, that risk is eliminated because of custom.css. What am I missing?

Reply

Paul October 8, 2011 at 9:31 pm

Hi Jodi,

Thanks for the comment! You ask a good question.

There are different advantages for each theme for which you create a child theme, and for Thesis, here are the advantages as I see them:

* I can create multiple Thesis child themes on/for the same site without touching the existing production theme. This way I can experiment with new designs much more easily and without uploading a bunch of Thesis files to the server for each theme – they all run off the same parent.
* Without a child theme, when Thesis updates, you have to ensure you retain/reset your folder permissions and copy over your custom.css and custom_functions.php – basically create a duplicate of your theme folder and add your custom files. With a child theme, you just update the parent theme files and you’re sorted.
* I actually use a lot more than the custom.css and custom_functions.php for my sites and ensuring all the links etc. work would be a pain with each upgrade.
* It’s just good practice and gives me peace of mind. I know when Thesis upgrade it’s a simple FTP copy for me and I’m done. This is especially important when I have more than 1 site to update.
* Branding – because I’d develop sites for others, I can brand my child themes a little.
* Tracking changes – when I make significant changes to my child theme, I can up the version number and use it to track my changes – I can’t quite do that as obviously without child themes.

I hope that makes some sense and I’m glad you asked it because I had to think a little about it and question is it worth the effort.

For me it vastly improves my ability to create multiple themes quickly, to track them, and brand them if necessary.

Let me know if you have any more questions or if you run into any problems with this guide!
Cheers! And thanks again for commenting.
Paul.

Reply

Mohd Ilham June 5, 2012 at 12:37 pm

Nice tip bro… I will try it…btw thank for post this

*sorry bad english

Reply

Fred May 2, 2013 at 11:52 pm

Hi Paul – Great post and I realize it’s a few years old already and don’t know if you’re still responding here. I wondered what your though are re: DIY’s post on creating child themes in Thesis since they don’t include the custom folder in the child theme folder?
http://diythemes.com/thesis/rtfm/thesis-child-theme-starter-template/

Thanks,

Fred

Reply

Leave a Comment

Previous post:

Next post: