- Advertisement -
VPS House Servers
VPS House Servers
VPS House Servers

WordPress attracts tons of bloggers that want to handle things on their own. You gain full control, and there is nothing that you couldn’t adjust with a few lines of PHP, CSS, or HTML. On top of that, there are hundreds of small functions regarding the extension of the CMS available on the web. The world of WordPress could be so beautiful if it weren’t for the theme updates. With child themes, these become a lot less scary.


Do you know this problem? You install a theme, adjust it to meet your desires, and you’re satisfied and happy.

But then, the next theme update comes around, and all of your changes are gone.

To prevent this from happening to you, this article will teach you how to create and use a child theme.

What’s a Child Theme and What do I Need it For?

Basically, a child theme is the child of a full-fledged, regular theme. It uses the files of the parent theme for display. This includes all template files, the style sheet for the design, the JavaScripts – everything. That’s why both themes have to be in the theme folder wp-content/themes at all times.

All Changes Remain, Even After an Update

A fresh set-up child theme looks exactly like its “parent” theme. This is the starting point for every customization of your design. Here, you can make any change you want, without any dangers, and these changes will remain even after an update of the original theme. That’s the big advantage.

Every WordPress theme that is capable of receiving updates should only be used with a child theme. It’s very simple, and in today’s article, we’ll teach you all the few pitfalls that can come up.

The Preparation for Creating a Child Theme

To create a child design, you need an FTP program, as well as an HTML editor. You can get both for free. To work with the FTP program, you’ll also need the FTP access information for your web host. Your host will provide this information.

  • I can recommend the FTP program “FileZilla” as it’s feature-rich, and free for both Windows, and Mac.
  • The HTML editor I’d recommend is the program “Brackets“. It’s free as well, and due to its many expansions, it can be tailored to your needs.

Creating and Using Child Themes

- Advertisement -
VPS House Cloud Servers
VPS House Cloud Servers
VPS House Cloud Servers

I’ll use WordPress’ popular Twenty Fifteen Standard Theme as an example for the creation of a child theme. You’ll learn to create a child design, use an own stylesheet for the CSS, and to adjust theme files. I will also introduce you to all tripping stones that may come up when working with child layouts.

1 – The Creation and Activation of a Basic Child Theme

A child theme only requires three things: the index to the parent theme, a style.css file, and a functions.php.

First, create a folder on your desktop, and name it “twentyfifteen-child”. Next, please create an empty file named style.css using the HTML editor. Enter the following into the CSS file:

  • The name of your theme
  • The description that states that it’s a child theme of the Twenty Fifteen Theme
  • Under Template, you’ll find the “address” that your theme needs in order to be able to display the template files. It’s the name of the parent theme’s theme folder. When creating a child theme for another theme, of course the folder name of your theme has to be included. So, if you need a child theme for the popular “Hueman” theme, this will say “hueman”.
  • Under Text Domain, your child theme finds the translation files, so that the theme will continue to be displayed in the language you chose.

Next, set up an empty file called functions.php. The following has to go into this file:

Optional: Create a Preview Image For Your Theme

Each theme has a screenshot, so it is easy to tell apart from the other themes in the dashboard. All you have to do for that is to set up a preview image with the name screenshot.png. This graphic goes into the folder of the child theme. There, it has to be placed within the main index, not into a separate folder.

The recommended size is 880 x 660 pixels. However, it will be displayed in 387 x 290 pixels. The large file size allows the screenshot to be displayed well on retina screens. You may also use other image formats like JPG, or GIF, but PNG is recommended. I have created the following preview image for the child theme:

Feel free to download and use it.

2 – Activating the Child Theme

Now, upload the folder twentyfifteen-child into the theme index (wp-content/themes) of your WordPress, and activate your new child theme under “Design => Themes”.

Now, the child theme is active. Thanks to the new screenshot, it is very easy to find within your theme index. Of course, there have not been any changes made to the design yet, so your adjustments will have to follow.

3 – Customizing Child Themes – CSS

Now, write all adjustments into your child theme’s style.css. A few very simple adjustments would be changing the background color, the color, size, and font of the header, and so on. With just a few lines of CSS, we’ve already changed the theme’s design entirely:

4 – Working With Template Files

Your new theme is fully customizable, you can also use your own templates, or revise the files of the parent theme. WordPress checks the child theme folder for template files first. If there are none, the files from the parent theme will be used.

This means, that a file header.php in the child theme folder is being used, instead of the file in the parent theme. If you want to change the display of a specific file, simply copy it from the parent theme into your child. Now you are able to either change the entire display, or add certain elements only.

