Learn How To Create Child Theme In WordPress: An Official Guide

Learn How To Create Child Theme In WordPress: An Official Guide

As we have discussed in our another article – A WordPress theme is basically a collection of stylesheets and templates that are used to clarify the appearance of a WordPress site. But, in this post, we are going to explain to you what is a child theme and how to create child theme in WordPress. Let’s see:

The topic covered post are mentioned here pointwise for your ease to find the relevant piece of information:

What is a Child Theme?

A child theme in WordPress is a theme that gets own features & functionality from a parent theme. Often, these themes are used during the customization of an existing theme so that the upgradeability of that existing theme is not lost.

Before sometime, there was no way to update a WordPress theme. As you updated a WordPress theme, you lost all your custom styling and changes that you made. Therefore, looking at this problem, WordPress support team decided to introduce its concept.

Further, it allows users to make changes in the styling of the parent theme and add/edit features without losing the upgradeability of that parent theme. According to the theory, any theme can have child theme, but all WordPress theme cannot good parent themes.

However, a good parent theme is also known as theme frameworks in which its own action hooks and filters are included. The best is it allows developers to make powerful WordPress site by using child themes in a bit of time.

Let us consider an example, a child theme is like a mirror image of a theme. Whatever you make changes for the reflection will not affect the real subject, but if any changes made in the real subject, it will affect reflection.

Means to say, if we make any changes in it, it will not affect the WordPress parent theme but if we make any changes in the parent theme, it will obviously affect the child theme.

Now we will show you the advantages and disadvantages:

Pros and cons of child theme

Pros

Likewise other things, there are also some pros and cons of it, elaborated as follows:

1. Safe Updates

As we have discussed above, it automatically attains the characteristics, styles, and templates of the parent theme. Therefore, using it you can make changes to your site without modifying the parent theme.

Whenever a parent theme update comes, you can update it safely because all your modifications are saved in your child theme.

2. Easy to extend

A robust framework based child theme allows you to create a powerful site without writing additional code. Additionally, you can edit only the template files and function that you need without going through other template files. You can also add new features, functionality and many more things.

3. Fallback Safe

During the complete theme creation process, you need to keep all possible scenarios and code in your mind. And during WordPress child theme development, if you forget to code for something, don’t worry, as the fallback option, the functionality of parent theme always available.

Cons

1. The biggest disadvantage is the time that you can use to learn about parent theme. You should have entire knowledge of the same while you are working with a powerful framework. Because each & every framework has its own hooks and filters which is very important to know.

2. Your developers of parent themes may leave interest and abandon it. Dropping a feature that you used in your child theme, or making a change that totally destroys it is not more harmful to your site. Because all good themes are open source and GPL.

Why you should use WordPress child themes?

You can use a WordPress child theme directory to save your time. Most of the WordPress developers use this WordPress feature to speed up their site development. However, most of the WordPress themes provide a lot of features and customization options to use. Hence, if needed, users create it yourself to tweak a parent theme without losing its upgradability.

Further, making it in WordPress can be very easier as a new style.css file in a new folder. Remember that all you need a line that is situated in the header file of your new style.css. Because this line defines the templates (For reference, you can see the Codex.)

Going forward, a powerful child theme can have multiple templates as a parent theme and also have templates files that are not even available in the parent theme.

When you should use a child theme?

The use of it depends on your requirements. Most of the sites we create all are child themes of Genesis framework. In some exceptional cases, when the project is quite difficult or quite simple, then we create it as a standalone custom WordPress theme. However, creating the Genesis framework child theme help us to complete that particular project.

We highly suggest you use it only in mentioned below cases:

  • When you are adding constantly new function to your theme’s function.php file.
  • Or when you are adding/editing the style.css file of your theme.

Note: If you are changing the style of a few elements, it’s better to use a custom CSS plugin. And if you change the whole color scheme, so definitely use a WordPress child theme.

choosing a good parent theme is necessary

According to the theory, all WordPress frameworks can have parents themes, but not all parent themes are frameworks. However, a good WordPress theme can have a child theme. But not all of them can be used as theme frameworks.

In addition, you should not create a child theme by replacing multiple parent theme files. Doing the same may be harmful to your site.

