How to Create a WordPress Child Theme: A Detailed Guide

Using child themes is one of the more useful ways to modify, tweak and test themes without worrying about the risks involved. Since it is the child theme that is modified and not the parent theme, theNo customizations are lost when updating the parent themeThe

If you encounter any problems after making changes, you can always revert to the original theme by deleting the created child theme.

What is a WordPress child theme?

Child themes, as the name suggests, are themes that inherit functionality from a parent theme. Edit Site WordPress ThemesThere can be risks as any customization changes may affect the core theme. Therefore, child themes can be used as a risk-free alternative to modify WordPress themes safely.

WordPress child themes exist in a different folder than the parent theme, and the child theme relies on the functionality of the parent theme unless modified. When you install a child theme in the WordPress dashboard, you will see that it is associated with the parent theme.

If a child theme is used on a website, then the WordPress core will prioritize checking the files of the child theme. If no changes are made to the child theme, WordPress will execute the files of the parent theme.

The thing to remember is thatChild themes cannot run independently, they must be installed at the same time as the parent theme.The

What is the difference between WordPress parent and child themes?

A parent theme is a complete WordPress theme that contains template files, stylesheets, CSS, JavaScript files and other resources needed to run a WordPress website. A child theme, on the other hand, inherits its functionality from the parent theme.

Below is a comparison table compiled to help you understand the difference between the two:

When to use child themes in WordPress?

Subthemes can be used in the following cases:

1. Want to customize the theme's templates or styles, but don't want to modify the parent theme's code.
2. Want to test new features or customize settings without taking risks.
3. A new theme is being developed and would like to use an existing theme as a starting point.
4. Want to create a custom theme for a specific client or project and build on an existing theme.

Prerequisites before creating a WordPress child theme

1. Backup Sites
Always make a backup of your website before creating a child theme. In the event of an accident, backups can be used to bring the site back to normal. You can use a plugin (such as Updraft) to make backups, or you can also make backups via theMainframe Control PanelCreate a backup.
If you've never backed up a WordPress website before, you can refer to our simple guide on how to backup a WordPress website.

2. Creating a staging environment
The recommended method is to make changes in a staging environment, test them for accuracy, and then apply those changes to the online environment. Creating a WordPress staging site allows you to safely test changes without affecting the online site.

How to create a child theme manually

Creating a child theme in WordPress is a matter of a few steps. To make it easier to fully understand the concept of sub-themes in WordPress, let's start with the Twenty Fifteen The default theme is used as an example to create a child theme with some modifications to help you guys understand how child themes work.

Step 1: Create a child theme folder

First, create a separate folder on your local system for all the necessary files required for the child theme.

Why create it on the local system?

This is because when the creation of all the files is complete, the folders can be uploaded to your website via FTP (File Transfer Protocol) technology.

Next, name the newly created folder so that it resembles the name of the parent theme and add the word "child" to the end of the name. For example, the site is using Twenty Twenty-Two ThemeThe

If I wanted to create a child theme for the Twenty Twenty-Two theme, I would name the folder Twenty-Twenty-Two-childThis means that the folder is a sub-theme folder of the Twenty-Two theme.

Step 2: Create a style sheet for the child theme

Next, you need to create a child theme folder named style.css file. This CSS file will contain all the style rules and declarations for the child theme.

To create CSS files, you can use a text editor like Notepad or a code editor like Sublime Text.

In order for the style sheet to work properly, it is necessary to add theHead Notes. The header comment contains basic information about the child topic, including the fact that it is a child of a particular parent topic.

The two most important elements of the annotation areTheme Name respond in singing Template catalog (Template). Theme files are usually located in the wp-content/themes folder.

Open Notepad, copy and paste these codes below into your file and save this file as .css File extension:

