How to Create Child Theme in WordPress

Create child theme is a critical WordPress aspect that can perplex beginners. You may have encountered the term and opted to forgo creating them due to their perceived complexity.

However, based on our experience, create child theme can effectively prevent numerous issues in the future. They safeguard valuable customizations, enable you to experiment without jeopardizing your site and streamline theme updates.

Create Child Theme in WordPress

Requirement of Create Child Theme and How Does It Work

Create child theme in WordPress allows you to inherit the fantastic features, functions, and styles of another theme, the parent theme. By doing so, you can override or extend inherited properties through file additions or modifications.

While it’s possible to customize your WordPress theme without a child theme, there are compelling reasons to consider using one.

  • Create Child themes can safeguard your customizations during theme updates, ensuring they remain intact and unaffected. Without a child theme, any tweaks made directly to the parent theme may vanish during updates.
  • Furthermore, child themes provide a secure platform for experimenting with new designs or features without impacting your site’s original theme. Using child themes can significantly streamline the development process if you possess coding skills.
  • Their more straightforward file structure allows you to focus solely on modifying the parts of the parent theme that you want to change or expand. Embrace the power of child themes to unleash your creativity and protect your customizations.

Preparation Before Creating a WordPress Child Theme

Many WordPress users experience excitement that quickly turns to frustration when they encounter errors while delving into the technical aspects. We understand the feeling. It’s crucial to have a solid grasp of what you’re getting into before creating a child theme.

To set the stage for success, here are a few essential steps we recommend you take before diving into this comprehensive guide:

  • You must be aware that you will be working with code. It is crucial to understand HTML, CSS, PHP, and JavaScript to comprehend the necessary changes. Further information can be found in the WordPress theme handbook.
  • Select a parent theme with the exact website design and features you desire. Find one that requires minimal changes. If necessary, refer to our checklist of tasks to complete before switching WordPress themes.
  • When developing a theme, it is crucial to use a local or staging site to prevent unintentional errors on the live site.
  • It is essential to back up your website before making any changes. If you’re new to this, we strongly recommend using a backup plugin like Duplicator.

There are multiple ways to create a child theme based on your current theme. One method involves writing code manually, while others involve using a plugin, which is more user-friendly, especially for beginners.

The manual method might seem daunting if you’re not very technically inclined. However, we suggest reading through it to familiarize yourself with the process and the files involved, even if you use a plugin. Let’s go over how to create a child theme in WordPress.

Create Child Theme in WordPress Manually

You can access your WordPress installation folder by opening the /wp-content/themes/ directory. You can use your WordPress hosting’s file manager or an FTP client to do so. We strongly recommend using the file manager for simplicity.

If you are a Bluehost client, log in to your hosting account dashboard, go to the ‘Websites‘ tab, and press ‘Settings.’

Hosting Account Dashboard

Navigate to the ‘Quick Links‘ section in the Overview tab and select ‘File Manager.’

File Manager on Quick Links

Once there, access your website’s public_html folder and open the /wp-content/themes/ directory. Then, click the ‘+ Folder‘ button in the top left corner to create a new folder for your child theme.

File Manager Window

You have the freedom to name the folder as you wish.

Here, we will use the folder name “twentytwentyone-child” as we are going to use Twenty Twenty-One as our parent theme. Once finished, simply select ‘Create New Folder.’

Create New Folder Option

To create the first file for your child theme, open the folder you just made and press on ‘+ File.’ Using an FTP client, you can use a text editor like Notepad and upload the file later.

Creating File

Name this file ‘style.css‘ as it is your child theme’s main stylesheet and will contain information about the child theme. Then, navigate to ‘Create New File.’

Create New File

To change the style.css file, right-click on it and select ‘Edit‘ to open a new tab.

Choose Edit Option

In the new tab, paste the following text and make adjustments as needed.

Enter Coding

After making changes, click ‘Save Changes‘ to save the file.

