Creating a Parent/Child Theme Structure in WordPress
Do you often find yourself in a situation where you’re making significant customizations to your theme’s PHP code and CSS? At some point your painstaking custom code will disappear when you update your theme template. What to do? Well, the great thing about WordPress is that it was designed around the concept of a parent/child theme structure. By creating a child of a parent theme you’re able to, for example, customize separate “functions.php” and “style.css” files that are unaffected by any parent theme upgrades. In the case of PHP code, you can use filter functions instead of commenting out and adding code. Most high-quality themes as well as the Jetpack plugin will allow you to add custom CSS but in many cases having a child theme will be easier especially if you’re going to have pages worth of CSS customizations and overrides.
Here are the steps to creating a child theme until WordPress implements a built-in feature that makes this process easier.
1. Create a new text file named “functions.php” and copy/paste the following code
You can technically omit the “?>” PHP close tag in the last line.
<?php
/*
* Optional - Required for some older parent themes - see, we're already adding custom PHP!
* Loading parent scripts and functions below
* Custom functions follow this section.
*/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_scripts', 11 );
function child_enqueue_scripts() {
wp_dequeue_style( 'responsive' );
wp_enqueue_style( 'child-responsive', get_stylesheet_directory_uri() . '/css/responsive.css' );
}
/*
* Custom theme functions for your child theme.
* Functions here will override parent theme.
*/
?> 2. Create another text file named “style.css” and copy/paste the following code
Note, it is very important that the name after the “Template:” field matches the exact (case sensitive) spelling of the directory name of the parent theme. Otherwise, your child theme will not inherit anything from the parent theme upon activation.
/* Theme Name: (Your child theme name) Theme URI: (URL of parent theme) Description: Child Theme of (Parent theme name) Author: (Author of child theme) Author URI: (URL of child theme) Template: (the exact spelling of the directory of the parent theme) Version: (Child theme version number) License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: (copy the tags from the parent theme) Text Domain: (copy the text domain from the parent theme) */ /* Custom CSS */
Here’s an example of a child theme “style.css” file
/* Theme Name: My Cool Child Theme Theme URI: http://mycoolthemes.com/store/a_cool_theme Description: Child Theme for Cool Theme Author: Brian Hoshi Author URI: http://www.mycoolwebsite.com Template: cool_theme Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, one-column, two-columns, left-sidebar, right-sidebar, custom-colors Text Domain: cool-theme-child */ /* Custom CSS */
3. Create and name a directory/folder for your child theme in the WordPress themes directory
Usually found in ~/wordpress/wp-content/themes/
4. Upload the “functions.php” and “style.css” to your newly created child theme directory
5. Activate your child theme in WordPress, Appearance > Themes
Test to see if your child theme is working in another browser
6. Copy “screenshot.png” from parent theme to your child theme directory or create a new “screenshot.png”
For additional information:
