WordPress Childthemes-How To

Wordpress Child Themes Created-How To

What They Are, How to Use Them, and Why

A child theme is simply a theme that inherits the functionality and looks of another theme – the parent.
The whole idea of a child theme is that you can modify, and add to the functionality of that parent theme without modifying it directly. The parent remains intact, everything is built within the child theme.

But this sounds like additional work, right? Why would you want to play around with child themes if you can simply modify the theme you actually want to modify…?

Why you should use child themes

First of all, if you’re not planning on modifying your theme then child themes will be of no use to you.

But if you do then there are three main benefits of using child themes in comparison to modifying a theme directly.

Easy updates

The biggest problem with all kinds of modifications is that they disappear the minute you update WordPress (in case of modifications to the WordPress core) or your theme (in case of direct theme modifications).

Preserving your modifications to make them work after an update is almost impossible if you’ve modified the theme directly.

The update mechanism in WordPress is a rather simple one – new files are copied in place of the old files, nothing fancy.

If you’re using a child theme, however, you don’t have to worry about any updates. Whenever you update the theme you’re using only the parent theme will be updated. Your child theme, and everything you’ve coded in it, remains intact.

You know what you’ve changed

Modern WordPress themes consist of tens of different files. There are PHP files, HTML, JavaScript, CSS, images, sometimes jQuery, and more.

And that’s okay, but the problem arises when you’ve modified a couple of things here and there, and now you have a hard time tracking all the changes.

This is even worse if it’s not you who has made the changes, and now you have to step in and take over the work. In such a case tracking the changes is next to impossible.

If you’re using a child theme, however, then there’s no such problem. Every modification can be found in the child theme’s folder.

Easy to restore

Working with source code can be unpredictable at some times. Crashing your blog is a lot easier than you might think.

Of course, in such a case you’re very likely to find the cause of the problems among those few last lines of code you’ve created, but not always. Sometimes a change made somewhere else interferes with other functions and hacks.

If you find yourself in such a situation then removing all the modifications can be very time-consuming. You’d have to go through each file and bring back its old implementation.

Not with a child theme you don’t. Just get rid of the files causing trouble and your blog is back.

This is something I don’t say very often, but I don’t actually see any downside to using child themes. They really are THE way of modifying any theme.

How to use child themes

From a user’s perspective, using child themes is no different from using standard themes. You just go to your WordPress admin, navigate to Appearance > Themes and set your child theme as Active.

Then you can work with the theme normally, as you would with any other theme. You can add widgets to sidebars, create menus, and things like that.

Just two files are required: the screenshot, and style.css (mandatory file).

The style.css file for a Parent theme is very simple. It only contains a reference to the parent’s CSS file and nothing more. This simple structure enables you to do anything you please with our child themes – treat them as a blank canvas to build upon.

Construction of a child theme

As I’ve mentioned, there’s only one required file for a child theme – it’s style.css.

The main purpose of this file is to provide the information header for WordPress to recognize the child theme, or more accurately, recognize who the parent is.

The line that points to the parent is one that starts with “Template.” Here’s an example – the blank child theme from my Theme:

/*
Theme Name: Generate Press Child
Theme URI: https://www.manfredk.com/generatepress-child/
Description: Generate Press Child Theme
Author: Manfred Kulemann
Author URI: https://www.manfredk.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: generatepress-child
*/

@import url(“../generatepress/style.css”);

The template line indicates the directory name of the parent theme (case-sensitive).

Of course, the other purpose of style.css is for you to create the styling of your child theme.

I’d advise to leave the @import rule intact. It makes sure that the original style.css (from the parent theme) is loaded along with this new one. This way you can create new entries in this file, or override the existing ones from the old style.css and still have the unmodified ones loaded normally.

Other than the required style.css file your child theme can contain anything else you find suitable. For instance: functions.php, template files, graphics and other files.

Functions.php and other files

Child theme’s functions.php does not override its counterpart (like style.css does – hence the @import rule mentioned earlier). Instead, it’s loaded right before the parent’s functions.php.

You can use functions.php like you normally would – create custom functionalities, hacks, implement some security features, and everything else you can think of.

You can also use your functions.php to replace the original functions in the parent’s functions.php. You can do this if the original function is declared conditionally, for example:

if (!function_exists(‘func_name’)) {
function func_name() {
//something
}
}

Apart from functions.php you can create any other template file. But this time every new file will override its namesake.

For example, if you create a new page.php then it becomes the default template for every page of your blog. The original page.php from the parent will no longer be loaded.

You can also add completely new files that haven’t been included in the parent. Maybe a tag.php file or a 404.php. Child themes are also perfect if you want to create custom page templates.

The whole idea of child themes is actually very easy to grasp once you spend an hour (there’s no need to spend more time) to study all the characteristics and principles behind them. For more info feel free to visit the official guide on how to work with child themes, which gives you a whole in-depth look into the topic.

Do you need help setting up a Child Theme for your WP Website? Contact me Here!

20% off your Annual Hosting Plan

Applies to new signed up Customers Only. Get 20% Discount on your Annual Hosting Fees. Promotion expires 15. November 2024. Use Promo Code: H0JYHRB98X