blog posts

WordPress

How to Create a WordPress Child Theme?

In this article, we discuss the child and parent theme, the main concepts behind them, and the creation of this theme in WordPress:

Before continuing the article, if you need a WordPress host, go to the Ded9.com site and see the great plans at great prices.

What is the parent theme?

We start by clarifying some of the basic concepts behind WordPress themes. First, we look at parent themes.

Any standard WordPress theme can be a basic theme, regardless of whether you download it from the official repository or a third-party website. Here’s how it works.

The WordPress theme is a set of files that determine the Appearance of your website. Each theme has its directory under the /wp-content/themes folder in your site’s document root. A database entry tells WordPress which folders belong to the active theme, so the content management system knows which CSS, PHP, JavaScript, and media files to display the site’s Appearance. If you want to modify the layout to suit your specific needs, you need to add your custom code to these files.

The thing is, WordPress themes receive regular updates, which you should install as soon as they become available. In addition to providing new features that improve your website’s user experience, these updates include critical vulnerability patches for your site’s security.

When you update a theme, you effectively download new versions of the theme files, overwriting the old versions in the process. In other words, all your work will be lost if you update a customized themed.

What is the child theme?

A child theme works with the parent theme to allow you to maintain your custom code without preventing important updates from being installed.

In some ways, it acts as a standalone theme as it has its folder in the /wp-content/themes folder and is available on the Appearance> Themes page of the WordPress dashboard.

However, instead of containing all the templates that determine the look and function of your site, it only holds your custom design elements. If your changes are limited to the site’s typography, your child theme will only consist of two files.

WordPress reads the custom code from these files and reverts to the main theme for the rest of your site’s Appearance.

You can update the parent theme whenever there is a new version without touching the child theme and losing your custom look.

Create a child theme

There are several ways to set up a child theme folder: manually or with a plugin. Less experienced users prefer the second method. There is certainly no shortage of options.

The term “child theme” returns a small number of search results in the official WordPress plugin repository, with each plugin offering a wide range of options and features.

The steps you need to take to set up a child theme through a plugin depend on the plugin itself. However, it’s fair to say that you’re unlikely to have a serious problem. Most plugin vendors try to make their product’s user interface as intuitive as possible, and there’s often very little to tell you what each button does. In some cases, you can also rely on the technical support of the plugin developer.

Manually creating a child theme is a bit more complicated. However, it can help you better understand how themes generally work, which can be useful when customizing your website’s look.

If you’re doing this for the first time, using a staging environment or test installation might not be a bad call. It’s unlikely you’ll seriously damage the site, but you can never be too careful. Additionally, you need to ensure everything works before making changes to production.

To manually set up a new child theme in WordPress, you must create a new folder and set up some files. Those who are comfortable working with the command line can use SSH.

Although most people prefer to do this through the Control Panel File Manage, for example, we create a child theme of Twenty Twenty-Two – the default WordPress theme at the time of writing. Let’s see the detailed steps:

1. Go to /wp-content/themes and set up a new child theme folder

If your site is on the main domain of your account, its main document folder should be public_html (unless you changed it yourself). Could you open it and go to wp-content/themes? You will see the folders of themes currently installed on your website.

To set up a new folder, you need to create a folder for it. Although you can use a random name, the best practice is to append “–child” to the parent theme name. In this case, we name the folder twenty-twenty-two-child”.

2. Set a stylesheet – style.css

The main style.css file of the child theme’s theme usually contains most of the customizations. Using your file manager, you can create it directly on the server via New > New File.

3. Queue your style sheet

In addition to containing your custom typography, the style.css file also points WordPress to the main theme. To set a child theme – theme name and template – you need a few main lines in the style.css file. Here it should look like:

/*
Theme Name: Twenty Twenty-Two
Template: [the name of the parent theme]
*/
v

Note: You need the name of the parent theme folder in wp-content/themes, not the name you see in the WordPress dashboard.

Don’t forget to add /* at the beginning and */ at the end of this section.

You can add additional information if you wish. For example, if you are distributing a theme, you can include the author, version, some contact details, etc.

When finished, save and close the file.

4. Create a functions.php file

If you look inside the WP dashboard, you’ll see that the theme in the child theme is already listed on the Appearance > Themes page.

What you need to do now is connect it to the main thread. To do this, you need to create a second file called functions.php in the theme’s child folder:

5. Connect the child theme to the main theme

Open the functions.php file and put the code you see below:

<?php add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ ); function enqueue_parent_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ ); } ?>

The code above means that the child theme will inherit the style and functionality of the parent theme while retaining any customizations you add to it.

6. Activate the theme

Finally, it’s time to go back to your WP dashboard and activate the new child theme from the Appearance > Themes page.

Conclusion

In this article, we have provided you with the WordPress child transparent theme and how to make them, including the necessary codes. Good luck!