WordPress Theme Development: Child theme

In this tutorial you will learn to develop your own WordPress child theme. Starting with an existing WordPress theme you’ll learn to develop a theme with its own styling.

A requirement for this tutorial is that you are familiar with WordPress as a user: that you know how to add a post to a blog and that you know how to jump to the dashboard of WordPress and select a(nother) theme. You also have to have basic knowledge of HTML and CSS.

This tutorial is part of a series about WordPress Theme Development. In this first part you will learn how to develop a so-called “child theme”. The other tutorials about WordPress Theme Development can be found here:

WordPress Child Theme Development

A child theme is based on an existing theme. So you do not have to develop the functionality of a theme. With a child theme the focus is on creating a new style for the theme. And as you will soon discover: styling your own WordPress theme is not very difficult. If you are familiar with styling a static web page than you can quickly learn how to style a WordPress theme. In this tutorial I will show you what you need to know about WordPress to style a WordPress child theme. And we will create a child theme based on the existing Twenty Eleven WordPress theme.

Set up locally

When you start creating WordPress themes it’s best to do this in a development set up on your own computer. This way you can try different things, make mistakes (as we all do) and correct them without anybody stumbling upon them.

WordPress theme basics

You’re probably familiar with WordPress themes (how to find, install and use them). Technically themes are a way to separate the design from the WordPress core files.

Any good Content Management System will keep its core files apart so that you don’t ruin the code that makes the system work, and WordPress is no exception. Here, we’re talking about the WordPress core, which is basically everything that isn’t in the ‘wp-content’ folder. In the ‘wp-content’ folder you will find all the themes that you installed as well as any plugins and uploaded files. The WordPress core is forbidden territory: do not change the files outside the ‘wp-content’ folder when you develop a website.

A theme consists of a folder with template files and any other files that may be needed. The only two absolutely necessary template files are ‘style.css’ and ‘index.php’.

Location of themes

Themes are installed in the ‘themes’ folder inside the ‘wp-content’ folder (if you used Bitnami to install WordPress go to the folder that you chose as the location while installing WordPress ( e.g. C:\WPDEV). Then (inside that folder) go to apps -> wordpress -> htdocs -> wp-content -> themes).

Because you need to open the themes folder regularly when developing a theme my advice is to create a shortcut for the themes folder on the desktop of your computer.

Creating a Theme

When you start creating WordPress themes it’s better to start with the creation of so-called Child Themes.

A Child Theme is based on a template (or parent theme). In this tutorial we will use the Twenty Eleven theme as the parent theme for the Child Theme that we will create. In the image below you can see what the Twenty Eleven theme looks like:

Twenty Eleven screenshot

Go to the dashboard and activate the Twenty Eleven theme (Appearance -> Themes -> Manage Themes : look for Twenty Eleven under Available themes and click on ‘Activate’). If Twenty Eleven is not mentioned with the Available themes go to Install Themes and insert ‘twenty eleven’ in the searchbox. Click on ‘search’. The Twenty Eleven theme will show as the first theme under search results. Click on ‘install’.

A theme needs content (posts, etc.). I have created an xml.file (‘dummy.content.wordpress.xml’)with several Lorem Ipsum posts that you can download here and import into your WordPress installation.

After downloading this file go to the WordPress dashboard > Tools > Import. Choose the WordPress importer from the list of importers. Choose the xml.file on your computer and click on ‘Upload file and import’.

When you have activated the Twenty Eleven theme and imported the dummy content go to ‘Visit Site’. You should then see something like this:

The title (‘WordPress Development’) and subtitle (‘Tutorials’) will be different and show the title and subtitle that you inserted during the installation.

Twenty Eleven with dummy content

The header image in Twenty Eleven can be changed (to 1 of 8 images that came pre-installed with Twenty Eleven) by clicking on it (or by going to Dashboard -> Appearance -> Header).

Also you will see the sidebar on the right. For the Child Theme we want our sidebar on the left. This can be done by styling the Child Theme. But here we will make use of one of the features of Twenty Eleven. Go to the Dashboard -> Appearance -> Theme Options. Here you will see 3 default layouts from which you can choose. Change the default layout to ‘Content on right’.

To start creating a Child Theme you only need to do two things (besides the parent theme):

  1. Create a folder for the Child Theme in the Themes folder
  2. Create a ‘style.css’ file in the Child Theme folder

To create the Child Theme folder go to the Themes folder. Create a New Folder and give this folder the name that you want to use for your Child Theme.

Then open a new file in your HTML-editor and insert the following:

Save this file as ‘style.css’ in your child theme folder.

As you can see the first part of the ‘style.css’ file contains a comment section. This part is essential. The ‘style.css’ in WordPress is not only a stylesheet but it’s also the theme’s first file, so to speak. This is the file that WordPress needs to identify the theme.

Without this code on the top of the ‘style.css’, WordPress won’t recognize your theme as a theme, and that in turn means that you won’t be able to activate it.

Without the proper ‘style.css’ a Child Them will not work. At the same time: the only file you really need to create a Child Theme is the ‘style.css’. WordPress will default to the parent theme folder for all other files. If you want to make changes to other files of the parent theme (e.g. the sidebar file) copy them to the Child Theme folder and then change them. WordPress first checks the Child Theme folder for available theme files. If it finds a sidebar file in the Child Theme folder it will use that. If not it will look for the sidebar file in the parent theme folder.

