Tag: child theme

How (and When and Why) to Set Up a Child Theme in WordPress

If you aren’t quite up to creating your own WordPress theme from scratch, but you know some CSS, you can still customize a WordPress theme. The secret is using a child theme.

How

Besides knowing a bit of CSS to customize your theme, you also need to know how to create a folder and add a file to it on your server. You can do this with FTP, or you can sign in to your server and use the control panel to do it.

Pick a Theme

What kind of theme do you want? You might be looking for a responsive design that will work on any device, you might want a certain number of columns or a certain layout. It’s often easy to find something that’s almost what you want. Maybe you don’t like the colors or want different fonts, but it comes close to what you want. That kind of theme is a perfect candidate to customize with a child theme.

Get your almost-perfect theme installed in WordPress and make it the active theme. Now you’re ready to start working on the child theme.

Create up the Child Theme Folder

For the examples, I’m going to assume you picked the WordPress theme twentyeleven. Everything I say about twentyeleven should be changed to reflect the name of the theme you actually use instead.

In your themes directory, create a new folder. If the theme you’re using is twentyeleven, the folder for the child theme would be twentyeleven-child. That’s the theme name, a hyphen, and the word child. Here’s an example of how it might look.

a child theme folder in the directory structure

Add the new Style Rules

The only file that has to be placed in the new child theme folder is a style.css file. Any changes you make to the CSS for the theme will be saved in the style.css file in the child theme folder and will overrule the CSS in the parent theme once you’ve set it all up.

The style.css document you put in the child theme folder must start with specific information. Of course, you change it to match your particular names.


/*
 Theme Name:   Twenty Eleven Child
 Description:  Twenty Eleven Child Theme
 Author:       Jane Doe
 Author URI:   http://example.com
 Template:     twentyeleven
*/

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

/* =Theme customization starts here------------ */

You don’t have to have all that. The only required lines are the Theme Name, the Template, and the ‘@import url’ line. The @import line brings in all the style rules from the parent theme.

Under the line where it says “Theme customization starts here,” put any new style rules you need. The rules you’ll need are things you want to be different from the way they are in the parent theme.

Activate Your Child Theme

Even before you add any CSS rules to the child theme stylesheet, you can activate the theme. Log in to your WordPress site’s dashboard. Go to Administration Panels > Appearance > Themes. You will see your child theme listed there. Click Activate.

When you look at your blog in the browser, it will look exactly like the parent theme, but as you add new rules to the child theme style.css file, you will see your customizations taking shape.

Find the Selectors and Write New Styles

If you see something you want to customize, you need to look for it in the style.css file for the parent theme. Once you’ve found the rule in the parent stylesheet, you know what selectors to use to make changes in the child stylesheet.

For example, on one of my blogs, I didn’t like the way the h3 headings in the parent theme looked. I found the rule for the the h3 headings. In my parent theme, it looked like this:


.entry-content h3,
.comment-content h3 {
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

I didn’t like the size, or the line height, and I didn’t like the uppercase. To overrule that, I used the same selectors, but I put a new rule for those selectors in the style.css file in the child theme folder.


.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-weight:bold;
	line-height: 1.6em;
	text-transform: none;
}

I got bigger, bolder, headings that weren’t all uppercase! Just what I wanted.

More Advanced Customizations

Other parts of your theme can be customized as well. You might want to add something to the header.php file or the functions.php file. This can be done by adding the changed files to the child theme folder. If the parent theme is updated, none of your changes in the child theme folder will be lost. The WordPress Codex has more information to help you to move to the advanced level.

Note that a child theme can only be used when a blog has WordPress installed on its own domain. Child themes won’t work for themes hosted on wordpress.com.

GoDaddy Managed WordPress is built from the ground up for maximum performance, security and ease of use. Click here to experience the difference.

How to Modify a WordPress Stylesheet for a Child Theme

WordPress has many outstanding attributes that have helped to make it the most popular blogging platform in the world and one of these is the parent and child theme format. The introduction of this means that when modifications are made to a WordPress theme, upgrades to newer versions can be made without losing any of the new code. This is a huge bonus for website developers, who in the past, would have to spend hours finding customised code and applying them to upgraded themes.

Modifying a WordPress stylesheet for a child theme is a relatively simple process. The first step is to ensure that the child theme itself has been set up. To do this, you will first of all need to login to your FTP client and look at the WP content directory for the installed WordPress. Once there, enter the “themes” section and you will see a list of the themes available. If, for example, there is a theme there called “holiday” and you wish to create a child for it, you will now need to create a new folder and call it “holiday-child”.

The next step, is to create a valid stylesheet called style.css and put it in the folder. The easiest way to do this is to simply create one using your favourite text editor, save it and then transfer it via the FTP. The new stylesheet should contain the following minimum information.

/*
Theme Name:   my child theme
Theme URI:      http://mysite.com
Description:      This is my child theme I have created
Author:             My Name
Author URI:       http://mysite.com
Template:          parenttheme
Version:            0.1
*/

Although much of the information in the lines above is generic, the one thing that must be altered for the child theme to work is “parenttheme”. In the example we are using, this should read “holiday”. The theme name should also be renamed holiday-child.

Whilst the above stylesheet is valid, what will happen when it is activated is that the site will load without any new formatting, as of course, the stylesheet does not have any actual CSS in it at the moment! Adding the following code would load the parent themes CSS file inside the child theme, thus making the site formatted.

@import url(“../parenttheme/style.css”);

Again, the phrase “parenttheme” would be replaced with “holiday” in the example that we are using.

Once this has been done, it can be uploaded to the site via FTP.

The second step is to then activate the child theme. Having logged into WordPress admin area, you should navigate over to “Appearance>Themes” where you will see that the parent theme is currently active. If everything has worked correctly, you should also be able to see the new child theme listed below. Clicking on “Activate” will send this theme live.

Keen observers, upon checking their website, will notice that there has been no change. The reason for this is because at this stage no actual modifications have been made to the theme. All that has happened is that a child theme has been created.

To make modifications to the child theme, you now only need to edit the style.css file that you originally created in a text editor, and then upload it via FTP again.

The wonderful thing about doing it in this way is that any changes that are made do not impact on the parent theme. This means that if a massive mistake is made, then, the parent theme can simply be reactivated in order to get the site back up and running again. At the same time, if there is a core code update, the child theme will be unaffected. Due to the fact that the site cannot be “damaged” in any way by using child themes, it also provides a great opportunity to experiment with code and develop some web design skills in a safe environment.

Creating a child theme for your WordPress blog takes just a matter of minutes, and after that, editing the child theme is, to use a pun, child’s play itself. In no time at all, you will be able to create unique looking sites that when built upon a good parent theme, will rival any commercially available themes for none of the cost.

Guest author Richard McMunn is founder of How2become.com, the UK’s leading training and recruitment website for public sector careers.  You can also find How2become on Facebook.