Child Themes For The Win

Creating A Child Theme

Click here to go back to our child theme setup index.

 

You’ll often hear that the “right way” to customize a WordPress theme is by creating a child theme. The idea is that by placing your customizations in the child theme, when the parent theme is updated, you’ll be able to keep your customizations and easily apply the update to the original one. It’s a great idea, so let’s walk through on how to create one.

 

Install a child theme manually

The best way to install a child theme manually is by following WordPress’s own tutorial on how to set up a child theme.

 

Install a child theme automatically via a plugin

Our first step is to install/activate either the Child Theme Configurator plugin or the One-Click Child Theme plugin on your site. To do that, go to the plugins section of your WordPress control panel and select “Add New.” Search for “Child Theme Configurator” or “One-Click Child Theme” and install the plugin from the list that comes up. For the purpose of this tutorial, we will be using the One-Click Child Theme plugin. However, Child Theme Configurator is kept updated and we suggest using that one.

Once you have the plugin activated, go to the Appearance section in your WordPress control panel. Click on themes and make sure you have the theme activated that you’d like to use. The active theme is the one shown at the top the themes page.

Active Theme

Child Theme OptionsNow click “child theme” from the menu in the Appearance section, or in the list of links under the current theme’s name. Here you can set the options for your child theme. You can give it a name, a description and also enter in your name. These items will be visible when selecting a theme from your themes list in the Appearance section later on.

After you click “create child” you may see an array of items at the top, but don’t worry. Once it’s finished, click on themes and you should see your new child theme as the active one.

 

 

 

 

Child Theme Activated

 

Congratulations! You just created your first child theme.

 

Basic Customization With A Child Theme

Now that you have a child theme created, what can you do with it? First head to the Appearance section and select Edit. This will open up the theme editor. By default, it will open up the current theme’s style.css file.

theme editor

At the top of this file, you’ll see the name you’ve given to your child theme along with the other information you gave the plugin. Below that is this line:

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

That tells our child theme stylesheet to import the parent theme’s stylesheet. That way we can simply override parts of it with new styles in the child. Because of how CSS styles work, styles loaded last override earlier styles.

So, say we wanted to turn take the main content area in one of our themes, like Foxy, and change its width from 620 pixels to 420. We would look through the parent theme’s style.css file until we find the style that controls the width:

#content {
position: relative;
width: 620px;
margin-right: 0;
padding: 0 30px 30px;
float: right;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.84);
}

and copy it and paste it into our child theme’s style.css file. Now since we’re only changing the width, we can delete the other elements–since they’re in the parent theme’s styles, they will remain. All we would need is to add this:

#content {
width: 420px;
}

and save our changes. That will change the appearance like this:

Foxy Full WidthFoxy Half Width

So that’s how you can make some basic CSS changes by using a child theme. In the next article, we’ll talk about how you can modify other files in the parent theme with the child.

10 Comments

Tangeray May 4, 2015

Great post Bill – long time no speak. So far I haven’t been affected by Organized Themes updates as with a template I’m using for another site. Kudos.

Seeing as a child theme overwrites in CSS – is running a child theme much slower?

Reply

    Bill Robbins May 4, 2015

    Hello Robert. Glad you haven’t had any update issues. If you only have a small amount of CSS to override, I would just place it in the custom CSS either in the theme options or in Jetpack’s custom CSS area. If you have more than just a few styles, adding a child theme would be a good idea. You’re less likely to accidentally delete it that way.

    There might be a very slight delay with the first page load because of one more resource to load, but realistically it will be very small. Probably in the tens of milliseconds. But on subsequent page loads, it will be quicker since the actual HTML document will be smaller with the custom CSS out in a separate stylesheet that has already been cached.

    Reply

Tangeray March 2, 2015

Hey Bill – thank you for this article!

Will I be able to use the theme editor to edit the child theme?

Is a child theme basically a backup of of your theme?

Reply

    Bill Robbins March 2, 2015

    Good question. More than a backup, it’s a way to modify a theme’s appearance or functionally in a way that still allows you to update the original theme in he future without losing your customizations. You can use the built in eme editor to make the changes as well. Its main limitation is that it can’t create files or folders which may be necessary depending on what you’d like to change.

    Reply

besta October 29, 2014

Bill-This is extremely helpful. Keep up the good work

Reply

Patty September 9, 2014

Hi Bill. I have been searching the web and hope you can help. I am trying to understand what changes to the default WordPress theme require a child theme so as to not lose changes when the default theme is updated. I activated 2014 WordPress’ default theme. I used the options that came with the default theme to create the header, sidebars, posts, pages, footer, used plugins for facebook page, images in posts etc. If I update the 2014 theme which is currently requested, will I lose all this? Or are only customizations made beyond that allowed via normal 2014 dashboard options lost (such as had I modified 2014 to have the home page blog roll to be summary instead of entire post (current default))? I sincerely appreciate any insight you can provide.

Reply

    Bill Robbins September 9, 2014

    Patty,

    Great question. Those changes should be preserved when you update. The only ones you would lose (and need a child theme to prevent) would be any edits you make to the theme’s files. You would make those by going to the Appearance section in your WordPress dashboard and clicking on edit. Unless you’ve made changes there, you should be fine.

    Bill

    Reply

Stefano March 13, 2014

Hi Bill,
when next article??

cheers
Stefano

Reply

    Bill Robbins March 13, 2014

    I do need to get back to this. Let’s see what I can cook up for next week.

    Reply

Submit your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Promo 1: Get our lifetime membership, all themes*, and updates forever for only 95 USD.
Promo 2: Get a free premium theme when you host with us.
+ +