Wordpress child theme: how to create it?

Discover how you can enhance your Wordpress website by creating and using a Wordpress child theme.
wordpress child theme
Table of contents

If you are used to using WordPress, then you have often heard about child themes. However, if you are a beginner, their real purpose remains a mystery to you. In any case, you should know that they are not necessarily useful for everyone and that there are ways to do without them. However, when you find yourself in a particular situation, you should definitely use them to beautify your WordPress site. What is the Wordpress child theme? How to create it? What are the limits to its creation?

What is a child theme?

An example of a Wordpress theme

To understand what a child theme really is, it's important to understand what it is used for. Sometimes, you may choose a specific theme that does not meet your expectations in terms of customization. If it lacks important options, you are forced to add them manually with CSS, HTML or PHP code. Unfortunately, modifying the source code of your original theme can become a real problem, because the next time you upgrade, all the changes you made previously will disappear.

This is where the child theme comes in, which aims to safely override an already installed theme. By using it, you will be able to add PHP functions, manipulate Hooks, transform HTML templates that control rendering and add custom CSS code. In other words, the child theme is an empty base that will offer you a PHP file to add functions and a CSS file to add style. Here, you will be able to have the option to duplicate a parent theme to modify it.

Also read: the 15 best Wordpress themes

How does a child theme work?

Whatever WordPress theme you select to build your platform, it contains CSS style files and PHP functions. In other words, these are essential for the optimal functioning of your WordPress theme. Apart from these elements, a folder may contain files that vary depending on the themes you choose.

The appearance of your platform is conditioned by CSS and PHP. So, by acting on these key files, you have the possibility to tweak the layout, the script and the code used by the child theme. If a user browses your platform, your CMS will first display the child theme and complete the non-existent functionalities by using elements of an existing theme. Thanks to this action, you will enjoy all the beauty of your custom creation that embeds some elements of the parent theme.

Why choose WordPress child themes?

Do you want to create a new WordPress theme from an existing template while retaining most of its features? If so, using a child theme is the best solution you should turn to. It uses the features and settings of the parent theme, allowing you to get a custom design without endless lines of code. Since the child theme inherits the features of a parent theme, you don't have to worry about it. When a theme receives an update, you don't have to worry about the changes you made being erased.

Moreover, creating a child theme is a very easy task, as you don't need to dig deep into the root files of your WordPress site. Using the WordPress dashboard and the file manager in your control panel, you can perform specific tasks such as customizing CSS files and uploading files. With child themes, you can retain many of the visual aspects of the parent theme and standardize them across multiple domains.

Customization window of a css style file

If you opt for a parent theme from a reputable developer, regular security updates and patches will be supported. Finally, the last reason why you should use a child theme is that it offers security. A child theme's files are separate from its parent's, allowing you to keep track of the parts you've changed. This reduces the risk of confusion.

How to easily design a WordPress child theme?

To create a WordPress child theme, you must proceed step by step. Here is the detailed procedure to follow.

Create the style.css file

The CSS language language is used to act on the appearance of the content of a web page. By using it, you can enlarge the font, change the colors or add margins. Normally, if your theme offers you several customization options, you don't need to add custom CSS, especially since you need to have extensive knowledge to do so.

Example of a style.css file content for a child theme

If necessary, you will need the style.css file to ensure the proper functioning of your child theme. It will allow you to put CSS code that will replace the one of your master template. In the administration of your site, you will find a field dedicated to adding CSS. To access it, you must go to the "Appearance" tab and click on "Customize" and "Additional CSS". With this shortcut, you will avoid using a style sheet.

Opening the style.css file of the parent theme

In addition, each WordPress theme is composed of several folders and files with a similar architecture. The difference is that some templates have more files or folders than others. Note that each theme is composed of a mandatory style.css file. This is what you need to create your child theme. Once you have found it in the parent template folder, you need to open it with your code editor. Then you need to copy the first lines of the file and paste them into a file of the same name that you have created. This file will be used as a basis for the creation of your child theme.

The creation of the child theme file

To create the child theme file, you must first open the parent theme's style.css file using a text editor. Find the comments placed at the beginning of the file that start with the characters /* and end with */. Then select the header code with the above-mentioned characters and copy them into a blank document that you will name style.css. Note that this document must be created with a text or code editor, and it must keep its name as is to avoid unpleasant situations.

In the first line that displays "Theme Name", you must fill in the name of your child theme. Add a second line "Template", which will allow you to fill in the name of the parent theme folder. This line does not exist in the parent theme file. As for the other lines that make up your header, you don't need to modify them.

