Have you ever wondered how to create a WordPress child theme? It’s a common question in the world of website management and development. This article will guide you through creating child themes in maintaining and customizing your WordPress site.
The current article is "6.8. Create Child Theme" of our Complete SEO Guide Box.
Previous Article: 6.7. WordPress Widgets Turning off. Next Article: 6.9. Header/Footer Changes
Customize Your Site with Ease
Creating a WordPress child theme is pivotal for personalized website designs. It offers a unique opportunity to tweak your site’s parent theme without disrupting its original code. Imagine being able to customize your site to fit your exact needs without the fear of losing your modifications during an update.
Safeguard Your Updates
Keeping your site up-to-date is vital for maintaining its functionality and security. WordPress theme creators regularly update to improve features, rectify bugs, or mend potential security issues. But if you edit a theme directly, these updates could overwrite your customizations. However, when you create a WordPress child theme, you can update the parent theme safely, preserving your custom changes intact.
Foster Learning and Experimentation
Perhaps you are in the learning phase of coding or desire to experiment with various customizations. In such cases, a child theme acts as your safety net. It allows you to meddle with its code without damaging the parent theme. In other words, creating a WordPress child theme provides a conducive environment to enhance your coding skills.
Speed up Your Development Process
Using a child theme can also expedite your development timeline. Rather than starting from scratch, you can build upon the robust foundation the parent theme provides. Thus, you inherit the parent theme’s features, design, and functionality, which you can modify. This is why creating a WordPress child theme is beneficial, enabling faster and more efficient website development.
Ensure a Safe Fallback
Child themes also provide a safety mechanism for your website. Suppose any errors or issues arise within your child theme. In that case, the parent theme will be a fallback, keeping your site from completely breaking down. This ensures a seamless user experience despite potential issues when you create a WordPress child theme.
Follow the Best Practices
It’s crucial to remember that creating a WordPress child theme is considered a best practice in website development and management. It not only safeguards your customizations and ensures your site’s stability but also promotes the longevity of your adjustments.
The Power of functions.php in Your Child Theme
One of the most significant aspects when you create a WordPress child theme is the “functions.php” file. This file acts as the brain of your child theme, allowing you to add functionality or features to your website that aren’t present in the parent theme.
A child theme’s “functions.php” file is loaded before the parent theme’s functions file. You can use it to override the parent theme’s functions or add new ones. For instance, if there’s a specific element or feature you’d like to change or add to your website, you can write a function for it in your child theme’s “functions.php” file.
Remember, changes in your child theme’s “functions.php” file are preserved even when the parent theme is updated. So, if you’re looking to sustainably alter your website’s functionality, understanding and using the “functions.php” file when creating a WordPress child theme is crucial. It is another powerful tool that allows you to customize your website.
How to Create a WordPress Child Theme
Let’s begin creating the WordPress child theme.
Step 1: Initiate a New Child Theme Directory
Open your File Manager. Open the WP File Manager plugin if you don’t have one with your hosting.
Navigate to:
/public_html/wp-content/themes
Create a new directory here for your child theme. Standard practice is to name the child theme after the parent theme, appended with “-child.” So, for the Astra theme, it should be:
/public_html/wp-content/themes/astra-child
Right-click inside the “themes” folder, then click [New Folder].
Name it “astra-child” and hit the [Enter] key.
Enter the “astra-child” directory.
Step 2: Generate a “style.css” File
The “style.css” file communicates essential details when you create a WordPress child theme.
Right-click inside the “astra-child” folder, then hover over [New file], then click [CSS].
Name it “style.css” and hit the [Enter] key.
Right-click the “style.css” file, and click on [Code Editor] to edit the file.
Paste this:
/*
Theme Name: Astra-Child
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/
Description: Astra-Child
Version: 1.0.0
Text Domain: astra-child
Template: astra
Custom CSS goes after this line.
*/Click on [SAVE & CLOSE].
The version doesn’t matter – it is the version of the Child Theme.
If you must add custom CSS code to your theme, you can do it after the last line of “*/,” which means the end of the comment section. But if you work with CSS, you already know this.
Note: The “Template” tag should have the name of the parent theme folder.
If you want to make sure, you can navigate to
/public_html/wp-content/themes
And check the exact folder name of your parent theme, which is “astra”. This is case-sensitive, so if this is lowercase, then the “Template” tag will also have the folder name in lowercase.
Return to the “astra-child” folder.
Step 3: Create “functions.php” and Enqueue Parent and Child Theme Stylesheets
The “functions.php” file adds features and functions to your child theme.
Right-click inside the “astra-child” folder, then hover over [New file], then click [TXT].
Name it “functions.php” and hit the [Enter] key.
Right-click the “functions.php” file, and click on [Code Editor] to edit the file.
Paste this:
<?php
// Embed the styles.css from the parent theme to the child theme and style.css of the child theme. Should be always on top of functions.php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>Click on [SAVE & CLOSE].
This code enqueues the parent theme’s stylesheet first, followed by the child theme’s.
Step 4: Activate Your Child Theme
Finally, it’s time to activate your child theme.
Log in to your WordPress admin dashboard.
On the left side menu bar, hover with the mouse cursor over [Appearance], then click on [Themes].
You’ll find your child theme listed here. Hover over the child theme, click [Activate], and you’ve successfully created a WordPress Child Theme.
Remember, your new child theme will now use its own style.css file instead of the parent theme.
Now that you know how to create a WordPress Child Theme, you can extend the functionality of your site while ensuring the integrity of the parent theme.
Don’t forget to clear caches if you use any.
Editing Files After You Create a WordPress Child Theme
Since you’ve activated the Child Theme, you can edit its files without using File Manager.
On the left side menu bar, hover with the mouse cursor over [Appearance], then click on [Theme File Editor].
You can select the file you want to edit on the right pane.
Once you made any changes, click on [Update File] at the bottom of the page.
Note: you can also edit other themes’ files even if they are inactive.
On the top right is an option: “Select theme to edit.” Select a theme, then click [Select].
Read More
You can read more about How to Create a WordPress Child Theme in the WordPress Docs.
The current article is "6.8. Create Child Theme" of our Complete SEO Guide Box.
Previous Article: 6.7. WordPress Widgets Turning off. Next Article: 6.9. Header/Footer Changes
If you find any mistakes or have ideas for improvement, please follow the email on the Contact page.