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.
- Customizing a theme framework is far more accessible than with a “normal” WordPress theme.
- Frameworks are built with performance and reliability in mind – important when you want a website to perform as expected.
- 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:
- …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.
- …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
- …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)
- Download the latest Thesis Theme (requires a license)
- Extract the files from the zip to anywhere on your computer.
- 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.
- 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
- On your computer, create a new folder and call it: ‘my_thesis_child’ (or whatever you like)
- Inside this folder, create a new text file called:
style.css(it is critical you call it this name)
- 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:
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
- 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.
- 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.
- 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.
- 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 )
Stage 4 – upload your new child-of-Thesis theme
- 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:
- Using FTP or however you see fit, under the custom folder in your child theme directory, change permissions for the folder named ‘
cache‘ to ‘
- Using FTP, under the custom folder in your child theme directory, change permissions for the file name ‘
layout.css‘ to ‘
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.
- Go to menu
Appearance > Themesunder your WordPress admin control panel
- 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!