BLOG

How to Modify Your 3rd Party WordPress Theme using a Child Theme

Published September 8, 2015
You’ve created your website using a WordPress theme that your company purchased. Now you need to modify the appearance or functionality on the site. What do you do?
You don’t want to edit the 3rd party theme that you are using, because you lose backward compatibility. That is, when new versions of the theme come out, you will not be able to upgrade without losing your changes.
One good solution to this problem is to create a child theme to contain your changes. Then, when your 3rd party theme is upgraded, you can install the upgrade and simply re-apply your child theme.
WordPress provides documentation on creating Child Themes. In this post, we take you, step by step, through the technique. We use as our examples:
  1. Changing fonts and tag styling in the theme in order to match company standards.
  2. Adding Google Tag Manager tracking code to the theme.

 

Blog Image of Word Press Child Theme

 

Step 1 – Create a Folder for Your Child Theme

To get started, navigate to the /wp-content/themes folder in your WordPress installation. Find your theme. Say it is named mytheme. Then, create a new folder named mytheme-childtheme.

The Megalytic support website uses a 3rd party theme called KnowHow. So, after creating a directory for its child theme, our /wp-content/themes folder looks like this:

 

Create a Directory for the Child Theme

 

Step 2 – Create Your Child Theme's style.css File

Next, you need to create a style.css file inside your child theme folder. This is the first of two required files. The child style.css file can be used to hold any CSS that you would like to include to modify or add to the parent theme. It must begin with an official stylesheet header.

/*
Theme Name: KnowHow Child Theme
Theme URI: http://herothemes.com
Description: Child theme for KnowHow
Author: Chris Mooney (Swish Themes)
Author URI: http://herothemes.com
Template: knowhow
Version: 1.0.0
*/

WordPress uses this header information to place your child theme in the Appearance Themes Screen, where you will be able to activate it once it is complete.

The most important field in this header is "Template". It must be set to the directory of the parent theme. In our case, this is knowhow.

Some 3rd party themes will come with a skeleton of a child shell child theme already included. That was the case with our KnowHow theme. If this is the case with your theme, you many need to modify the child style.css that has been included to bring it up to date with current WordPress best practice. Specifically, if you see an @import_url for the parent theme, you need to remove it.

Below are the headers for the KnowHow parent theme and the child theme skeleton that was provided.

 

Parent and Child Theme Headers

 

Step 3 – Create Your Child Theme's functions.php File

In addition to the style.css file, you need to create a functions.php file. The purpose of this file is to load the parent theme's style.css file before loading the modifications and additions in the child theme's style.css file.

Your functions.php file should define a function that loads the parent's style.css file and then the child's style.css file. Technically, loading the child's file is optional, because it should happen automatically. But, it doesn't always work, so it is a good idea to include the extra code.

Use the wp_enqueue_style function to add the stylesheets. The code shown below works if the parent theme has only one main style.css to hold all of the css. If your parent theme has more than one .css file (eg. ie.css, style.css, main.css) then you need to enqueue each of them explicitly.

The first wp_enqueue_style function call here loads the parent style since get_template_directory_uri returns the parent theme directory when used in a child theme. Likewise, the second wp_enqueue_style function call loads the child style since get_stylesheet_directory_uri returns the child theme directory when used in a child theme. In this second function call, the third parameter is an array of dependencies. It includes only the parent, which ensures that the parent style will load before the child style.

[php gutter="0"]
<?php

