Skip to content Skip to main navigation Skip to footer

How To Create A Child Theme In WordPress? 3 Easy Ways

Sometimes we want to customize some features of our currently active theme. In order to customize our original theme we have to follow a proper recommended way to do so, that is not just to edit our core parent theme files, instead we will have to create a child theme and then customize it. The article how to create a child theme in WordPress is a step by step guide for beginner to learn creating a child theme and also covers some child theme basics.

What Is A Child Theme In WordPress?

A child theme also is a theme.

  1. It can inherits parent theme’s functions, layout settings (front end look and feel) etc.
  2. It can override some functions of parent theme.
  3. It can introduce or add some new elements along with parent theme’s default elements.
  4. It can modify some area of parent theme.
  5. It keeps your theme modification or customization separate from your original parent theme.
  6. All can be done without touching or modifying any of the parent theme’s core file.
  7. Even when your parent theme gets updated, your customization in the child theme remains preserved.
  8. A child theme also saves development and testing time.

Why Do I Create A Child Theme?

Some times you have to customize your original or parent theme. One of the approaches is to edit theme core files like functions.php, style.css etc. But here are some points they should be accountable before going to edit core theme files.

1: Modifying core files is not a recommended practice because any editing mistake can be harmful in many respects like performance, security or even your site can stop working properly.

2: Any modification in core theme file will be washed out when you will update your theme.

Then what to do? One of the solutions is to create a child theme and feel free to update your parent theme, all customization work remains intact because it resides in child theme. Even if you did something wrong in child theme don’t worry delete it and try again.

Let’s know about child theme.

How To Create A Child Theme In WordPress?

There are two ways to create a child theme in WordPress. You can create a child theme manually or a plugin can be used to do so.

To Create A Child Theme Manually

Manually creating a child theme is also a great way of learning how to develop a theme in WordPress for beginners. To create a child theme in WordPress we have to access WordPress Root because we have to create or upload files and folder in root directory structure. It can be done easily by FTP or cPanel but we are using a File Manger plugin to access WordPress root directory structure.

Here are steps to install file manager plugin.

Step 1: File Manager Plugin Search.
Dashboard >> Plugins >> Add New

After Activating WP File Manager Plugin Click On WP File Manager Option.

File Manage will show WordPress root directory structure.

Step 2: Create A Child Theme directory.
Since every WordPress theme resides in its own theme directory, which is found under wp-content /themes folder of WordPress root. Here we are going to create a child theme folder in the path given below.
Full path : WordPress root/wp-content/themes/<Theme_Directory_Name>. It should be noted that theme directory name is case sensitive and no space is allowed in directory name.

Step 2.1 Click On wp-content.

Creating a child theme folder twentyseventeen-child under Themes folder.

Step 2.2 Create A Folder.
Just create a new folder, this folder is our child theme folder and give a name like twentyseventeen-child.
Full path is as follows: WordPress Root /wp-content/themes/twentyseventeen-child

Now we need a style.css file inside this newly created child theme folder.

At least a style.css file in side child theme directory. If you are using @import.
It was a common method to use @import in style.css file but nowadays it is no longer the recommended practice because it takes more time to load style sheet and it is also possible that the parent style sheet may load twice.
Style.css File Path.
WordPress Root /wp-content/themes/<your child theme directory name>/style.css
Example : WordPress Root /wp-content/themes/twentyseventeen-child/style.css

At least two files functions.php and style.css inside child theme directory.
It is mentioned earlier that only a single style.css file is required to create a child theme, but it is necessary to enqueue styles properly, a functions.php also is needed, so there must be two files viz. style.css and functions.php inside the child theme folder in order to enqueue styles correctly.
Function.php File Path.
WordPress Root /wp-content/themes/<your child theme directory name>/functions.php
Example: WordPress Root /wp-content/themes/twentyseventeen-child/functions.php

Both functions.php and style.css files are created under newly created child theme folder twentyseventeen-child.

Note: Now there are two functions.php files.
1: A functions.php comes with parent theme containing parent theme’s PHP codes.
This one is parent theme’s core file.
It resides inside the parent theme’s directory.
2: The other one is a newly created file for child theme.
Resides inside the child theme directory.
In this fuctions.php, a child theme creator can write new PHP codes.

Style.css Format.

Style.css file having a special format as mentioned below.

Header Section: It is found at the top of the style.css, header section entries require a predefined format.

CSS Section: Just below the header section, you can put your CSS codes as any usual CSS file contains.