For example. If you want to create a child theme of Twenty Eleven Theme. You already had the style.css, and function.php file. On the top of that, you see, this is not as the footer, so you have to add the footer.php. Same process for the header. In this case, you should not use the Twenty Eleven theme as a parent theme.

Instead of this, you should use it as a starter theme that you convert into your custom theme.

At last, use it when you want functionality, features, and uniqueness of a robust parent theme without writing extra code.

How WordPress child theme work?

You should know that a child theme is available in a separate directory than the parent theme. Next, each & every WordPress child theme directory needs to contain its own function.php and style.php files. However, we can also add some other customized files and files types as per requirement. But those files (that can be added as needed) are recommended for the theme to function properly.

More so by using the relevant .php and .css files you can edit each & everything from layout and styling parameter to coding and scripts that child theme uses, even if those WordPress child themes enqueue scripts are available in the parent theme directory or not.

If you are using it, then WordPress will first check your child theme to see if there is any specific functionality or not. If it does not, then it will use the parent theme. This is one of the best features because it lets you edit only what you want.

Even if you modify any single character in your WordPress theme, then child themes should always be used. Because it saves you to lose anything. For example, at the time of updation and organization.

We have covered up yet what, why & when to use it. Now bending towards the point, we will explain you how to create child theme in WordPress step by step. But before that, it’s important to know what’s you required to create it. Have a look?

Requirements to create a child theme

You should have a basic knowledge of CSS/HTML so that you can make changes on your own. Next, a bit of php knowledge should have because it certainly helps during the creation process. If you are copying and pasting code snippets experts from other sources, that would also work.

Our suggestion is practice on your local environment. You can use dummy content for theme development for testing purpose, or migrate a live WordPress site to local server.

Let’s get start:

How to create child theme in WordPress with and without plugin

Remember that your WordPress parent theme should be available in Appearance>>themes page, otherwise it will not work.

Manually create WordPress child theme

Here we will show you how to create child theme in WordPress without plugin within only 6 steps. Let’s see:

Step 1: The very first you need to create a folder and name it anything. For instance, optimizer-child.

Step 2: Thereafter, create a file titled style.css

Step 3: Once style.css file is created, then open it and write the information that we have mentioned below within a table.

1 /*
2 Theme Name: optimizer-child
3 Template: optimizer
4 */

Step 4: In this step, create a file with functions.php title and paste the given below code to import the parent theme style.

1 <?php
2 add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’, PHP_INT_MAX);
3
4 function enqueue_child_theme_styles() {
5   wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
6 }
7 ?>

Step 5: Here you have to zip the folder and upload it. To upload it go to the Appearance>>Themes>>Add New.

Step 6: Thereafter, activate the theme.

Finally, you have successfully created.

Creating a child theme using plugin

There are many plugins available in the market which make it easier to create a child theme. Therefore, we have mentioned below 6 steps which will help you to create it via a plugin. Let’s see:

Step 1: Very first, install the one-click WordPress child theme plugin.

Step 2: To install it, login to your WordPress dashboard and go to Plugins>>Add New.

Step 3: After that, click on the Upload plugin button to upload the plugin.

Step 4: Now navigate to Appearance>>Themes. Click on the theme thumbnail and then click the Child Theme button.

Remember that the WordPress theme for which you want to create a child theme should be activated. For instance, if you make a child theme of Twenty Thirteen theme, so make sure that your twenty thirteen should be activated.

Step 5: After that, you will see a configuration page. Here you need to write Theme name, Description, author field.

Step 6: At last, click on the Create Child button.

Now, you have successfully created.

Alternatively, there are also some other WordPress child theme generator plugins, which are as follows:

Some other WordPress child theme creator plugins

1. Child Theme Configurator plugin

The configurator is the best WordPress child theme plugin. It is very fast and easy to use plugin that allows you to analyze, create, and customize. Its easily identify and override specific css attributes that you want to customize.

However, its analyzer scans your rendered theme and configures it automatically. It enqueues theme and font stylesheets in a proper way for great performance. Further, it comes with the paid version also.

