WordPress Child Themes – They Are Easier Than You Think!

Home / Non-SEO / WordPress Child Themes – They Are Easier Than You Think!

On my list for 2012 was to get a better idea of how CSS and themes for WordPress work.

In particular, I was interested in how child themes work, and interact with a website.  In this article I explain what a child theme is and just how easy it is to create your own fully customized child theme.

What is a Child Theme?

As one would expect, a “child” theme is a theme for a website that inherits some or all of its attributes from a “parent” theme.

The parent theme, in the case of WordPress, is the theme you use to display your website now.

For example, on this site we use a theme called “Responsive” and we also have a child them which takes from elements of the responsive theme while allowing us to customize other elements, such as the style, header of the site pages and footer.

You see, a child theme isn’t just limited to the styling, but also other elements of the HTML output.

For example, if you don’t like the way your current theme organizes the tags inside your <HEAD> tag, you can modify the theme’s header file and save it in your child theme folder.  Then, when your site is displayed, it uses the header.php file you have customized for your child theme.

Why Use a Child Theme?

There are many reasons.  The most obvious reason for using a child theme is so that you can customize your site and keep those customizations when the parent theme needs updating.

Normally one could simply edit the theme you installed, however when there is an update available for that theme it would reset itself to the “default” settings, wiping out any customizations you have made for it.

Using a child theme allows you to keep your customizations as well as update the parent theme as needed.

Plus you can do other things with a WordPress child theme, such as add admin functionality, as well as edit any template without affecting the parent.  Basically it gives you more control over your WordPress site without affecting the basic functionality of it.

How do You Use a Child Theme?

A basic child theme is quite easy.  It involves creating a new subfolder in your themes main folder (usually found under /wp-content/themes/).  In that folder you need at least a style.css file.  If you want to customize more than just the appearance (colors, font sizes and colors, etc.) of your site, you will also need the files you customize (such as header.php if you change the header file, footer.php for the footer and so on).

What is Required in the Child Theme CSS?

There are some required elements to be entered into the child theme’s CSS file in order for it to work properly.  The following example shows what needs to reside at the top of your child theme’s CSS file.

Remember that the CSS file can be edited in any text editor such as Notepad.   I don’t recommend using a document editor such as Microsoft Word as they tend to add extra “invisible” code that will affect the rendering of your CSS.  Use Notepad or some other basic text editor.

The code to add to the top of your file is:

/*
Theme Name:     My Child Theme
Theme URI:      http://example.com/
Description:    Child theme for the PARENT theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       parentthemename
Version:        0.1.0
*/

Here’s what each line means:

  • Theme Name. (required) Child theme name.
  • Theme URI. (optional) Child theme webpage.  This can be the URL of your website.
  • Description. (optional) What this theme is.
  • Author URI. (optional) Author webpage.  Again, could be your website URL
  • Author. (optional) Author name.
  • Template. (requireddirectory name of parent theme, case-sensitive.
    • NOTE. You have to switch to a different theme and back to the child theme when you modify this line.

A child theme on its own will effectively overwrite the parent theme files.  So any styles loaded by the parent theme will not be loaded UNLESS you import the parent theme CSS into the child them CSS.

To import the parent CSS simply add the following line below the text listed above:

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

Where “parentthemename” is the name of the folder containing the parent theme.   This tells WordPress to also load the style information from the parent theme.  IMPORTANT:  There cannot be any style associated information above this line.  Otherwise the parent theme will not be imported.  It MUST be immediately below the theme information block found at the top of the file.

Your basic child theme CSS should be starting to take shape. It should now look like this at the top:

/*
Theme Name:     My Child Theme
Theme URI:      http://example.com/
Description:    Child theme for the PARENT theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       parentthemename
Version:        0.1.0
*/


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

Once you have imported the parent theme, you can begin customizing it by adding or editing the information you want from the parent CSS.

Step-by-step for Creating a Customized Child Theme

Now that I’ve explained the basics of what a child theme is, and how to implement it, let me show you an example of how to create it.

I have found that there are many themes that not only support child themes but also have an area to enter “custom css” somewhere in the theme options.

So what I have done is used this area to make the tweaks I want.  For example, as I said the theme we use for this site is called “Responsive” but it came with black navigation and a different header image than my own.  There were also a few other style elements we didn’t like from the stock Responsive theme.

I found the CSS entries responsible for controlling the site navigation’s appearance and copied them to the custom CSS area of the theme options.  I then used a graphics editor program to get the hex code of the colors I wanted to use for the navigation and replaced them in the custom CSS area.  This allowed me to change the display of the navigation in real-time without having to recode the entire CSS stylesheet.

Once I was satisfied with the colors and fonts I wanted to change I copied the entire custom CSS block into my text editor, added the bit at the top of the file for the theme name, author URI, template etc and added the import line to import the parent theme.

I then created a folder on my computer and named it to the name of my child theme and saved the CSS as style.css.  I then uploaded the folder with the style.css to the themes subfolder in wordpress.

Once uploaded I logged into the wordpress admin area.  Voila, my child theme now appears in the themes section.

I simply chose the new child theme, activated it and now my site is running the child theme with the parent “filling in the blanks” (because of the @import line) of the style elements I didn’t change.

Changing Other Elements

I also found that the footer contained elements I didn’t want, and other elements that I did.

So I copied the footer.php file from the parent them into the child theme.  It was then available for me to edit within the wordpress editor.

Once edited and saved, the new footer from the child theme replaced the old footer from the parent.

As an aside, I have found this method also helped me practice my PHP skills.  While I’m not “master coder” I am not able to more easily identify the blocks of php code responsible for displaying different areas of the site and modify as needed.

And the best part of all this is if you make a mistake you can always remove the broken file or replace it from the parent and start over again!

What’s Next?

Now that you have successfully created a child theme the sky is the limit!  Feel free to copy the other templates from the parent and edit as needed.

And of course, when it comes time to update the parent you can do it now without losing your customizations!

Really, child themes are the way to go if you are like me and don’t have the time, knowledge or budget to invest in a completely custom WordPress theme.

If you want to spend a little time to experiment on what looks good to you why not create a child theme (if the theme you are using supports it) to see what your site truly could look like?

Related Posts