How to Create a WordPress Child Theme
If you're using a theme you downloaded from the free WordPress theme repository, or maybe one you've bought from ThemeForest, you may want to make some tweaks to it.
Maybe you want to register a new font. Or add a new template file. Maybe you want to add some code from one of the tutorials or courses here on Envato Tuts+. Or perhaps you want to use the theme as the basis for a theme of your own design.
You might be tempted to just go and edit the source code for a third-party theme (ie. a theme you didn't write yourself), but don't! The next time you update that theme, new files will be downloaded and you'll lose all the changes you made.
Frustrating, to say the least.
But what can you do, if you do need to edit the theme?
Luckily there is a way to edit the code in a theme, and still have the ability to download the latest updates: that's by creating a child theme using the original theme as a parent theme.
This means that you'll activate the child theme in the WordPress admin, but within that theme's code are instructions to WordPress telling it that this is a child theme, and what the parent theme is. You keep the parent theme installed on your site, but you don't activate it. (It's essential to keep it installed, as without it, the child theme will break.)
In this tutorial I'm going to show you how to create a child theme in WordPress. I'll also give you some tips on how child and parent themes work, so you know which set of code is being used to display the content in your site.
Creating The Child Theme
The first thing to do is to create the child theme in your wp-content/themes folder. The child theme must have two files to work: a stylesheet and a functions file. You can also add optional files, such as template files or include files.
Create a folder for your child theme in the themes folder and give it a suitable name. I'm calling mine tutsplus-child-theme.
Inside that folder, create a file called style.css.
At the top of that file, add the following commented out code:
/* Theme Name: Tutsplus Child Theme. Child for Twenty Nineteen. Theme URI: https://github.com/rachelmccollin/tutsplus-child-theme Description: Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme. Author: Rachel McCollin Textdomain: tutsplus Author URI: https://rachelmccollin.com/ Template: twentynineteen Version: 1.0 */
This tells WordPress that this is a theme, and provides the same information about the theme as you'd find in any theme—with one addition. The Template: twentynineteen line tells WordPress that this is a child of the Twenty Nineteen theme.
You can use any theme as a parent theme, by using the name of the folder where it's stored. Don't use the title of the theme: instead, use the folder name.
Now save the stylesheet and create another file in your child theme, called functions.php.
In this file, you need to enqueue the stylesheet from the parent theme. It used to be that you did this by using an @import line in the stylesheet, but this is no longer the recommended way to do it.
Instead, in your functions file, add this code:
<?php
/* enqueue script for parent theme stylesheeet */
function tutsplus_parent_styles() {
// enqueue style
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'tutsplus_parent_styles');
This correctly enqueues the stylesheet from the parent theme, using get_tempate_directory_uri() to find that theme (the template directory is the folder where the parent theme is stored, while the stylesheet directory is the folder where the current theme is stored).
If you want to add any styling to your child theme to override or augment the styling in the parent theme, you go back to the stylesheet for your child theme and add it there. Don't add in in the functions file or try enqueuing any more stylesheets.
You can also add functions to the child theme's functions file, and template files to the theme folder, which will override the same template files in the parent theme.
So now you have your child theme set up—it's that easy! However, it's worth understanding exactly how child and parent theme template files interact.
Creating Template Files
Now let’s take a look at theme template files. Which template file WordPress uses to display a page on your site will depend on two things: the template hierarchy and the files you add to your child theme.
Imagine you’re viewing the Travel category archive page in your site. WordPress will use the template hierarchy to find the most relevant file:
- a category archive template file for that specific category, using the slug: category-travel.php
- a category archive template file for that specific category, using the ID: category-23.php
- a general category archive file: category.php
- a general archive file: archive.php
- the catch-all: index.php
WordPress will look for these in both your parent and child theme. WordPress will use the first file in the hierarchy that it finds, whether it’s in the parent theme or the child theme.
There’s one exception. When the most relevant template file has a version in both the parent and child themes, WordPres will use the file from the child theme, and ignore the one from the parent theme. This is one of the most common uses for child themes—to override a specific file in the parent theme.
Here are a few examples, using the category example above:
- If your child theme has archive.php and index.php, and your parent theme has category.php and index.php, then WordPress will use category.php from the parent theme because it’s highest in the hierarchy.
- If your child theme has category.php and index.php and your parent theme has archive.php and index.php, WordPress will use the category.php file from the child theme, as this is highest in the hierarchy.
- If your child theme has archive.php and index.php and your parent theme has archive.php and index.php, WordPress will use the archive.php file from your child theme. This is because there are two copies of the file highest in the hierarchy, and the child theme overrides the parent theme.
So if you want to override a template file in your parent theme, create a duplicate of that file in the child theme with the code you want. Or create a file that's higher in the template hierarchy and add that to your child theme.
Adding Functions to the Child Theme
Functions work differently than template files, and are a little less straightforward.
If you add a function to your child theme with the same name as one in your parent theme, WordPress will throw an error, because it's trying to call the same function twice.
But this won't happen if the function in the parent theme is pluggable.
A pluggable file is enclosed in a conditional check for another function with the same name, which looks like this:
if ( ! function_exists( 'tutsplus_function_name' ) ) {
function tutplus_function_name() {
// contents of function
}
}
Here, WordPress will check that no function has already been called that has the same name. If so, it will run this function. This is because functions from the child theme are called before functions from the parent theme. If you write a function in your child theme with the same name, that will run instead.
But what if the parent theme function isn't pluggable and you want to override it?
Well, you can do that by writing a new function that essentially cancels out the function in the parent theme, and giving it a higher priority than the function in the parent theme, so that it runs after it the parent theme funciton. Alternately, you can unhook the function from the parent theme and write a new function in the child theme, hooked to that same hook.
Imagine the function in the parent theme looks like this:
function tutplus_parent_function() {
// contents of function here
}
add_action ( 'init', 'tutplus_parent_function' );
If your function in your child theme could undo the parent theme's function without you having to actually stop the parent theme function from running, you'd write it like this:
function tutplus_child_function() {
// contents of function here
}
add_action ( 'init', 'tutplus_child_function', 20 );
But if you had to prevent the parent theme's function from running, you'd unhook it first, like this:
function wpmu_remove_parent_function(){
remove_action( 'init', 'tutplus_parent_function' );
}
add_action( 'wp_head', 'wpmu_remove_parent_function' );
Note that you still have to put the remove_action() function inside another function, hooked to the wp_head() hook in this case.
Then you could write the function for the child theme as if the one from the parent theme never existed—remembering not to give it the same name, though!
Child Themes Are a Useful Tool for Editing Themes
Child themes have two main uses:
- With a theme that's been designed for use as a parent theme (often refered to as a framework). The framework isn't designed for use on its own: instead, you add styling and extra template files with a child theme.
- To allow you to edit the parent theme without actually directly editing it, or to add extra template files. This means that when the parent theme is updated in the future, you won't lose your work.
So next time you read a tutorial telling you to use a child theme instead of editing a third-party theme, you'll know what to do!
WordPress ThemesTwenty Nineteen Teardown: Using the New WordPress Default Theme
from Envato Tuts+ Tutorials
Comments
Post a Comment