Key features of the configurator plugin

  • It automatically identifies the correct way to set up a child theme.
  • Upgrade theme without losing its functionality.
  • You can change properties quickly by finding the exact style selectors.
  • You can use web fonts.
  • And much more.

2. Child Theme Creator by Orbisius plugin

This Creator by Orbisius plugin is also one of the WordPress plugins allows you to create quickly and robust child theme in WordPress. It also creates rtl.css if exists in the parent theme.

By using this plugin you can edit the theme’s files from Appearance>>Orbisius theme editor. However, it has two editors. You can opt snippets from one and paste into another.

Key features of this plugin

  • The interface is easy to use.
  • You can create a theme within a click.
  • Its 1.3.4 version uses the recommended approach for loading WordPress child theme css.
  • You can edit functions in WordPress child theme files with our two theme editors.
  • It uses minified css/js to make sure it loads faster.
  • And much more.

Bending towards the point we are going to explain you how to customize it.

Customizing Your WordPress Child Theme

As you know that each & every theme has a style.css in its main directory. This is the main stylesheet of your theme where all the CSS goes. However, some themes may only have header information of a theme. Basically, such types of themes have CSS files located in a separate directory.

Here you will require a bit of CSS. Know how?

Firefox & Google chrome has inbuilt inspector tools allow you to see HTML and CSS code behind any element of a web page.

If you want to see CSS that you used for your WordPress navigation menu, so just take your mouse on the navigation menu and press right-click to choose the inspect option.

how to create child theme in wordpress

[Image Source File: www.wpbeginner.com]

As you click on the inspect tools, it will divide your browser screen into two parts. At the bottom part of the screen, you will see HTML and CSS for the page.

create child theme in WordPress

And, when you move your mouse on the different HTML code, the inspector will highlight them in the upper browser screen. You can see the above screenshot.

This will also show you the CSS rules that are related to the highlighted element on the right side of the browser screen.

From here you can change the CSS to see how it would look. For example, let’s try to change the background-color of .navbar to #e8e5ce.

create wordpress child theme

Here you can see how will change navigation bar color. If you like this then you can copy this CSS and paste it in the style.css file of your child theme.

1 .navbar {
2 background-color: #e8e5ce;
3 }

Thereafter, save the changes that you made and preview your website.

If you want to change anything in your theme’s stylesheet, follow the same process we have discussed above.

That’s it! There is some additional information that we are going to explain you. Let’s see:

How to edit other template files

If your WordPress child theme template features are not enough for you and you wish to add additional custom functions in it, so you have to add them in your WordPress child theme function.php.

For example, you have created a twenty thirteen theme’s child theme. And now you want how a single page is displayed in twenty thirteen. Make sure that the single page is located at twentythirteen/template-parts/content-single.php

Let’s introduce you via some steps how to do it:

#1: The very first you need to create a content-single.php in your child theme folder. Remember that it will overwrite the parent theme that’s why we need to follow the accurate file name & structure.

#2: Thereafter, create a folder and place the content-single.php file in that folder. Notice that the path looks same as the parent theme path.

Parent theme: twentythirteen/template-parts/content-single.php

Child theme: twentythirteen-child/template-parts/content-single.php

#3: Here, you can write your own code in the content-single.php. It will overwrite the parent file.

That’s it! Throughout this method, you can also edit and overwrite any parent theme’s template. You just have to remember file and folder path are the same.

Customizing WordPress theme without creating child theme

If you make changes to the theme without editing the parent themes code, then you can try these given methods to make changes, elaborated as follows:

Method 1: Modifying your theme’s CSS

If the changes you made (without changing any theme’s HTML or PHP code) only affect the CSS, so it’s better to use a custom CSS plugin. However, many other WordPress plugins available in the market which allow you to add CSS to your theme. And more best is most of the paid WordPress theme has a built-in custom CSS option.

In case your WordPress theme does not support custom CSS option, you can use some other plugins which we have mentioned below:

Method 2: Add a custom function to your theme

By using a custom function, you want to add a function and also remove or add a hook, so it’s an effective choice. Additionally, there is also a given below plugin that allows you to add custom php function to your theme.

Method 3: Custom Javascript

Now, most paid WordPress themes provide a custom JavaScript file that allows you to add javascript on header or footer. If your theme does not have custom JavaScript file, so using given below plugins you can add custom jQuery.