function theme_enqueue_styles() {

$parent_style = 'parent-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

/* Insert custom functions here */

?>
[/php]

Step 4 – Include Modifications in your Child Theme

Steps 1 - 3 have set up your child theme. But, right now there is nothing in the child theme, so it will look and act exactly like the parent. You can now make changes in a variety of ways. One way is to modify or add styles to the child theme's style.css file.

Customizing the Fonts and Tag Styles

Suppose for example, that you wanted to use different fonts in the body and the h1, ..., h6 tags. In that case you could add code like the following to the child theme's style.css file.

[css gutter="0"]

/* ------- Insert custom styles below this line ------- */

@font-face {
font-family: 'Pontano Sans';
src: url('/lib/font/Pontano_Sans/PontanoSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('/lib/font/Montserrat/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('/lib/font/Montserrat/Montserrat-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

body {
font-family: 'Pontano Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: 700;
margin: 36px 0 12px;
font-family: 'Montserrat', sans-serif;
}
[/css]

Suppose that, in addition to changing some styles, you want to incorporate tagging into your site.

Adding Google Tag Manager to Every Page

One way to do that is to copy the parent's header.php into the child theme directory. You can then edit this file, and the changes will override the parent's file. In fact, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads.

So, for example, to add Google Tag Manager (GTM) to your website via your child theme, simply copy and paste the GTM snippet in to your child's header.php file, as shown below.

 

Google Tag Manager Tracking Code Inserted

 

Step 5 – Turning On Your Child Theme

When you are ready to test our your child theme, you can simply navagate to the Appearance > Themes menu choice from the left hand side of your WordPress administration area. There, you will see your new child theme listed among the other theme choices. Roll your mouse over the child theme and click on the "Activate" button. That's all there is to it. Your child theme is now active. Go and test our your site to see if the changes you made to the child theme are working correctly.

 

Turn on the Child Theme

 

Conclusion

Child themes can be a big help when you need to make changes to a 3rd party theme. They make it possible to separate your customizations from the original theme that you purchased. This is particularly useful when your original theme is upgraded, because in that case you can simply install the upgraded parent theme, and apply your modifications using your child theme. Note that if your child theme is overriding a parent theme file - like the header.php given here - you will still need to merge the new header.php file into your child theme's header.php file, and manually incorporate the upgraded changes. So, child themes are not a complete panacea for editing 3rd party themes, but they make like a lot easier by clearly isolating the changes you have made.

ALSO IN THIS BLOG

When the client first came to you, you talked up the value of Google Analytics. You emphasized the importance of seeing where your traffic was coming from. You went on and on about how Google Analytics can show traffic sources to pinpoint whether people came from search, social media or a specific site referral, and how valuable this data was. You sold them on it, so much so that your client looked forward to receiving that first report, the magical day when they would finally understand where visitors were coming from.
But then the report came, and it looked like this:

 

 

It showed that 10% of your client’s traffic came from “(direct)/(none)”. What does this label mean? How do you explain Direct traffic to your client? Better yet, how do you explain “none”?
Let’s take a closer look at understanding Direct traffic in Google Analytics and how we can address it with clients.
Remember how your mom told you not to stand too close to the television because it might hurt your eyes?

The same rules can apply to data. If you’re too close, you may miss the patterns and trends that are crucial to understanding your website’s performance. You can’t judge a site’s performance looking at data in the bubble of a single day, you must consider any day’s traffic compared to the days before and after.

Google Analytics makes it fairly easy to analyze trends over long periods of time. But it also allows you to stand right in front of that TV, to look at more granular levels of time, right down to the hour.
There’s a better way to get that close to the data, without burning your retinas. We’ll cover how to analyze traffic effectively in today’s post.
Digital marketers spend a lot of time focused on PPC and SEO campaigns in order to drive desirable traffic to a website. The phrases we’re ranking for and bidding on get meticulous attention, so much so that we often forget about some of the other ways that visitors find us.

We put a tremendous amount of the effort we put into reviewing organic search data and PPC campaign performance in analytics. But how closely do we monitor referral reports?

If that’s not a channel you review regularly, you may be missing out on seeing traffic that is coming directly from links you’ve obtained around the web, local business listings, news mentions, and more. Many times, links are only considered as a means to an end, a metric that Google uses in determining how to rank sites in the SERPs (search engine results pages). But the fact is, many of a site’s links may be directly contributing to its traffic.

In this article, we’ll review how to look at referral reports in Google Analytics, and some of the many ways to use that data to better inform your web marketing decisions.