How to Customize a Child Theme in WordPress

Learn to customize your child theme’s functionality by modifying some php code. In this article we’ll take a look at modifying the functions.php to add some additional content to each blog post. This will save you time and energy while enjoying a consistent copyright notice at the end of each post.

In a previous blog post we discussed how to create a child theme in word press.  To review that article click here.

As a quick refresher, you are simply creating a new theme folder (typically named after the parent theme and ending it with -child).

For example. The Twenty Seventyeen theme is in a theme folder named twentyseventeen (this will become the main / parent theme), your child theme would be in twentyseventeen-child.  The suffix -child is simply a convention and not a requirement.  It simply keeps the child theme folder next to the parent theme.  In it’s most basic form you add a style sheet in your child theme and then override or add to the styles.  The key to linking this theme to your parent theme is in the Template: attribute of the style.css file.  This is the crucial part that lets WordPress know this theme has a parent.  The Template: attribute must match the folder name of the parent theme not it’s actual name.  So in this example if we were making a child theme for the Twenty Seventeen theme we need to match the folder name which is twentyseventeen.

/*
Theme Name: Twenty Seventeen - Child
Theme URI: some url
Author: WEBBASIX
Author URI: https://www.webbasix.com/
Template:  twentyseventeen
Description: Child theme of Twenty Seventeen
Version: 1.0
*/

The example above has several additional theme attributes but only the following information is required:

• Theme Name – needs to be unique to your theme
• Template – the name of the parent theme directory. The parent theme in our example is the Twenty Seventeen theme, so the Template will be twentyseventeen. to match the folder name.   If you are creating a child them for a different parent them you’ll need to adjust accordingly.

Taking it to the Next Step

As we mentioned in the last article, you can use a child theme to override your styles.  But what if you wanted to add some additional functionality or slightly change the way the site behaves.  Well you’re in luck.  Not only can you override the styles, you can also override existing code or add new code.

This is where the gloves come off.  To get started you must have the basic knowledge of HTML/PHP.  If you don’t have no fear, google to the rescue.  In most cases you can google what you need to know and through some trial and error you’ll be able to figure it out. HOWEVER, you should never make these updates directly on your production site.  Most hosting plans offer a staging site, which in an ideal place to test your coding changes.  Making a small inaccurate change in PHP can cause a page or the entire site to throw an error.  If this happens don’t worry you can always undo it by replacing the file with the original from the parent theme or simply remove it from the child theme which means the parents theme page will take over again.

Writing Some Code

Now we’ll get to the meat of it.  Suppose you want to add a copyright at the end of each blog post.  Naturally you could simply copy and paste it at the end of each post but this is a manual effort, which you may forget from time to time.  In addition if you more than one content writer, you would need to instruct each writer to follow the same procedure.  If only there was a better way… and luckily for us there is.  Simply add a small bit of code to your functions.php file.

The example below will add / inject copyright info to the end of your blog.

//   add custom post content
function add_post_content($content) {
	if(!is_feed() && !is_home()) {
                //  add copy right info to the end of each article
                // .bloginfo('name', 'display'). && .bloginfo('name'). does not appear to work so we're hard coding the site name
		$content .= '<div class="copyright-info">Copyright &copy; '.date('Y').'&nbsp;WEBBSIX, Inc. All rights reserved.</div>';
	}
	return $content;
}
add_filter('the_content', 'add_post_content');

Code note about bloginfo(‘name’):

At the time of this writing, we noticed a possible bug in WordPress.  bloginfo(‘name’) was returning an empty string.  Typically bloginfo(‘name’) would return the name of the site that you set in Site Title found in Settings -> General, however it wasn’t working so we’ve modified ours to hard code the value of our site name.  If you copy the script above be sure to change it to your company / blog name.  If bloginfo(‘name’) works on your site then you should use it.

Below is another example that will take use the bloginfo(‘name’) – assuming it’s working correctly.

//   add custom post content
function add_post_content($content) {
	if(!is_feed() && !is_home()) {
                //  add copy right info to the end of each article
		$content .= '<div class="copyright-info">Copyright &copy; '.date('Y').'&nbsp;'.bloginfo('name').'. All rights reserved.</div>';
	}
	return $content;
}
add_filter('the_content', 'add_post_content');

Practice Will Make You Perfect!

Don’t fret if you make mistakes, you are bound to make a few blunders as a beginner!  Don’t forget, if you have a stage site, it’s best to practice there instead of your active production site.  If you don’t have a stage site, we recommend getting one.  A stage site is include in all of our packages above the basic package.

If you are in quest of exceptional WordPress theme, try WEBBASIX. We have an incredible WordPress theme packages, a great deal to get a well-designed website, web hosting, SEO, marketing and other benefits all from one place!

Until Next Time, Happy Theming!