Learn How to Build a WordPress Child Theme

Learn How to Build a WordPress Child Theme – (Beginner’s Guide)

Do you intend to develop a WordPress child theme?

Learn How to Build a WordPress Child Theme – (Beginner’s Guide) | You’ll probably want to learn how to customize your WordPress site once you understand the fundamentals of WordPress. Anyone wishing to alter WordPress themes should start with child themes.

We’ll demonstrate how to build a child theme in WordPress in this post.

Why Is a Child Theme Necessary?

A WordPress theme that inherits the features, functionality, and aesthetic of another theme—the parent theme—is known as a child theme. The child theme may then be altered without affecting the parent theme.

Because they require less time and effort, child themes are the ideal approach to modifying a WordPress theme. You don’t need to write all of the formatting and functionality from scratch since the parent theme already has a ton of it.

They also make updating your WordPress themes secure. You won’t lose any personalization when you update the parent theme since you changed the child theme and not the parent.

If you’re happy with your child’s theme, you can even use it on another WordPress site.

Before You Start Building a Child Theme

You should be aware that you will be dealing with code while creating a child theme. To comprehend the adjustments you must make to the code to accomplish your objectives, you’ll need a fundamental knowledge of HTML and CSS.

PHP expertise is also beneficial. At the very least, you should be able to copy and paste code from other sources.

Practice in your local development environment is something we advise. A live WordPress site may be transferred to a local server for testing or fake material can be used while developing a theme.

Choosing a parent theme is the last step. You should choose a parent theme that resembles your ultimate objective in terms of style and features. The goal is to alter things as little as possible.

One of the standard WordPress themes, Twenty Twenty-One, will be used in this post.

Making a theme for your first child

By establishing the required folder and files, you may manually create a child theme. Alternatively, you may use a plugin to build a child theme.

The manual approach is beneficial since it will enable you to become acquainted with the files you will need during the session. If you have trouble producing those files, you may use the plugin technique.

There is just one way you need to utilize it, and the links below let you quickly access the one you like most.

Method 1: Using Code to Create a Child Theme.
Method 2: Using a plugin to create a child theme

Method 1: Using Code to Create a Child Theme.

First, you need to open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child theme. You can name this folder anything you want. For this tutorial, we will be naming it wpbdemo.

The first two files for your child theme must be created next. Open a text editor first, such as Notepad. Then, put the below code into the blank document.

Theme Name:   WPB Child Theme
Theme URI:    https://www.wpbeginner.com/
Description:  A Twenty Twenty-One child theme 
Author:       WPBeginner
Author URI:   https://www.wpbeginner.com
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild

Feel free to modify this code to suit your requirements as it provides information about the child theme. In the child theme folder, you just created, store this file as style.css. This is the primary stylesheet for your child theme.

The next step is to create a second file that will import, or enqueue, the parent theme’s stylesheets. To do this, create a new document in your text editor and paste the following code within 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');

When Twenty Twenty-One is used as the parent theme, this code will operate as intended. The WordPress Theme Handbook explains how to utilize alternative code if you use a different parent theme.

Use the plugin technique instead if you find it difficult to change the code for a different parent theme.

Put this file in your child theme folder as functions.php now. In order to provide your child theme functionality, we’ll return to this file later.

Note: Previously, the @import style.css command was used to import the parent theme. This approach will prolong the time it takes for the style sheets to load, thus we no longer advise it.

Now that you’ve finished creating a child theme, you should notice the WPB Child Theme when you go to Appearance » Themes. To use the child theme on your website, you must click the “Activate” button.

Your site will utilize the features and aesthetic of its parent theme as you haven’t made any changes to your child theme yet. Moving on to the next step, where you will configure the child theme, is now possible.

Method 2: Using a plugin to create a child theme

A simple-to-use WordPress plugin called “Child Theme Configurator” enables you to rapidly build and adjust child themes without writing any code.

The “Child Theme Configurator” plugin has to be installed and turned on first.

You must go to Tools » Child Themes in your WordPress dashboard after activation.

You’ll be prompted to choose a parent theme from a drop-down menu on the Parent/Child tab. The Twenty Twenty-One theme will be chosen.

The plugin will determine if the theme is appropriate for use as a parent theme after you click the Analyze button. Twenty-two is acceptable.

You will then be prompted to name the folder where the child theme will be kept and choose a location for the styles. We’ll keep everything set to default.

You’ll be prompted to choose the parent theme stylesheet access method in the section that follows. Once again, we’ll use the default configuration.

You must choose the “Click to Edit Child Theme Attributes” option when you reach Section 7. The specifics of your child’s theme may then be added.

The menus and widgets from the parent theme are lost when you manually create a child theme. They may be copied from the parent theme to the child theme using the Child Theme Configurator. If you are willing to do this, check the Section 8 box.

To create your own child theme, click the button one last time. The plugin will create a folder for your child theme and add the styles. For the CSS and functions.php files you’ll need to change the theme later.

Click the link towards the top of the page to preview the theme before activating it to make sure it works properly and looks decent.

Your child theme will launch if everything seems to be in order when you click the Activate & Publish button.

The child theme will now appear and function just like the parent theme at this point. We’ll then start customizing it.

Modifying the Child Theme

We will now tweak the child theme to give it a somewhat distinct appearance from the parent theme. To do this, we must add code to the style.css file, which calls for some CSS knowledge.

By copying and editing the parent theme’s existing code, you may streamline the process. You may locate the code by using the Chrome or Firefox Inspector tool, or you can copy it straight from the style.css file of the parent theme.

