WordPress: Child Themes
A WordPress child theme inherits the functionality and styling of its parent theme. It is recommended to use child themes for a variety of reasons. Child theme allow you to customize a theme and/or add extra functionality while still keeping it reasonably upgrade safe.
To get started with child themes you will of course need a parent theme. In our example were going to use the default ‘Twenty Sixteen’ as the parent theme.
Install the parent theme as you would normally by placing the theme files in the wp-content directory of your site.
Now you can create your child theme to inherit the functionality and styles of ‘Twenty Sixteen’. Create a new folder in the wp-content directory to contain your theme files. I like to use a naming convention <client-themename-child>. For this example I’ll be using ‘nathaneyre-twentysixteen-child’.
A child theme needs 2 files in its root to function:
- child theme’s stylesheet (style.css)
- child theme’s functions file (functions.php)
Child Theme Stylesheet
In the child themes folder create a file named style.css with the following content:
1 2 3 4 5 6 7 8 9 10 11 |
/* Theme Name: Nathan Eyre Twenty Sixteen Child Description: Nathan Eyre's Twenty Sixteen Child Theme Author: Nathan Eyre Author URI: https://nathaneyre.com Template: twentysixteen Version: 1.0.0 */ /*Original Theme Styles*/ @import url("../themename/style.css"); |
Update the above code to reflect your project. Descriptions for the fields are below:
- Theme Name – The theme name, this appears on the theme select screen.
- Description – The theme description, this appears on the theme select screen.
- Author – The creator of the theme, this appears on the theme select screen.
- Author URI: The creators website URI, this appears on the theme select screen.
- Template: The folder name of the parent theme. This is used by WordPress to identify the parent theme for inheritance.
Version: Your designated version of this theme.
The import URL line pulls the styles from the parent theme. Be sure to update this with the folder name of the parent theme in place of ‘themename’.
Child Theme Functions
In the child themes folder create a file named functions.php with the following content:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php /** * Theme Functions * * @author Nathan Eyre * @link https://nathaneyre.com */ /*Custom code starts here*/ ?> |
Update the above code to reflect your project. Descriptions for the fields are below:
- Author – The creator of the theme, this only appears in this file.
- Link – The creators website URI, this only appears in this file.
Activate the Theme
Now that we have created our child themes style.cs and functions.php files we can activate our theme through the WordPress Appearance | Themes page.
Update the themes styles by modifying the child themes styles.css and update the themes functionality by modifying the child themes functions.php
Download My Child Theme Template
I have created a base child theme I like to use when starting a project to speed up this process. This child theme has a few extras in it such as:
- Loading administrator styles and scripts
- Loading front end styles and scripts
- Adding a theme sample photo to the theme selection screen
- Replacing the WordPress login logo
Be sure to change the themes folder name, values in the styles.css, values in the functions.php, and the logo image before using this child theme template.
Recent Comments