Adding new functionality to child theme

There are a lot of WordPress child theme tutorials that will ask you to copy and paste the code snippet in the functions.php file of your theme. But don’t do it.

Because adding code snippets into a function.php file of your parent theme means your changes will be overwritten whenever a new parent theme update will come.

That’s why we suggest you use a child theme and add your custom code snippets into the function.php file of your child theme.

Let’s take an example, the very first create a new file in the folder of the child theme and name it function.php. Here, in this example, we will show you how to add a little code snippet. It will change the default header image into our custom made.

Create a header WordPress child theme image and a thumbnail by editing your theme’s (Twenty thirteen) default header image. And, upload it to your child theme inside /image/headers/folder.

Thereafter, by adding given below code snippet in the function.php file of your theme, you have to inform WordPress that use this image as the default header:

<?php

function wpgdemo_custom_header_setup() {

   add_theme_support( ‘custom-header’, array( ‘default-image’ => ‘%s/images/headers/circle-wpg.png’ ) );

   register_default_headers( array(

       ‘caramel’ => array(

           ‘url’    =>

‘%2$s/images/headers/circle-wpg.png’,

           ‘thumbnail_url’ =>

‘%2$s/images/headers/circle-wpg-thumbnail.png’,

           ‘description’   => __( ‘Caramel’, ‘Caramel

header’, ‘twentythirteen’ )

       ),

   ) );

}

add_action( ‘after_setup_theme’, ‘wpgdemo_custom_header_setup’ );

?>

Now go to the Appearance>>Header and see the image that you have added as the default image.

customize wordpress child theme

At last, you can add any custom code snippet as per your requirement in the function.php file of your child theme.

That’s All!

We have covered up yet the whole process of creating the child theme. Now let’s introduce you how to install it.

How to install child theme in WordPress?

A child theme installation is similar to any other WordPress theme installation. But as a beginner, you don’t know how to install. Let’s see:

The very first open your WordPress dashboard and go to Appearance>>Themes page. After that, click on the Add New button.

However, there are two ways to install a WordPress theme.

Method 1: If your child theme is available in free on WordPress.org directory, so you can type its name in the search box and click on the install button.

WordPress will now install your child theme easily. WordPress will also find the required parent theme. If your parent theme is also available on WordPress.org directory, it will automatically install it.

Method2: If your child theme came as a zip file, then you have to press the ‘Upload Theme’ button. See below screenshot:

upload theme zip file

Choose the theme zip file by clicking on the ‘choose file’ button. And finally, click on the ‘Install Now’ button.

Now, WordPress will upload your theme zip file and install it successfully. It will also look for parent theme is installed or not. If parent theme is available from WordPress.org theme directory, it will try to install it. Otherwise, you have to install the parent theme manually.

That it! But we will explain you some additional information related to this.

How to install the parent theme in WordPress?

If parent theme is available on WordPress.org theme directory, so WordPress automatically try to install it. In case it fails to install it, then remember that you cannot able to activate the child theme. And WordPress will show your child theme as broken.

Now come to the point and see how to install your parent theme:

  • The very first go to your parent theme site and download the theme zip file.
  • Thereafter, go to Appearance » Themes page and press the ‘Add New’ button.
  • Here, you need to press the ‘Upload Theme’ button. And select the theme zip file by clicking on the ‘choose file’ button. Finally, press the ‘Install Now’ button.
  • Once you installed both parent and child theme, activate the child theme.

Note: Remember that, in order to use the child theme, you don’t need to activate the parent theme.

That’s All!

Summing UP

As you have seen, creating a child theme in WordPress is not quite difficult. Its whole process takes a folder and two files. As you may know, it allows you to customize a website without editing any core files.

When it comes to customizing a theme, modifying the theme using WordPress child theme should be your first choice. Likewise, you can save your theme from sudden modification reset mishaps.

As a beginner, if you make any mistake during your first child theme creation process. Don’t worry! Take a look at our WordPress child theme customization services. Dial our WordPress help no. +1-844-275-0975 (Toll-Free). Our WordPress experts are always here to help you.



Leave a Reply

Call Now