Two lines in the comment section are crucial:

  • The Theme Name must be unique (different from the names of other themes that are installed in the Themes folder)
  • The name behind ‘Template:’ must be the folder name of your parent theme. This tells WordPress that it’s dealing with a Child Theme and that it should turn to the Template (= parent theme) for all the files that are needed to make the theme work.

You also see an import statement in the ‘style.css’ file. If you do not want to use any of the existing styles of the parent theme you can delete this line. Usually though it’s easier to start with an existing style and then add styles that will override the parent theme styles.

In the download file you will find a screenshot image. Copy this png-file to the child theme folder.

You can now activate your child theme (-> Appearance -> Themes).

Because we have not added any new styles yet the activation of your child theme will result in the same look of the home page as when you had the Twenty Eleven theme activated.

Why use a Child Theme?

You might be wondering at this point why you need to use a child theme set up to change the style of the theme. Why not make changes to the ‘style.css’ file in the twentyeleven folder? Actually you could create a new theme this way as well.

The advantage of the child theme approach is that you leave the parent theme or template on which the child theme is based completely intact. When there are updates for the parent theme you can install those without breaking anything. If you created the new theme by changing the ‘style.css’ file in the twentyeleven folder your changes would be lost. And even if you made a backup of this file somewhere as you would need to re-create those changes in the ‘style.css’ file of the parent theme. With the child theme approach you only need to update the parent theme and those changes will work in your child theme but with your styling.

Basically, you create themes that rely on other themes (as templates or parent themes), and that in turn means that you’ll only have to change the things you dislike in the child theme. Changes only go in your child theme, and whenever the original template theme is updated, you can update your parent theme too, knowing that your changes are intact in the child theme. Better yet, your child theme will reap the benefits of the parent template theme update, while otherwise remaining untouched.

Any theme can be the parent of a child theme. The only thing that is really important is that the
theme is located in your wp-content/themes/ folder (because otherwise you can’t use its files), and
that the child theme is in its own folder, just like a regular theme.

Styling the Child Theme

So let’s get our hands dirty and start creating the new theme.

Open the ‘style.css’ file in your child theme folder.

Changing the header image

With the Twenty Eleven theme it’s very easy to change the header image. And we will do that first because we will style the child theme with colors that correspond with those in the header image.

I have included the header image in the download file (that also contains the dummy content).

Header images are situated in a folder named ‘headers’ inside the ‘images’ folder in the theme folder. To really include the new header image into your Child Theme it’s advisable to create such a ‘headers’ folder and store the image there before uploading it.

To upload the header image go to the Dashboard -> Appearance -> Header. Behind ‘Upload Image’ you can choose an image from your computer and click on ‘upload’.  On your screen a new section called ‘Uploaded Images’ will now appear and the image you uploaded will be shown.

To give the header image rounded corners at the top we add this to the stylesheet of the Child Theme:

As you can see we created an asymmetric border at the top-left and top-right of the header image.

rounded border header

Changing the font

Add the following code at the bottom of the ‘style.css’ file to change the font family of the theme:

One thing you need to be aware of when you use Firebug when working with WordPress Child Themes is that it doesn’t correctly report which CSS rules apply and which rules are overridden. If you look at what Firebug reports about the font that we changed in the Child Theme you will see that it reports the font in the Parent Theme as being the active font and the font in our Child Theme stylesheet as being obsolete.

Changing the structure

We will now make a small change to the structure. If you look at the Twenty Eleven theme (Appearance -> Themes : click on Preview below Twenty Eleven) you will see a margin at the top of the page and on both sides. Let’s change this to make the page fill the whole screen on a Desktop screen (and smaller).

Go to the twentyeleven folder and open the ‘styles.css’ file. Scroll down to:

To override this add the following to your child theme ‘style.css’:

Go to Visit Site and check the changes to your theme.

Styling the post meta information

WordPress posts usually show meta information (e.g. date, author, tags, etc.). We will style this with colors that are derived from our custom header image.

header and menu colors

Because meta information consists of links we will also change the color of all (other) links (e.g the post-title) to give them the same color as the meta links.

Changing the post comments link

In the Twenty Eleven theme each post shows the number of comments in the form of a speech bubble. We change the colors for this as well to create style consistency.

Changing the search box

At the moment our theme contains two search boxes. One is situated above the header image and the other one at the top of the sidebar. We will hide the one above the header image and change the color of the search box in the sidebar.

The Sidebar

To align the searchbox with the menu we change its left margin. And to get rid of the bullet before the recent posts list in the sidebar we change the list-style-type:

The Menu

We also change the style of the menu from this:

black and white menu style

to this:

orange gradient menu style

To achieve these changes (and override the styling in the parent theme) add this code to the ‘style.css’ of the Child Theme:

The end result of this tutorial should now look something like this:

In this (first?) experience with the creation of a WordPress theme you will probably have discovered that it’s not complicated at all. In the next tutorial about WordPress Theme Development I will explain the basics about how a WordPress theme is structured. And in the third tutorial about WordPress Theme Development you will learn how to create a WordPress theme from scratch.

Screenshot showing header, orange and gold gradients for menu and search box, red on white posts

Add your comment