Know what is the child theme and what is its importance

Table of Contents

The child theme and its importance in the development of customizations are what I will speak about in this post.

 

Child-theme is a theme that inherits the features and styles of another theme, called the parent theme. The child theme is the recommended way to modify an existing theme. It is an excellent request for anyone who wants to change a theme and does not want to lose their customizations when it is updated by WordPress or by the company that created it.

 

Why use child themes?

 

There are many reasons why you should use a child theme:

 

If you modify a theme directly and the theme is updated, your modifications may be lost. Using a child theme, you ensure that your changes are preserved.

 

Using a child theme speeds development.

 

Using a child theme is one way to learn about developing WordPress themes.

 

How to create a child theme:

 

The directory structure of a child theme

 

A child theme consists of at least one directory (the folder where the theme is) and two files (style.css and functions.php) that you need to create, so we have:

 

The folder or directory of the child theme

 

  • The style.css file
  • The functions.php file

 

1. Create the folder or directory for the child theme that will be placed in wp-content / themes. It is recommended (although not mandatory, especially if you are creating a theme for public use) that the directory name of your theme is from the ‘-child’ suffix. You should also ensure that there are no spaces in the child theme folder name that will cause errors. In the next screen image, the child theme is called ‘twenty fifteen-child,’ indicating that the parent theme is the Twenty Fifteen theme.

 

2. Create the style sheet (style.css). The style sheet should begin with the following header:

 

 

Some observations:

 

  • Replace the sample text with the details relevant to your theme.
  • The Template line is the name of the directory or folder of the parent theme. The parent theme of our example is the Twenty Fifteen theme, so Template should be twenty-fifteen. If you are working with a different theme, you should modify this to the name of your theme.
  • The style.css file is the only required, but functions.php is needed to queue the files correctly.

 

3. The final step is to queue the parent theme style sheets and the child theme. Note that the previous child theme creation method used @import: this method is not considered a good practice. Currently, the proper practice is to queue style sheets using wp_enqueue_scripts action and wp_enqueue_style () in the functions.php file of your child theme.

 

 

The style sheet for your child’s theme will usually load automatically. If not, you’ll need to line it up too. Defining ‘parent-style’ as a dependency will ensure that the child theme style sheet is loaded shortly after.

 

 

Your child theme is now ready to be activated. Log in to the administrative area of your WordPress control panel by going to Appearance > Themes. You should see your child’s theme listed and ready for activation. (If your WordPress installation has the multi-site option enabled, you may need to switch to the network control panel to allow the theme (under the Network Admin Themes tab). You can then go back to your specific WordPress site administration panel to activate your theme-child).

 

Note: After activating the child theme, you may need to save it again in your menu under Appearance> Settings> Menus.

 

Archives Templates

 

If you want to change more than just the style sheet, your theme may overlap some parent theme files: Add a file of the same name to the child theme’s parent, and this will overwrite the equivalent file in the parent theme directory when your site loads. For example, if you want to change the PHP code for the site’s header, you can include a header.php in your child theme’s directory, and this file will be used instead of the header.php of the parent theme.

 

You can also include child-theme files not included in the parent theme. For example, you may want to create a more specific template than the one found in your central theme, such as a template for a particular page or category of file.

 

Using functions.php

 

Unlike style.css, the functions.php of a child theme does not replace its parent counterpart. It is instead loaded beyond the parent functions.php. (Specifically, it is loaded before the parent file.

 

In this way, the functions.php of a child theme provides a clever method with no problems in modifying the functionality of a parent theme. Let’s say you want to add a PHP function to your theme. The quickest way would be to open your functions.php file and place the function there. But this is not smart: The next time your theme updates, its position will disappear. But there is another, more innovative way. You can create a child theme, add a functions.php file, and add its function to that file. The process will do the same work, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php from the parent theme into functions.

 

The functions.php structure is simple: A PHP tag is opened at the top and below. In it, you can put as many functions as you wish. The example below shows an elementary function.php file that does a simple thing: Adds a favicon link to the head element of HTML pages.

 

 

Tip for theme developers: The fact that the child theme functions.php is first loaded means that you can make the functions of your theme users pluggable, that is, replaceable by the child theme by declaring it conditionally, for example:

 

 

In this way, a child theme can replace a PHP function of the parent theme by simply declaring it in advance.

 

Referencing/Including Files in Your Child Theme

 

When you need to include files that reside within the directory structure of your child theme, you will use get_stylesheet_directory (). Because style.css of the parent template has its child theme style.css, and its style.css resides in the root subdirectory of its child theme, get_stylesheet_directory () points to its child theme directory (not the directory of the parent theme).

 

Here is an example, using require_once, which shows how you can use get_stylesheet_directory when referencing a file stored within the child directory’s directory structure.

 

Require_once (get_stylesheet_directory (). ‘/myincluded_file.php

 

Well, that’s it, folks. I hope this article gives a good first glimpse of how the child themes that are “hand in hand” work to modify the themes and maintain them without losing what was developed when the Pai themes are Updated by their manufacturers.

 

Source: codex.wordpress.org

 

Fully Managed WordPress Hosting

Nestify’s AWS powered dedicated CPU servers keep your sites fast, secure, and always up to date.

Want faster WordPress?

WordPress Speed Optimization

Try our AWS powered WordPress hosting for free and see the difference for yourself.

No Credit Card Required.

Whitelabel Web Hosting Portal Demo

Launching WordPress on AWS takes just one minute with Nestify.

Launching WooCommerce on AWS takes just one minute with Nestify.