Do you want to create a child theme in WordPress? Also, want to customize the theme to add the new functionality? If YES, you’re in the right post. Please, READ ON!
As time goes by, you’ll be more acquainted with WordPress. Perhaps, you want to learn how you can customize your WordPress website later on. Having that said, child themes are a great way to learn customization things when you want to customize WordPress themes.
In this entire article, we’ll guide you to learn how you can create a child theme in WordPress and customize it accordingly.
Table of Contents
A child theme totally complements its parent theme. A child theme bears the same features, functionalities, and style as the parent theme. As a result, you can make changes to the child theme as much as you want without touching the parent theme at all.
However, in order to save time and effort, child themes are the best. Because you can customize the theme right away. Most importantly, no coding is required from scratch since the parent theme already has the features and functionalities.
Besides, updating a WordPress theme will be safer because of having a child theme. How so? Since you make changes to your child theme, not the parent, so in the time of updating the parent theme no customization will disappear.
Last but not least, you can use the child theme that you customized and are happy with, on another WordPress site. This is the cherry on top! Right?
Whenever you want to create a child theme in WordPress, you need to be aware of it. Because you’ll be working with code and all. Therefore, a basic understanding of HTML and CSS will help you to create and customize the code in your child’s theme.
Moreover, if you have knowledge about PHP as well, this will add an extra definitely. Last, code snippets copying and pasting from other sources is the knowledge you must have at least to create a child theme in WordPress.
The initial recommendation for you: practice a local development environment. Either you can move a live server to local or use dummy content for testing purposes.
And finally, you have to choose a parent theme. Choose or pick a theme that matches your end goal. For example, pick a theme that has a similar appearance and features that goes with the goal child theme. The main goal is, to make changes as less as possible.
In this post, we’ll be using the Twenty Twenty-One theme which is the default WordPress theme.
Either you can create a child theme in WordPress using a manual process or using a plugin. Both the method will be explained below. The choice will be yours which one you want to go with. In the manual process, you have to create the required folders and files.
Our recommendation is that you should go with the manual process. Why so? Because this process makes you familiar with the files and folders you need later on in this post. On the other hand, you should go with the plugin method if you face difficulties creating the required files.
Well, let’s start with the manual process first. And with the plugin method accordingly.
To begin, navigate to your WordPress installation folder to open /wp-content/themes/ and create a new folder for your child theme. You may call this folder whatever you wish. We’ll call it wpbdemo for this tutorial.
The next step is creating the first two files that are needed for the child theme. Begin by opening a text editor, such as Notepad. Then, in the empty document, insert the following code.
Theme Name: WPB Child Theme Theme URI: https://www.themeLooks.com/ Description: A Twenty Twenty-One child theme Author: ThemeLooks Author URI: https://www.themelooks.com Template: twentytwentyone Version: 1.0.0 Text Domain: twentytwentyonechild
This code provides information well about child themes, so modify it to suit your needs. Save this file as style.css in the newly created child theme folder. This is the primary stylesheet for your child theme.
The next step is to build a secondary file that will import, or enqueue, the parent theme’s stylesheets. To do so, open a new text editor document and paste the following code into it.
/* enqueue scripts and style from parent theme */
function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');
Whenever Twenty Twenty-One is being used as the parent theme, this code will function. If you choose a different parent theme, then this will not work.
If you are having trouble updating the code for a different parent theme, you might consider using the plugin technique instead.
Save this file in your child theme directory as functions.php. This file will be revisited later to add features to your child theme.
N.B: Previously, the parent theme was imported into style.css with the @import command. We no longer suggest this strategy since it increases the time required to load the style sheets.
You’ve now established a very simple child theme, and the WPB Child Theme should be visible when you go to Appearance > Themes. To begin utilizing the child theme on your website, hit the Activate option.
This is how you’ve completed creating a child theme in WordPress. However, as you didn’t change anything to your child theme so your WordPress site will use the parent theme’s features, appearance, and functionalities.
How to customize your child theme? Ok, you’ll get all these in the following section.
Child Theme Configurator is a simple WordPress plugin that allows you to rapidly build and adjust child themes without requiring code.
The first step is to install and activate the Child Theme Configurator plugin. For additional information, visit our step-by-step guide to installing a WordPress plugin.
After activation, go to Tools > Child Themes in your WordPress admin area.
Now, you’ll be asked for selecting a parent theme from the Parent/Child tab dropdown. As we said, Twenty Twenty-One is our parent theme for this post. Well, select it accordingly.
When you click the Analyze button, the plugin will determine whether or not the theme is acceptable for usage as a parent theme. Twenty-one is fine.
Following that, you will be prompted to name the folder in which the child theme will be kept and to select a location for the styles to be saved. We’ll stick with the default settings here.
Now, you will be prompted to select how the parent theme stylesheet will be accessible in the section that follows. We’ll use the default configuration once more.
When you reach Section 7, you must click the ‘Click to Edit Child Theme Attributes‘ button. The specifics of your child theme can then be filled in.
When you manually create a child theme, you lose the parent theme’s menus and widgets. They may be copied from the parent theme to the child theme using Child Theme Configurator. If you want to do this, check the Section 8 box.
Finally, click on the ‘Create New Child Theme‘. By clicking so, the plugin creates a folder for your child theme along with the style.css and functions.php files. You’ll use these files later to customize the child theme.
Please remember to preview the child theme to see if everything is okay before activating it. For previewing the child theme. Click on the link near the top of the screen.
If all appears to be in order, click the Activate & Publish button to make your child theme live.
The child theme will appear and perform precisely like the parent theme at this point. Then we’ll start customizing it.
In this section, you’ll get familiar with the process of how you can customize the child theme to make it a bit different from the parent theme. However, we’ll be doing this by adding code to the style.css file, the file we’ve created previously. Additionally, some CSS familiarity is also needed.
Moreover, the process could be very simple when you copy and modify the code of your parent theme to the child. How do you find those codes of parent theme? Well, either you can get it from Chrome or Firefox Inspector or directly from the parent theme’s style.css file.
The inspector tools included with Google Chrome and Firefox are the best approach to find the CSS code you need to change. These tools allow you to examine the HTML and CSS code behind any web page element.
For example, if you wish to inspect the CSS used for the post’s body, hover your cursor over it and right-click to select Inspect.
By doing so, your screen split into two halves. One part will contain the HTML and one is CSS. Usually, it appears at the bottom of the screen, but it may appear on the right side of the screen. It totally depends on your browser’s setting.
The Chrome inspector tool will highlight distinct HTML lines in the top window as you move your cursor over them. It will also display the CSS rules for the highlighted element.
You may experiment with CSS right there to see how it looks. Let’s try adjusting the body’s color pallette to #fdf8ef.
The page background color will change, although this is simply a temporary modification. To make it official, copy this CSS rule and put it into the style.css file of your child theme.
body {
background-color: #fdf8ef;
}
Save your modifications to the style.css file and then preview your website.
You may then repeat the process for any other changes you wish to make to your theme’s stylesheet. Here is the whole stylesheet for the child theme that we generated. Feel free to explore and make changes.
Theme Name: WPB Child Theme
Theme URI: https://www.themelooks.com/
Description: A Twenty Twenty-One child theme
Author: ThemeLooks
Author URI: https://www.themelooks.com
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}
You may also just copy some code from the parent theme’s style.css file. You may then copy and paste it into the style.css file of the child theme and alter it.
Because Twenty Twenty-One makes significant use of CSS variables, this is especially useful when used as a parent theme.
For example, when we changed the background color of the page above, the previous code seemed to be:
background-color: var(--global--color-background);
‘–global–color-background’ is a variable here. Besides, it can be utilized in different theme locations. And, in order to change the color to all those locations at once, just need to change the color value of the variable.
To do so, go to the WordPress installation folder and find /wp-content/themes/twentytwentyone. Once you find the folder, open the style.css file. Now the text editor helps you to find where the –global–color-background variable is defined.
--global--color-background: var(--global--color-green);
We realize that another variable defines the variable!
In fact, a variety of color variables are declared in the:root section of the parent theme’s style.css. The Twenty Twenty-One theme contains this color scheme.
:root {
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
}
You may apply the same logic to other variables. Twenty Twenty-fashion One’s sense. CSS variables include font types and sizes, headers, line spacing, and other things. You can adopt either of these to your fresh style or you may change them in the CSS file.
Each WordPress theme has a unique layout. The Twenty Twenty-One theme, for example, contains a header, content loop, footer widget section, and footer.
In the twentytwentyone folder, each segment is handled by a distinct file. These are known as templates.
Templates are often called by the area in which they are employed. The footer part, for example, is often handled by the footer.php file, whereas the header and navigation portions are typically handled by the header.php file.
There might be multiple files dealing with certain sections, like the content area.
It is necessary to copy the file in the parent theme folder into the child theme folder if you intend to modify a template. Afterward, open the text file in an editor and make the changes you want.
We will move the footer.php file from the parent theme folder to the child theme folder in this tutorial. After converting the file, you need to open it with a text editor like Notepad.
The ‘Powered by WordPress’ link will be removed from the footer area and a copyright warning will be added. You need to remove everything between the *div class=”powered-by”> tags in order to achieve this.
<div class="powered-by"> <?php printf( /* translators: %s: WordPress. */ esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ), '<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>' ); ?> </div><!-- .powered-by -->
In the example below, you need to paste in the code below those tags.
<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights
reserved.</p>
</div><!-- .powered-by -->
Save your new copyright notice and visit your WordPress website to see it.
With functions.php, you can add features to a WordPress website or change its defaults. Your current theme is automatically activated with this plugin when you install it for your WordPress site.
A number of WordPress tutorials request that you copy and paste snippets of code into functions.php. Adding it to the parent theme, however, will cause it to be overwritten with every update.
It’s for this reason that we recommend adding custom code snippets using a child theme. The following tutorial will help you add a new widget area to your theme.
You can accomplish this by adding this code snippet to the functions.php file of your child theme.
<?php
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain'
),
'description' => __( 'A custom widget area', 'text_domain'
),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
?>
After you have saved the file, you will be able to see your new custom widget area under Appearance > Widgets in your WordPress dashboard.
You might make mistakes if you haven’t created child themes before. Be patient, however.
Typically, syntax errors happen when you overlook something in your code.
If something goes wrong, you can always start over. You can, for example, delete a file that was necessary for your parent theme and start over after deleting it.
We hope this post was useful to get a full insight into how you can create a child theme in WordPress and customize it as you like. If you’re an enthusiast about WordPress, then you may take a look at how you can uninstall and delete a WordPress theme, also you look at this guide on how to set up WooCommerce on WordPress if you wish to make an e-commerce website using WordPress.
If you like this post, be with ThemeLooks and subscribe to our WordPress video tutorials on YouTube. We may also be found on Twitter, LinkedIn, and Facebook.
