A child theme is only necessary if you plan on editing your WordPress theme files at a code level. If you only need to customise theme CSS then a child theme isn’t necessary, instead, use a custom CSS plugin like SiteOrigin Custom CSS. To confirm, a child theme is not necessary to safeguard your content, theme settings, plugin settings or WordPress core settings.
Each WordPress theme that you have installed is stored in its own folder. That folder is located in the /wp-content/themes/ directory on your server. Whenever a theme author like SiteOrigin ships a theme update and you run that update via DashboardUpdates, the entire theme folder is replaced with the updated version. This means that any edits you might have made to a theme’s files will be lost during the update process. Put another way, it’s not safe to directly edit theme files at a code level.
If you’re still reading then, you do want to edit theme files at a code level, in this event, you’ll need a child theme. A child theme uses all of the parent theme functionality and styles while providing a safe place for you to store your edited files. Your edited files will be used instead of the original files.
Reference: WordPress Codex: Child Themes
Creating a Child Theme
Using our Vantage theme as an example, basic child theme structure looks as follows:
- vantage-child
- functions.php
- style.css
style.css
style.css is the one file that is required in a child theme. The child style.css header information allows WordPress to identify which parent theme our child theme belongs to. For our Vantage child theme, the opening contents of our style.css will look as follows:
/* Theme Name: Vantage Child Author: SiteOrigin Author URI: https://siteorigin.com Theme URI: https://siteorigin.com/theme/vantage Description: Vantage Child Theme Version: 1.0.0 Template: vantage Text Domain: vantage-child */ /* =Theme customization starts here ————————————————————– */
The most important line above is Template: vantage. That allows WordPress to identify which is the parent theme. For all SiteOrigin themes, the template name is the same regardless of whether the theme is the free or premium version.
If you’d like to add custom CSS to your child theme, you can do so below =Theme customization starts here, or, in a custom CSS plugin.
functions.php
functions.php is the heart of our child theme. Initially, we’ll use this file to import (enqueue) the parent theme stylesheet. This will ensure that all of the parent theme styles are correctly displayed in our child theme. Later, if we want to add custom functions, this will be the file we’ll do it in.
<?php
/**
* Enqueue the parent theme stylesheet.
*/
function vantage_child_enqueue_parent_style() {
wp_enqueue_style( 'vantage-parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'vantage_child_enqueue_parent_style', 8 );
The above function is correct for Vantage. Corp, Unwind and North parent themes enqueue a minified stylesheet. To prevent enqueuing the parent stylesheet twice, the function for Corp, Unwind and North should be as follows:
/**
* Enqueue theme scripts and styles.
*/
function siteorigin_corp_child_scripts() {
// Child theme stylesheet.
wp_enqueue_style( 'corp-child', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'siteorigin_corp_child_scripts', 8 );
Put another way, for Corp, Unwind and North, we only need to enqueue the child theme stylesheet. For Vantage and all other SiteOrigin themes, we only need to enqueue the parent stylesheet.
Starter Child Theme
You’ll find a starter child theme in the documentation section of your SiteOrigin theme.
Vantage, Corp, Unwind and North links are included below:
Vantage Starter Child Theme
Corp Starter Child Theme
North Starter Child Theme
Unwind Starter Child Theme
Installation
Once saved, your child theme folder “vantage-child” should be stored in the /wp-content/themes folder. One way of uploading your child theme is to ZIP the child theme folder and upload via Appearance > Themes > Add New: Upload Theme.
Activating any child theme in WordPress has a few expected results. AppearanceCustomize and AppearanceMenuMenu Locations settings will reset. This means that after activating your child theme you’ll most likely need to go to Appearance > Menus and re-save your menu location settings. You’ll also need to go to Appearance > Customize and redo any theme Customizer settings. Themes like Vantage have a lot of Customizer > Theme Design settings. If you think you might need a child theme later in your development process, it’s worth installing one right, in the beginning, to avoid having to setup your Customizer settings twice.
Usage
Custom CSS rules can be saved in your style.css file or in your custom CSS plugin if you’re using one. Both places are safe. Please, remember, don’t copy the entire contents of the parent style.css file into your style.css file. Only edited or new CSS rules should be added to the child style.css file. For a general overview on custom CSS, please, see our introduction to custom CSS tutorial.
Any theme files you might want to edit can be copied from the parent theme folder to your child theme folder. It isn’t necessary to remove the original from the parent theme folder, copy and paste is all that’s necessary. The copy process can be completed using an FTP program or Hosting File Manager like the one available in cPanel for example.
Advanced Customisations
Not all files can be successfully edited from within your child theme. If you need to change a parent theme PHP function, a slightly different procedure will have to be followed. Filter hooks will often need to be used from within the child theme functions.php. If you’re interested in advanced customizations of this nature, see the following ThemeShaper tutorials on using filters and actions in child themes:
ThemeShaper: Using Filter Hooks in WordPress Child Themes
ThemeShaper: Using Action Hooks in WordPress Child Themes