Press Save Changes

Create a second file named functions.php and import or enqueue the stylesheets from the parent theme’s files.

After creating the file, make sure to add the following wp_enqueue code.

Add wp_enqueue Code

After completing the steps, save the file as you did in the previous step. You have now successfully created a basic child theme. When you navigate to Appearance » Themes in your WordPress admin panel, you should be able to see the Twenty Twenty-One Child option.

Press the ‘Activate‘ button to begin using the child theme on your site.

Activate Child Theme

Create Child Theme Classic in WordPress With a Plugin

This method involves using the Child Theme Configurator plugin, which is easy to use and allows you to create and customize WordPress child themes without writing any code.

It’s important to note that this plugin works best with classic (non-block) themes. To begin, you’ll need to install and activate the WordPress plugin.

Once activated, go to Tools » Child Themes in your WordPress dashboard. Within the Parent/Child tab, you’ll be prompted to choose an action. Simply select ‘CREATE a new Child Theme‘ to start the process.

Create a New Child Theme

First, choose a parent theme from a dropdown menu, such as the Hestia theme. Then, press the ‘Analyze’ button to ensure the theme is suitable as a parent theme.

Select The Hestia Theme

First, you must name the folder where the child theme will be stored. You can choose any name for the folder. Below that, you must decide where to save the new styles: in the main stylesheet or in a separate one.

The main stylesheet is the default stylesheet that comes with your child theme. Saving new custom styles to this file means you will directly modify the main styles of your child theme. Every modification will overwrite the original theme’s style.

The separate option allows you to save new custom styles to a separate stylesheet file. This is useful for keeping the original theme’s style intact and not overwriting it. For this demonstration, we will choose the first option.

However, as you become more creative with your child theme customizations, you can always go through this process again and select the second option.

Select Primary Stylesheet

When moving down, selecting how the parent theme’s stylesheet will be accessed is crucial. The default option, ‘Use the WordPress style queue,’ should be chosen as it enables the plugin to determine the appropriate actions automatically.

Use The WordPress Style Queue

Press the ‘Click to Edit Child Theme Attributes‘ button to fill in the details of your child theme.

Click to Edit Child Theme Attributes

When creating a child theme manually, you will lose the parent theme’s menus and widgets. However, with Child Theme Configurator, you can effortlessly copy them from the parent theme to the child theme. Simply check the box in step 8 if you’d like to do this.

Press the ‘Create New Child Theme’ button to generate your new child theme.

Create New Child Theme

The plugin will generate a folder for your child theme and include the style.css and functions.php files that you can use to customize the theme later.

Before activating the theme, it’s essential to click the link at the top of the screen to preview it and ensure that it looks good and doesn’t cause any issues on your site.

Preview Child Theme

If everything functions properly, click the ‘Activate & Publish’ button. Your child theme will now go live and look and behave exactly like the parent theme.

Activate and Publish

Create Child Theme Block in WordPress With a Plugin

If you use a block theme in WordPress, you can easily create a child theme using the Create Block Theme plugin.

First, you need to install and activate the WordPress plugin. Then, navigate to Appearance » Create Block Theme. Simply select ‘Create a Child of [current theme name]’, and you’re good to go.

Create Block Theme Option

Fill out your child theme’s information. If you’re using Twenty Twenty-Four, name it Twenty Twenty-Four Child. Include a description and author for the child theme. When you’re finished, press the ‘Create Child Theme‘ button.

Create Child Theme Option

The plugin will create and install the WordPress theme ZIP file in your admin area. Upon completion, your website will automatically activate the newly created child theme. You can verify this by navigating to Appearance » Themes.

Activate Child Theme

Conclusion

Creating a child theme in WordPress is essential for anyone seeking to customize their website while maintaining the integrity of the parent theme. By utilizing child themes, developers and site owners can uphold a powerful and dynamic website that mirrors their distinct vision without compromising performance or security.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *