Using A Child-Theme In WordPress

Using child themes in WordPress will ensure our own theme adjustments save when updating themes. Learn how you can successfully create a child theme in WordPress.

Each time we update the theme in WordPress, it will revert back to the default CSS. This means any custom adjustments we made to the style sheet will be overwritten. WordPress offers a workaround for saving your personal theme adjustments.

Instead of trying to re-configure our style sheet every time an update occurs, we can create something called a child theme. A child theme works under the main theme and will act as a cover. The child theme is where our customized style sheet will reside. Even after updating the theme, our customized style sheet will remain the same. This may sound confusing but it really isn’t once you see how it works. Here’s a short video and tutorial below.

 

 

First you need to find your theme’s main style sheet. In WordPress, go to Appearance > Editor. If you find the style.css file go ahead and select all then copy it.

 


 

Or

 

In your FTP client, find your theme directory (/wp-content/themes/). Go into the theme directory and find the style.css file. Open the file and copy the contents.

 


 

Now that we have the style sheet copied, let’s paste it into a new document. I prefer using Notepad++ for all my edits. Once we paste in the style sheet contents, we’ll need to edit a couple of things at the top. Here’s what you should keep.

 

Author: (Your name or website)
Theme Name: (Exact name of theme + “child”)
Description: (Child theme of ____)
Version: (Current version of theme)
Template: (The directory name of your current theme)

 

Here’s an example of my child theme settings.

 

Child Theme Edit

 

Next, the link from the main style sheet must be imported. Here’s an example.

 

@import url(“http://www.gripptopia.com/wp-content/themes/mantra/style.css”);

 

Theme Import

 

Save this as a CSS file – naming it stylesheet. Now we need to set up a new directory in our theme directory. Name this [theme name]-child, like so.

 

Duplicate File

 

Now, throw the style sheet into this directory. In WordPress, go to Appearance > Themes. The newly created child theme is ready to activate. Once activated, the child theme is now in control. As you can see, the settings we put in at the top of the style sheet show up in this section. That’s why it’s important to have these settings.

 

Child Theme Settings

 

That’s all it takes. You are now using a child theme. When you want to edit your style sheet, make sure you edit the child theme. One last thing to note – when activating the child theme, I noticed that it will reset menus. Go to Appearance > Menus to edit the menus.