Technical Marketing Guide

A travel guide for technical marketing – get inspired and start exploring yourself.

WordPress Child-Themes

So you’ve just (bought and) installed a theme. After a while you will eventually run into a situation where you have to – or want to – change some code of the theme. A very common and basic change would be that you’ll want to activate Google Analytics (Free Web Analytics) on your site.

I explain Installing Google Analytics another time, for now you just have to know that you’ll have to change a bit of themes code to make such tools work.

Normally you would take the code that Google Analytics (or any other service) provides and put it where the instructions tell you to.

But hold on changing your themes code might actually prevent future updates of the theme and thus make you less willing to keep wordpress up to date – this in turn will make you vulnerable to possible attacks on the site because you will be on a old, insecure version of wordpress.

Child-Themes to the rescue

WordPress has a great functionality where you can promote your main theme to a kind of „Parent-Theme“. This „Parent-Theme“ can then in turn be overwritten by a so called „Child-Theme“ that you create. The child-theme can be totally empty – then all the settings / code of the parent-theme is being run.

Or as wordpress.com puts it:

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Creating a child-theme

The most basic child-theme just consists of one style.css and a functions.php file. Just create a folder in the themes folder of your wordpress installation and name it whatever you want. In that folder create an empty style.css and functions.php (more on that one later) file.

Open the style.css file and place the following text and adjust it to your liking. Every line other than „Template“ is totally up to you. The Text Domain should be web-safe though (No spaces, special characters)

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

The important part is the line:

 Template:     twentyfifteen

This will tell the child theme which theme is the parent-theme. So you’ll have to find the parent themes style.css an locate the Text Domain in it. This string is what you’ll have to place in the „Template:“ line in your child-theme.

The explanation on wordpress.org is actually quite good here. Head over there if you struggle with the setup.

The functions.php file

A child theme actually consists of two basic files: the style.css file but also the functions.php file.

There are a few lines of code that you’ll need to add to make the child theme work. Just place these lines in your functions.php file:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?> 

What you’re doing is registering/loading the style.css file of the parent theme. If you would not add this code, your child theme would copy the functionality of the parents theme but not the looks/styling.

Other than the part above the file is used to place custom code to modify the themes behavior. The things you can do here are a bit more complex. If you are interested, as always, I’d recommend you head over to Youtube and watch a few videos on the topic.

Using a child-theme

Whenever you need to change a file of the parent-theme just copy that file over to your child-themes directory. The child-themes files will be treated with higher priority by wordpress and thus overwrite the parent-themes file. You don’t change the parent-themes files which in turn will keep the theme upgradable and safe.

One thing to consider: Once you update your parent theme you’ll need to check if the files that you copied to your child-theme have changed. If so, it’s recommended to grab a new copy and do your changes on the newer copy of the file.

Next Post

Previous Post

Never miss another guide, sign up now

Cookie Settings

© 2018 Technical Marketing Guide | Imprint