/*
Theme Name: Twenty Twenty Two Child
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentytwo
Description: Child Theme of Twenty Twenty-Two
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility- ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl- language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentytwentytwo-child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/Use it to make something cool, have fun, and share what you've learned with others.
/*
Theme Name: Twenty Twenty Two Child
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentytwo
Description: Child Theme of Twenty Twenty-Two
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility- ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl- language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentytwentytwo-child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/Use it to make something cool, have fun, and share what you've learned with others.
/*
Theme Name: Twenty Twenty Two Child
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentytwo
Description: Child Theme of Twenty Twenty-Two
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility- ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl- language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentytwentytwo-child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/Use it to make something cool, have fun, and share what you've learned with others.

After saving the file, go to the WordPress backend admin panel → exterior condition → thematicYou'll see. Twenty Twenty-Two Child The theme has appeared. The theme can now be applied to the website.

due to style.css file in the WordPress child theme directory, WordPress will load this style.css file, not the stylesheet of the parent theme. Other files, such as index.php,page.php respond in singing functions.phpthat are loaded from the parent theme.

However, since we haven't yet added a subtheme to the style.css You will need to import the parent theme's styles to define any styles in your theme. According to WordPress Codex best practices, it is recommended to import the styles of the parent theme via the functions.php The file adds the stylesheet to a queue (enqueue).

Step 3: Load the stylesheets of the parent theme and child theme

Unlike the other files in the WordPress child theme, the functions.php file works as follows: WordPress first loads the child theme's functions.php file and initialize the functions in it before executing the parent topic's functions.php Documentation.

As mentioned earlier, the best way to import stylesheets is via the functions.php The file adds it to a queue (enqueue).

In the child theme directory create a functions.php file and add these codes below:

phpCopy code
<?php<br>add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );<br>function enqueue_parent_styles() {<br>    wp_enqueue_style( 'parent-style', get_template_directory_uri().' /style.css' );<br>}
<?php<br>add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );<br>function enqueue_parent_styles() {<br>    wp_enqueue_style( 'parent-style', get_template_directory_uri().' /style.css' );<br>}
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().' /style.css' );
}

This code will call the parent theme file's style.css Style Sheet. If you need to edit the contents of the stylesheet, you can add the modified style rule to the child theme's style.css Documentation.

Step 4: Edit the style.css file of the child theme

In a WordPress child theme, you can add a new theme to your WordPress child theme folder by adding the style.css Define style rules in the file and edit style sheets easily. For example, if we want to change the color of a link, we just need to define a style rule in the child theme's style.css Add the following line of code to the file:

cssCopy code
a {<br>    color: #D54E21.<br>    text-decoration: none;<br>}
a {<br>    color: #D54E21.<br>    text-decoration: none;<br>}
a {
    color: #D54E21.
    text-decoration: none;
}

In this process, the subtopic style.css The document contains a description of the link (a) style rule overrides the parent theme's style.cssand the other styles remain unchanged.

Step 5: Edit single.php template file

Individual template files can be easily edited in child themes. For example, if you want to modify the single.php file, you must first copy the file from the parent theme folder and then paste it into the folder of the WordPress child theme.

Let's say we want to remove the comments section from a single post page. After copying the file to the child theme folder, we can edit the file to remove the following code:

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template().
endif;

In this process, WordPress will first check the child theme folder for the presence of the single.php file. If it exists, it will be loaded from the child theme folder; if it doesn't exist, it will fall back to load the file in the parent theme folder.

Similarly, we can edit any individual template file in the theme. This approach is great because it maintains the integrity of the parent theme and custom changes are not lost when updating the parent theme.

How to create child themes using plugins

If one is not a developer, does not have a technical background, or does not want to use manual methods, then one can create child themes with the help of plugins.There are several plugins available in the WordPress repository that can help create child themes quickly.

There are 3 most popular free child theme plugins:

1. Child Theme Wizard
2. WPS Child Theme Generator
3. WP Child Theme Generator

In this tutorial, we use the Child Theme Wizard plugin to generate child themes.

• switch toWordPress Dashboard > Plugins > Add New PluginThe
• Search in the right-hand search barChild Theme Wizard plugin.
• click (using a mouse or other pointing device)"Installation"Button.
• After installation, clickactivatebutton to activate the plug-in.

• After successfully activating the plugin, it will be displayed in the left WP admin bar in theartifactSee under the option"Subtheme Wizard" option

• Now, the choice must be madefather thematic. To do this, it is necessary to addcaption,descriptiverespond in singingegg thematic URLand then clickestablish egg thematicThe

• Now go toAppearance > Themesand view the newly created child theme.

That's with the plugin."Child Theme Wizard"A simple way to create child topics.

summarize

That's it! Now that you have understood what a WordPress child theme is and how it differs from the parent theme. In this article, the benefits of using a child theme are explained, as well as the prerequisites that need to be considered before implementation.

common problems

Q: What is a WordPress child theme?
A. A WordPress child theme is a child theme that inherits all the functionality, design elements and features of the parent theme. With a child theme it is possible to update the parent theme without losing custom modifications.

Q: What is the difference between a parent theme and a child theme in WordPress?
A. A parent theme is a complete and standalone WordPress theme with all core features, styles and templates. Whereas a child theme depends on the parent theme and is used to customize or override specific elements without modifying the parent theme's files.
In short, the parent theme is updated directly by the developer, while the child theme can retain custom modifications as it is updated.

Q: How do I create a child theme manually?
The following 5 steps can be followed to create a child topic manually:

1. Create a child theme folder
2. Creating a style sheet for the child theme (style.css)
3. Mounting style sheets for parent and child themes
4. Edit the style.css file of the child theme
5. Edit single.php template file