If you need to customize theme files at a code level, you’ll need to do so using a child theme. Any changes made via AppearanceEditor to a parent theme will be lost if you ever run a theme update.
If you only need to make CSS changes to a theme, then a child theme isn’t necessary. We recommend using SiteOrigin CSS which has an integrated visual editor or the core WordPress field at CustomizeAdditional CSS.
About Child Themes
Child themes work by inheriting the functionality of the parent theme. Once a file is copied from the parent theme into the child theme folder; that file will then take precedence over the same file still contained in the parent theme. Inheritance doesn’t apply to all files, but most that you’re likely to edit.
For a full explanation and tutorial on child themes, please see https://developer.wordpress.org/themes/advanced-topics/child-themes/.
Creating a Child Theme
In this example, we’ll be creating a child theme for our first theme, also called Puro.
Download the starter child theme for Puro
The basic structure of a starter child theme is as follows:
- puro-child
- functions.php
- style.css
The child theme folder name is usually the name of the parent theme followed by -child
style.css
First, we’ll add our child theme stylesheet. Edited CSS from the parent theme or new CSS selectors can be stored here or in a Custom CSS plugin.
/* Theme Name: Puro Child Author: Puro Author URI: https://purothemes.com/ Theme URI: https://purothemes.com/themes/puro/ Description: Puro Child Theme Version: 1.0.0 Template: puro Text Domain: puro Domain Path: /languages/ */ /* =Theme customization starts here -------------------------------------------------------------- */
The most important part of the child theme’s style.css file is Template: puro. This declaration allows WordPress to locate the parent theme’s folder. Template should exactly match the name of the parent theme’s folder. To confirm the parent theme folder name, check the /wp-contents/themes/ folder on your server.
functions.php
functions.php handles the importing (enqueue) of the parent theme stylesheet as well as our new child theme stylesheet, a space we can use to add any new custom styles we might have.
<?php
/**
* Enqueue the parent theme stylesheet.
*/
function puro_child_scripts() {
wp_enqueue_style( 'puro-parent-style', get_template_directory_uri() . '//puro-4401.kxcdn.com/style.css' );
}
add_action( 'wp_enqueue_scripts', 'puro_child_scripts', 8 );
Installation
If your child theme is prepared in a zipped folder, as our Puro Starter Child Theme is above, you can install from AppearanceThemesAdd New: Upload Theme. Alternatively, you can also upload the unzipped folder to /wp-content/themes/, using FTP or your hosting File Manager.
Usage
Your custom CSS can now be safely added to the child theme’s stylesheet. Any theme files you’d like to edit can be copied from the parent theme into the child theme folder and changed as required. The copy process can be completed via FTP or your hosting File Manager.
Please remember not to copy the entire contents of style.css in the parent folder to style.css in the child theme folder. Only specific selectors you want to edit should be copied over, or new styles added.
Migrating to a Child Theme After Setting up the Parent Theme
If you're moving to a child theme after having already setup Customizer options with the parent theme activated, please, see our tutorial on migrating Customizer settings from the parent to the child theme.
Parent Themes Using a Minified Stylesheet
Polestar uses a minified style.css file, this means that the child theme functions.php setup is a little different. If you're using Polestar, please, find a starter child theme here.
More Advanced Customisations
If you need to change an existing function in say functions.php or template-tags.php in the parent theme, it’s not possible to just copy those files over to the child theme. In this case, you’ll need to use filter hooks in the child theme's functions.php file. ThemeShaper wrote a nice post on this topic, if you’re interested, that’s the best place to start.
ThemeShaper: Using Filter Hooks in WordPress Child Themes
ThemeShaper: Using Action Hooks in WordPress Child Themes