Depending on your preferences, you can even delete some elements. If the "Text Domain" line is present, you must keep it. You should do the same for the other credit or license lines. If you wish, you can modify the "Description" line. As for the "Version" line, it allows you to specify the version of your child theme.

Note that you should never leave a space before the ":" at the beginning of each line. If you do, your theme will not work. So be meticulous.

Create the functions.php file

functions.php is important for creating your WordPress child theme. By using it, you can queue the CSS of the parent theme and complete the coding of features in HTML and PHP. What you need to know here is that you don't have to interpret a code instead of the parent code as it was the case with CSS. You just have to add some code to the parent theme. Note that the code is usually the same for all child themes. You just have to copy and paste the code in a file named functions.php that you will have created for the occasion. Normally, the code should look like this:

< ?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

At this level, the file can work normally. However, you can add PHP code if needed to take advantage of new features with your child theme.

Create the screenshot.png file

For your information, you do not necessarily need the screenshot.png file. This is the image that illustrates your theme in the administration of your WordPress site. If you don't add this file to your child theme's folder, there will be no image to illustrate this template in the Appearance > Themes tab. This is recommended to make it easier to find your theme. If you choose not to implement it, your theme will still be functional. To create this image, you can use an image processing software. Also, any image with a resolution of 1200×900 px and named screenshot.png should suffice.

Assemble the WordPress child theme folder

At this stage, you have all the files that will allow you to create your child theme. The last step of the process will be to gather them in a folder with the name of the parent theme folder with the suffix -child. For example, if the name of the parent folder is OceanWP, the child theme folder will be named OceanWP-child.

In order to install the child theme on your platform, you must compress the child theme folder in ZIP format and upload it from the site administration. To do this, go to the "Appearance" tab and click successively on "Themes", "Add" and "Upload". After installing and activating the theme, you can make the customizations you want.

Window to customize or choose a Wordpress parent and child theme.

What are the problems that can be caused by using a child theme?

Using a child theme is beneficial, but it can also have some drawbacks. Here are some of the problems that can occur when using a child theme on your WordPress site.

Increasing the loading time of the WordPress site pages

When you use a child theme on a WordPress site, the chances of it loading slowly are high. This is because, when loading, WordPress first scans the stylesheet of the child theme and then the parent theme to access unavailable code. Unfortunately, this process can have a negative impact on the performance of your platform. However, the alteration of page display time should not be a problem for users or Google bots.

To reduce the display time considerably, it is recommended to keep the child theme code in an optimal state. To conclude, you should always monitor the performance of your site when using a child theme. Don't forget to implement a series of measures when your site becomes slow.

Dependency of the child theme on the parent theme

The developer of a parent theme may stop working on the theme or on some important features. He can also make a decision to add important changes to the theme that will undoubtedly have a considerable impact on the child theme.

Unfortunately, if a developer drops a parent theme, the child theme will not be able to take advantage of any patches or updates. As a result, it will be exposed to many security threats. With such exposure, you will be forced to stop using the child theme. Note that popular and genuine themes are unlikely to be discontinued. Therefore, if you choose one, you will have peace of mind. If so, addiction is a real problem.

What are the solutions to solve the problems of the WordPress child theme?

The hands of a person placed on the keyboard of a laptop on whose screen is displayed the word Wordpress with gears.

When you encounter problems while creating and installing a WordPress child theme, you should not panic. There are plenty of solutions that will help you solve the problem.

First, you need to check the function.php file. If you forget to queue the stylesheet of the child theme in this file, the site will load the parent theme by default. So, you have to make sure that the function.php file is optimal after modifying a theme.

Secondly, the "broken theme" error may occur while using your child theme. When this problem occurs, it may be because your child theme has been considered as an independent theme by your CMS. You need to fix this error by referencing the parent theme's function inside the CSS file of your child theme.

Third, some errors are caused by the fact that you have used the wrong file names. Note that WordPress requires a specific name for stylesheets and other files. If you do not use the style.css format, the system will not be able to find them and return them to the end user. So you need to be careful when naming your files.

Finally, you must remember to clear your cache. Without this action, a non-updated version of your child or parent theme may be displayed by your browser. Here, the easiest solution is to clear the WordPress cache. Also, don't forget to disable caching extensions if you use them. With these solutions, the various problems you are experiencing should be solved.

WordPress child theme: summary

Ultimately, when a theme lacks interesting features, you can add them through a child theme. This is a solution that allows you to change the style and other elements on your website. By following the different steps mentioned here, you will successfully implement this solution.

The Wordpress agency that designs and builds high quality and sustainable websites.