Add a Child Theme for an Elegant Theme in WordPress

elegantsquareGenesis had me spoiled. The Genesis themes that I’ve been using ARE child themes and therefore, only the Genesis theme itself has updates that I must install. When I started using Elegant Themes (which I love, by the way), I forgot that they might have updates. So, I forgot to make a child theme when I used them.

The good news is that Elegant Themes won’t let me update automatically and overwrite my theme. The bad news is that Elegant Themes won’t let me update automatically. I have to download and install it manually. A small price to pay since I would probably forget and overwrite my changes if they had an automatic update option.

I am beginning to get in the habit of making a child theme when I use one of the Elegant themes. It’s really easy if I start when I first start using the template. It’s more difficult if I’ve already changed the theme, because I have to compare each file that I might have changed to see if I actually did make changes and what they might have been. I use FileMerge that comes with my Mac to compare the files.

Comparing the CSS files I can copy over only the css lines that I changed. I don’t have to copy the whole file since the style sheets are cascading. I do, however, need to import the style sheet from the parent theme so that it’s not overridden by the child theme style sheet. PHP files that were changed need to be copied over in their entirety. Then, after I’ve successfully created my child theme I can overwrite the old theme with the updated Elegant theme.

When I do it the way it should be done from the start, I install my Elegant theme and then make another folder in the /wp-content/themes folder with my child theme name like this:

//
/wp-content
  /themes
    /nova
    /nova-child
//

The only file that really has to be in the new child theme folder is the style.css file. It needs to look something like this:

//
/*
Theme Name:     Nova Child
Author:         Cindy Cullen
Template:       Nova
*/

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

The ‘Template: Nova‘ is the line that tells WordPress that you have a child theme and it includes it on your themes page so that it can be activated. The ‘@import url("../Nova/style.css");‘ brings the Elegant themes style sheet in so that you aren’t losing those styles. Your new css changes will go after that line.

Any other php or code files will need to be copied from the Elegant theme into your child theme, then change the code in the file in your child theme.

Now, when Elegant themes makes an update to your theme, you can just overwrite their original theme on your site without worrying about losing any of your changes or modifications. You will, however, need to check any files that you have made changes to to make sure that they didn’t make any changes in the update that you may want to now use in your site.

Leave a Reply

Your email address will not be published. Required fields are marked *