Pasting code from the Chrome or Firefox Inspector tool

Using the inspector tools that come with Google Chrome and Firefox is the simplest approach to finding the CSS code that needs to be changed. With the use of these tools, you can examine the HTML and CSS behind any web page element.

For instance, you may right-click on the post and choose Inspect to see the CSS that was used to create the post’s body.

Your browser screen will be divided into two sections as a result. You can view the page’s HTML and CSS at the bottom of the screen. The HTML and CSS may alternatively show up on the right side of the screen, depending on the settings of your browser.

The Chrome inspector will highlight various HTML lines in the top window as you move the cursor over them. Additionally, it will display the CSS rules that apply to the highlighted element.

You may experiment with modifying the CSS there to see how it might appear. Let’s experiment by altering the body’s background color to #fdf8ef.

Although the color of the website background will change, this is simply a temporary modification. You must copy this CSS rule and put it into the style.css file of your child theme to make it permanent.

body {
    background-color: #fdf8ef;
}

After saving your style.css file modifications, you should preview your website.

Repeat the procedure for any further changes you wish to make to the stylesheet for your theme. This page contains the whole stylesheet we developed for the child theme. You are welcome to experiment and change it.

Theme Name:   WPB Child Theme
 Theme URI:    https://www.wpbeginner.com/
 Description:  A Twenty Twenty-One child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.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;
}

Method 2: Copying Code from the Parent Theme style.css File

You may also copy some code straight from the style.css file of the parent theme. After that, you may edit it by pasting it into the style.css file of the child theme.

Because Twenty Twenty-One as a parent theme uses CSS variables a lot, this is especially helpful.

For instance, the first code reads as follows when we change the background color of the page above:

1	`background-color: var(--global--color-background);`

The variable “-global-color-background” is present here. Throughout the topic, the variable may be utilized in a variety of contexts. You just need to alter the variable’s value to instantly change the color in each of those locations.

You must open the style.css file in your text editor after navigating to /wp-content/themes/twentytwentyone in your WordPress installation folder. The location of the definition of -global-color-background may then be found.

1	`--global--color-background: var(--global--color-green);`

We learn that another variable defines the variable!

In reality, a wide variety of color variables are declared in the :root section of the parent theme style.css file. The Twenty Twenty-One theme employs 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;
}

After you choose the best color scheme for your WordPress site, you can easily change your child theme with these options.

You need to just copy and paste that code into the style.css file of your child theme. The color codes must then be changed to new ones that you choose for your own color scheme.

The whole child theme for your website will then automatically include those colors in various locations. Not only will it be faster, but it will also make sure that the colors in your theme are more consistent.

Be courageous. It’s not necessary for the green color variable to be green.

The same applies to other variables. Twenty Twenty-One style.css includes options for headers, line spacing, font families, and more. You may imitate any of them to create your own style. There is a CSS file in which to modify them.

The Template Files Can Be Edited

Different WordPress themes have various layouts. The Twenty Twenty-One theme, as an illustration, includes a header, content loop, footer widget area, and footer.

In the twentytwentyone folder, there is a distinct file for each segment. These are referred to as templates.

The region for which a template is utilized is often the name of the template. For example, the header and navigation portions are often handled by the header.php file, while the footer section is typically handled by the footer.php file.

Several files referred to as “content templates” may be used to manage certain parts, such as the content area.

Finding the file in the parent theme folder and copying it to the child theme folder are the initial steps in editing a template. You should then open the file in a text editor and make the necessary changes.

The footer.php file will be moved from the parent theme folder to the child theme folder in this tutorial. The next step is to open the file in a simple text editor, such as Notepad.

As an example, we’ll take down the “Powered by WordPress” link from the footer and replace it with a copyright warning. You must remove everything in between the <div class=”powered-by”> tags to accomplish that.

<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 -->

The code that appears in the example below after those tags must then be pasted in.

<div class="powered-by">
     <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
     </div><!-- .powered-by -->

When you save the file and go to your WordPress site, you should be able to see the new copyright notice.

Integrating New Features into Your Child Theme

A WordPress site’s functions.php file employs PHP code to add features or alter the platform’s basic functionalities. It works like a WordPress plugin and is automatically turned on when you use your current theme.

You’ll see instructions to copy and paste code snippets into functions.php in a lot of WordPress tutorials. However, if you include it in the parent theme, any further updates to the theme will overwrite it.

Therefore, when introducing customized code snippets, we advise utilizing a child theme. We’ll expand our theme’s widget area in this lesson.

This bit of code may be added to the functions.php file of our child theme to do that.

<?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' );
?>

When you save the file, your new custom widget area will be visible when you go to the Appearance » Widgets page of your WordPress dashboard.

We hope that you learned How to Build a WordPress Child Theme. Learn “How to Fix the WordPress Admin Missing Theme Customizer” as well.

Learn How to Build a WordPress Child Theme – (Beginner’s Guide)

Learn How to Build a WordPress Child Theme – (Beginner’s Guide)

Why Is a Child Theme Necessary?

Before You Start Building a Child Theme

Making a theme for your first child

Method 1: Using Code to Create a Child Theme.

Method 2: Using a plugin to create a child theme

Modifying the Child Theme

Method 2: Copying Code from the Parent Theme style.css File

The Template Files Can Be Edited

Integrating New Features into Your Child Theme

Learn How to Build a WordPress Child Theme – (Beginner’s Guide)

You May Also Like