/* Theme Name: Twenty Seventeen Child
Theme URI: http://Your Site/twenty-fifteen-child/ 
Description: Twenty Seventeen child Theme ......(A sort description about child theme) 
Author: Author Name  
Author URI: http:// Author Site Ex. example.com  
Template: twentyseventeen 
Version: Version No Ex 1.0.0 
License: Give licence Information like GNU General Public License v2 or later 
License URI: A Licence URI  like http://www.gnu.org/licenses/gpl-2.0.html 
Tags: List of tags like blue, three-columns, light, left-sidebar, responsive-layout 
Text Domain: twenty-seventeen-child 
*/

Style.css File Content.

Style.css Header Entries Meanings.

  • Theme name: Child theme name it will appear in themes option in the WordPress back end.
  • Theme URI: Address of website or demonstration page of your child theme. This URI is necessary otherwise WordPress will not accept the theme in its theme repository.
  • Description: Child theme description. It will appear under theme Details.
  • Author: Child theme author name.
  • Author URI: Address of author’s website.
  • Template: Name of parent theme folder. This is very important and mandatory. Parent theme folder name is case-sensitive, and if this folder name is incorrect then child theme will not work you will also get an error.
  • Version: Child theme version number.
  • License: Child theme license.
  • License URI: Address of child theme website where the license information is explained.
  • Tags: List of tags to search themes in WordPress directory.
  • Text domain: Used for internationalization or for translation Ex. twentyseventeen.

There are only two entries are mandatory:

  • Theme Name – A unique child theme name.
  • Template – Parent theme directory name. We are using Twenty Seventeen example parent theme, so correct Template entry will be twentyseventeen. If you are using different theme just change template entry accordingly.

Just below the header section you can insert your own CSS in style.css.

An example style.css for child theme is given below. 

/* 
  Theme Name: Twenty Seventeen Child
  Template: twentyseventeen
 */
Your CSS code goes hear... 

Step 3: Enqueue style sheet.

Create a new functions.php inside child theme folder and paste PHP codes given below in this file.

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

Step 3.1 Edit functions.php File.

Step 3.2 Paste The Code.

Adding CSS To Child Theme’s Style.css.

Changing Background Color Of A Post.

Paste following codes in child theme’s style.css below the header section.

.site-content-contain {
    background-color: #00FFC3;
   }

Step 4.1 Edit style.css File.

Step 4.2 Paste The Code Below The Header Section.

Now we have to activate our theme. Steps are as follows.

Activating The Child Theme.

Click On Dashboard >> Appearance >>Themes And Activate Child Theme.

wordpress child theme
Child Theme

Now we are going to test the effect of child theme.

Before activating the child theme.

Parent theme effect.

After activating the child theme.

Child theme effect.

How To Create A WordPress child Theme using @import?

There is also a common old style approach to create a child theme in WordPress, as we know this is not a recommended approach to create a WordPress child theme. This approach is as follows.

When we use @import command, we only have to create only a new style.css file inside child theme directory and there is no need to creating function.php inside child theme folder. Paste the following codes in style.css of child theme.

/* 
Theme Name: Twenty Seventeen Child 
Theme URL: http://yourdomain.com
Description: Twenty Seventeen Child 
Theme Author: Name Of Author
Author URL: http://yourdomain.com
Template: twentyseventeen 
Version: 1.0.0 
Text Domain: twentyseventeen-child 
*/
@import url("../twentyseventeen/style.css");

.site-content-contain {
    background-color: #f002ea;
}

Paste The Code In style.css File.

Note: @Import url (“../parent theme folder name/style.css”) uses parent theme directory name, here Twenty Seventeen theme is our example theme so parent theme folder name twentyseventeen is used here.

Now you can also test this newly created child theme after activating your child theme.

You can also create a WordPress child theme using a child theme generator Plugin.

A child theme generator search page.

Child Theme Generator Plugin Search

How To Add Screenshot.png?

What Is A screenshot.png File?

The Image associated to a theme (when you view installed themes in Dashboard >>Appearance >>Themes ) is actually an image file named screenshot.png (never rename it because WordPress searched this name to load theme image ), and should be placed in the theme’s folder.

What Is The Recommended Size Of screenshot.png?

The recommended screenshot size is 1200px wide by 900px in height.

What Is Recommended Format For screenshot.png?

WordPress recommends .png format, while .jpg, .jpeg, and .gif are also valid for the screenshot but they are not recommended.

Path for screenshot.png:
WordPress Root /wp-content/themes/<your child theme directory name>/screenshot.png
Example: WordPress Root /wp-content/themes/twentyseventeen-child/screenshot.png

Now we have uploaded screenshot.png to child theme folder twentyseventeen-child.

Screenshot.png File Upload.

Before uploading screenshot.png file.

After uploading screenshot.png File.

Was This Article Helpful?

0
0 Comments

There are no comments yet

Leave a comment

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