Two Examples: Changing Post Images and Static Share Buttons

Example 1: Reversing the Display of the Post Images

Copy the file content.php from your parent into the child folder. The original code of the file in the lines 14 to 27 looks as follows:

For the fun of it, let’s reverse the code, and insert the post image under the header.

Of course, our CSS needs some adjustments, so that the final result looks superb.

Screenshot of the Final Result:

Example 2: Adding Static Share Buttons

This task is also done using the content.php file. You don’t have to place another file in the child folder.

Part 1: The Snippet for the functions.php

The buttons need two functions. Number one creates the buttons, and number two adds the required icon font “Font Awesome” to your header.

Part 2: The CSS

For the buttons to be displayed correctly, we need a bit of CSS. Depending on the theme, the width of the single buttons in line nine may need to be adjusted. I have already done that for our Twenty Fifteen child.

Part 3: The Correct Placement in content.php

The correct position is still within the DIV .entry-content, right above the closing /div tag.

The Final Result of Our Efforts:

We get these beautifully formatted share buttons with icons for Facebook, Twitter, Google+, the Facebook page, and a button that activates the browser’s print function.

5 – Now, Let’s Get Serious. Including Files

One of the pitfalls when working with child themes. Many clueless beginners fail this seemingly simple task, because the snippets from the web are always meant for independent themes. That’s why they can’t work.

If you want, or have to include a file, the internet will give you the following code:

This small tag tries to load a file from the parent theme. That’s where the child theme’s templates are located. As we overwrite the parent theme’s stylesheet with ours, the following tag has to be used instead:

The tag above searches for the needed file from the child folder. Thus, always use the get_stylesheet_directory() variant, and you’ll get the desired result.

Check every snippet from the internet, to see if it has been modified for this small difference.

6 – Adding Widget Areas

Additional widget areas are possible without any problems. For example, we could create an area that wasn’t meant to contain widgets – the footer. Add the following code to the functions.php of your child theme:

Afterward, copy the footer.php from the “Twenty Fifteen” theme folder into your theme folder, and add this small code in beforehand:

At this point in the footer.php the code seems to be in good hands:

The Final Result:


The Creation of a Child Theme From an Existing, Modified Theme

It is so much easier to create a child theme from scratch. However, if you have already modified your theme a lot, without having a child theme set up in advance, it’s still possible. You have to transfer all changes into the child theme to make sure that any updates to the parent theme don’t delete any changes.

Read the following steps, and follow them precisely. This is complicated, and hard work with a lot of fiddling.

First, make a backup of your theme. To do so, use your FTP access, and copy the theme folder to your desktop. Then, create a backup of that folder, and save it somewhere else. You’ll use one of the folders to work, while the other one serves as a backup, if everything goes wrong.

Now, create a child theme, following the guide above. A folder, an empty stylesheet, an empty functions.php, and a screenshot.

Get yourself a fresh version of your theme that has not been modified.

Divide your HTML in the center, so that you can display the original file on the left, and the one from the modifed theme on the right. Check every template file to see if you made changes.

Transfer all modifications from the functions.php into the version of your child theme.

The altered files belong into the child theme folder. Also check if you have to swap out get_template_directory() for get_stylesheet_directory(). Further information above.

Now for the part that really is a bit tricky. You have to compare the fresh Style.css function with the file you altered. Maybe your HTML editor has a function that lets you compare the two files, pointing out the differences. That would be helpful. I have never needed this type of function. If it is not available to you, you will have to use your own eyes to compare the files. All changes go into an own style.css file. After that, place it into the child theme folder equipped with all modifications.

When you feel like you have put all altered theme files, and the extended CSS into the child theme folder, load the folder into your theme index wp-content/themes. Make sure that the fresh version of your theme is in there as well.

Log into your WordPress, and make your way to the themes. Use the live preview to check your newly created child theme. If everything is displayed correctly, you’re good. If not, check in which areas you may have overlooked something.

Revise the missing elements.

Then, check the entire website, and all necessary functions again, using the live preview. If everything is fine, activate your child theme, and enjoy it.

Never do this shit again:-)


Conclusion

Now, you’ve gotten to know pretty much all important aspects of creating a child theme, and you also know why you should always use one. As always, you’ll have to look up all other difficulties you may face on Google. Sadly, it’s practically impossible to cover everything in one article, as there are so many problems that can come up during the development of a child theme.

- Advertisement -

There are no comments yet

  • Hello, guest