A theme is a collection of files for the design, layout, and function of a website. All WordPress websites require a theme for functionality. A WordPress themes is generally considered a parent theme, unless specifically designated as a child theme.
While WordPress has many themes available, custom changes to them can be a pain when a new update comes along. A child theme is considered an extension of a parent, or primary theme. It lets you edit and make changes without editing the theme’s primary code. It also lets you maintain these changes whenever the theme has a new update. If you were to customize the theme or add features, a new update will generally override these changes.
In this guide, we’ll use a default WordPress theme to create a secondary child theme. It is recommended to take a full back up of your website whenever making changes, and you should be comfortable making or editing files and their code. To begin, you’ll need access to your WordPress directory, either through your web host’s File Manager, or using an FTP software tool such as FileZilla to connect to your site and manage files.
Sections
- Take a Backup
- Access WordPress Directory
- Create New Theme Folder
- Create New Stylesheet
- Verify Styles
- Activate Child Theme
Take a Backup
Before directly making changes to your WordPress files, it’s a good idea to take a full backup. This can include either manually creating a copy of your WordPress directory and database export, or using a backup plugin. Check out our article on Backing up WordPress to take a full, easily-recoverable backup.
Access WordPress Directory
Within your file manager, head to the directory where your WordPress website is, usually within the public_html or htdocs folder >> “wp-content >> themes” folder.
Create New Theme Folder
Once in the themes folder, you’ll create a new folder for your new child theme. It should be lowercase with words separated by a hyphen (-) such as “blue-sky.”
Create New Stylesheet
Within this new created folder, you’ll need to create a new “style.css” file.
In a a theme’s stylesheet, “Theme Name” is usually the only required field. Here is a default template style.css, which includes fields helping you keep track of updates:
/*
Theme Name: Default Theme
Theme URI: https://example.com/default-theme
Description: The theme's description...
Version: 1.0
Author: Your Name
Author URI: https://example.com
Additional optional fields for future uploads to WordPress' repository:
Tags:
Text Domain: default-theme
Domain Path: /assets/lang
Tested up to: 6.7
Requires at least: 6.1
Requires PHP: 7.4
License: GNU General Public License v2.0 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/Make sure to include the lines between the CSS comment brackets “/*” and “*/.”
For a child theme, you’ll also need to include the following “Template” line labeling the parent theme. We’ll name the child theme “Blue Sky” and will be using Twenty Twenty-Four WordPress theme using “twentytwentyfour” (same as its folder name in wp-content >> themes) for the template. If you are using a different parent theme, make sure to use the label the template equal to the theme name:
/*
Theme Name: Blue Sky
Template: twentytwentyfour
...other fields
*/Verify Styles
Many themes load both parent and child theme stylesheets automatically. If not, you can create a functions.php file within your new child theme directory and add the following lines to make sure the parent theme and your child theme’s styling are both applied:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
Both parent and child theme functions will run.
Activate Child Theme
Within your WordPress dashboard, go to Themes. Your new child theme, Blue Sky (or your custom name set) should show up. Activate it.
Everything should be the same, but your custom functions and scripts will stay intact with any new updates to the theme. Any future custom edits and customizations should be within your child theme and will be saved.
Leave a Reply