Skip to content

Child Theme Setup and Example

A child theme is a theme you install in WordPress but doesn’t have any template files or CSS by default, instead it pulls all the code and styling from its “parent” theme (in this case Total). They are core functionality in WordPress (view WordPress Docs) not exclusive to the Total theme.

When to use a Child theme

If you want to add custom CSS or make alterations to the Total theme you could manually edit the theme, however, if you ever update the theme you will lose all your modifications because WordPress theme updates are done by fully deleting the theme and uploading the new version. Additionally if you modify the parent theme (Total) you may accidentally break things and troubleshooting errors will be much more complicated.

This is where WordPress child themes come into play, they allow you to make alterations to the parent theme that will not be overwritten when updating the parent theme.

So if you plan on making advanced modifications such as altering theme hooks or filters, making use of any of the available snippets or altering any partial template files you will want to install and use a child theme unless you prefer to use a plugin for these edits such as the Code Snippets plugin.

Branding

Child themes are also a nice way to provide a “branded” version of a theme to the end user. When creating your child theme you can give it a unique screenshot and theme details (name, author, description) so that it matches the site. When working on client sites your client will be very happy to see their unique child theme installed and in use on the site.

When not to use a child theme

If you are only planning on making small CSS edits to the theme then you can add them at Theme Panel > Custom CSS instead of using a child theme or if you are going to use a plugin such as Code Snippets to make PHP edits then perhaps you don’t need a child theme. It’s also possible to create your own custom plugins to modify the theme rather than (this would be recommended for functions you may want to add to multiple sites).

Most people probably do NOT need a child theme.

Child Theme Structure

A child theme by default consists of only 2 files a style.css file and a functions.php file.

Your style.css file should include the standard WordPress header commenting which will look something like this:

/*
 Theme Name:   Your Child Theme Name
 Theme URI:    http://example.com/
 Description:  Child theme description
 Author:       John Doe
 Author URI:   http://example.com
 Template:     Total
 Version:      1.0.0
 Text Domain:  totalchild
*/

All the different parameters (Theme Name, Theme URI, Description...etc) should be consistent with your site the only value you should not change is the Template, this should always say "Total" as that is the name of the parent theme.

Your functions.php file by default should have a function used to load the parent style.css file so that it can inherit the default styling of the parent theme. This code should look something like this:

/**
 * Load the parent style.css file
 */
function total_child_enqueue_parent_theme_style() {
	wp_enqueue_style(
		'parent-style',
		get_template_directory_uri() . '/style.css',
		array(),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'total_child_enqueue_parent_theme_style' );

Note: Your functions.php file is a PHP file so it must start with an opening PHP tag (<?php) so this code would be placed after the opening PHP tag.

Sample Total Child Theme (download)

All WordPress child themes are created the same way in WordPress and if you are using a child theme you really should be familiar with how to create one but to speed things up we created a sample child theme for you that you can then tweak accordingly (add your screenshot, edit the name, etc).

Download Sample Child Theme Child Theme Github Repo

IMPORTANT: Switching To Child Theme Notice: If you have NOT been using a child theme and are going to switch to one now, it's very important to realize that all theme mods (Customizer settings) are saved in the database under a table using the name of your theme so if you switch to a child theme you won't lose your settings but they won't apply, so make sure to export and import your customizer settings when switching over. If you didn't do this...switch back to the parent theme, grab your settings then switch back to the child theme.
Information: When you download the Sample Child theme you should rename the zip file so it's uploaded to your server with whatever unique name you want and it matches your site.

Making Template Edits

When making edits to template files in the Total theme it's important to first ask yourself...do I have to edit this file? Total includes a lot of built-in filters and action hooks so you can make most customizations via the child theme functions.php file. By using filters and hooks you won't have to worry about keeping track of modifications to the template files in the parent theme when the parent theme is updated. Have a look at the available snippets for the theme. And if you aren't sure the best way to edit something please leave a comment on ThemeForest and we can provide you with feedback or make a custom snippet for you.

Partial Template Files

If you do prefer to alter template files rather than using hooks/filters as mentioned in the paragraph above that is ok and for some cases this is actually required, such as modifying default theme card styles. All the core output for the Total theme is located at Total/partials/ so you will want to create a blank partials folder in your child theme and then copy the file you want to edit inside that folder keeping the same structure. For example if you want to edit the header aside content, this file is located in the parent theme at Total/header/header-aside.php so you will need to create a partials folder in your child theme, then inside of that folder create a header folder then inside that copy and paste the header-aside.php file from the parent theme. When you use the same structure as the parent theme WordPress will find that file and use it instead of the file in the parent theme.

Note: When you make partial template modifications you need to be aware that things can change in future updates and you may need to manually modify these files whenever the theme updates the file in the parent theme. This is why it's best to NOT modify the theme files but instead use theme hooks/filters as noted above.
Back To Top