Tech

Why WordPress Child Themes Are Important and How to Build Them

Child Themes

WordPress child themes allow professionals to speed up the design and development process. They can easily conduct minor modifications without upsetting the whole template. However, many people who have converted HTML CSS to WordPress or migrated from other platforms, are unaware of this feature. In this article, we are discussing the importance of child themes and how they can be built. Themes are undoubtedly one of the most useful features of the CMS. The open source platform has categorized these readymade templates according to major industries and occupations. For instance, a photographer can choose a photography theme which will have essential features for her website. The layout will have facilities for showcasing images and social sharing buttons for posting them on other avenues.

Problems arise when people want to add any extra feature or conduct custom changes. Once the template is upgraded all these modifications would be lost. Child themes provide a solution to this issue. Let’s take a detailed look at what these themes are and how they can be created.

What Is A Child Theme?

A child theme can be defined as a template which inherits all its functionality from another theme. This other template which works as a foundation for the child is called the parent theme. The child template contains all the functionality, features, as well as the code of the parent. Users can make changes to the styling or add a new feature in the child. They can also customize an existing feature of the parent template in the child. All these changes will be retained when the parent theme is updated.

Why Are Child Themes Important?

Readers, by now would have got an idea about the role of child themes. Let’s take a detailed look at why are they so important for efficient development.

1. Benefit Of Not Losing Changes

The biggest benefit of a child template is that it helps users retain the changes made to the parent theme. Even if the template is updated, all the modifications will be safe in the child. Installing updates is important as they fix vital issues related to bugs and security. Using a child theme helps in upgrading to the latest version while retaining the custom appearance and functionality.

2. Provides Buffer For Mistakes

Theme development is a complex task which needs expert handling. Professionals need to identify all possible scenarios and ensures the program effectively addresses each one of them. However, when a child theme is used and a mistake occurs, the parent provides a buffer for the resulting impact. This means that even if things go wrong, the website will be easily restored through the main template.

3. Makes The Development Process Efficient

When using child themes, professionals can choose only the files they need to modify while leaving other ones unchanged. These templates allow developers to be flexible and easily add a desired function to the interface. The entire development process, therefore, becomes more efficient.

4. Helps In SavIng Valuable Resources

Creating a unique template requires lots of skill and investment of resources. When a website is created on a pre-built template with extra customization done through the child theme, the entire process is completed in less time. The investment required is also not as much as that for building a theme from scratch.

How To Create A Child Theme?

Let us now learn about the process to create WordPress child themes. People can use the following steps to create a new template based on an existing theme:

1. Create A Directory For The New Child Theme

The first step is to create a directory where the child theme will reside. This directory will be created in your website’s theme directory. You can use FTP to access your WordPress installation. The theme directory, “wp-content/themes” can be easily located there. Create a new folder within this directory. The best naming practice is to use the parent theme’s name with “-child” added at the end. In this article, we will create a child of a theme named “twenty fourteen”. The child theme folder will, therefore, be titled “twenty fourteen-child”.

2. Create A style.css File In The New Folder

Once you have created the new folder, the next step is to create a style.css file in it. This file will provide the information header which will help WordPress recognize the parent as well as the child. In the sample code given below, locate the line which begins with “Template”. You will see the name of the theme “twenty fourteen” against it which tells WordPress that it is the parent.

/*

 Theme Name:     Twenty Fourteen Child

 Theme URI:      http://example.com/twenty-fourteen-child/

 Description:    Twenty Fourteen Child Theme

 Author:         ABC

 Author URI:     http://example.com

 Template:       twenty fourteen

 Version:        1.0.0

*/

@import url(“../twentyfourteen/style.css”);

/* =Theme customization starts here

————————————————————– */

This file will contain the styling of the child template. Modify the above code according to the details of your parent theme. Add the child theme name in the first line. Do not edit the “@import” rule in the above code as it will ensure that original styling will be loaded along with the new changes.

3. Make Custom CSS Modifications

Try to make some modifications and some custom CSS elements. This will help in understanding whether the child template is working or not. Take a look at the following code which changes the border color of sidebar widgets from light grey to black.

/*

 Theme Name:     Twenty Fourteen Child

 Theme URI:      http://example.com/twenty-fourteen-child/

 Description:    Twenty Fourteen Child Theme

 Author:         ABC

 Author URI:     http://example.com

 Template:       twenty fourteen

 Version:        1.0.0

*/

@import URL(“../twentyfourteen/style.css”);

/* =Theme customization starts here

————————————————————– */

.twentyfourteen-content .widget_text.widget { border-color: #111;}

You can use the inspect element feature of your browser to identify the class name which needs to be changed.

3. Upload And Activate The Child Theme

Once you have made all the changes and saved them in the folder, it is time to upload the theme. All the styling changes that you have made will become visible after activating the template. The stylesheet of the child theme is inserted after the parent theme’s stylesheet. This means that the child’s styles will override the elements of the parent’s stylesheet.

Create a compressed zip folder of the twenty fourteen-child folders. Now, log into the admin dashboard of your WordPress interface. Go to “Appearance > Themes”. The new child template will be visible in the section. Click on the specified button to activate it and check your website to see whether its working or not.

Conclusion

WordPress child themes provide a simple way to developers for making custom additions to a website. The feature only goes to demonstrate the flexibility and user-friendliness of the open source platform.

Author Bio

Jacob Graves is a Sr. WordPress Developer at HireWPGeeks Ltd, a company that converts psd to wordpress service in a convenient manner. He is a passionate writer and loves to share WordPress and SEO related tutorials.