WordPress Child Theme Customization

WordPress Child Theme Customization

Introduction

WordPress themes provide much more control over the look and presentation of the material on websites. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php).  According to the recent WordPress Themes Survey, 85% of the users customize their themes, and only 35% use a child theme when doing so. This may be due to a lack of understanding as to what a child theme is, or due to the conscious of difficulty.

Purpose of a child theme

If many modification is done and updated in the existing theme, the changes will not be reflected. On the other hand, with a child theme, we can update the parent theme (which is essential for security or functionality) and still keep the changes. Because child theme allows us to change the functionality of the theme without having to edit the original/parent theme template files. So anytime we can always deactivate our child theme and come back on the original.  It will boost up our development time and it is a great way to get started if we are just learning WordPress theme development.

How to start a child Theme

Create a new folder in the themes directory to hold the child theme. The theme folder is wp-content/themes. We should give the name of the folder without any space as part of the name, and it is universal practice to use the name of the parent theme folder with “-Child” appended to it. For example, if we are making a child of the Circles theme, then the folder name would be Circles-Child.

Folder

In the child theme folder, create a CSS file called name style.css. This is the only file required to make a child theme. The style sheet must start with the following lines:

The most important parts of this file are the “Template:” and @import sections, which identifies the parent theme imports the CSS from the original. We must ensure that the path to our parent theme’s css file is correct, and that the “Template:” parameter correctly identifies the name of our parent theme. Everything should be case sensitive! The folder of our parent theme is “Circles” with a capital C, and the @import URL reflects this.

Note: The child theme’s style sheet is included after the parent theme’s ,so styles will therefore override those in the parent theme’s style sheet.

Activating Your Child Theme:

Once, we have created our child theme folder and style.css file. Log in to the  site’s dashboard, and go to Administration Panels > Appearance > Themes. We will see the child theme listed there. Click Activate

activate

Modifying Theme’s CSS:

We have created our child theme and activated. We have also imported our parent theme’s CSS, so it will look exactly like parent theme. If we need to modify our child theme CSS,

We can add any changes to our child theme CSS file after the @import line. So the new CSS should be called after the parent CSS loads. Because our new style was written after the parent CSS file. Usually all new CSS will overwrite the old one. For Example we are changing the font color of Navigation bar on our theme header section. In parent theme it’s Green and thinner. If we want to change it white and bolder, we have to add more CSS on our Circle-child/style.css file as below;

.site-navigation a{ color: #FFFFFF; font-weight: bold;}

After we added a new CSS on style.css, It overwrites the parent styles and we get a white color & bolded font as show below.
parent theme

Modify the Functions.php File:

Function.php has a theme’s major functionality normally stored. In child theme, the function always depends  with the parent theme functions, If we want to create custom function for child themes we should create new function.php file in child theme folder. Function.php file should start with a php opening tag and end with closing tag. In between we can add preferred php codes. The new function codes will load before the parent theme function.

Other Template Files:

Already we have modified CSS and functions files, so we can also change other template file but we should be careful. The Best practice is, first we need to duplicate the old files before we start to modify, so just copy and paste parent themes files into our child theme folder. Make sure that the folder, file name and location should be the same. For example if we want to modify the themes/Circles/Inc/headerstyle.php then we will copy and paste this file to themes/Circles-Child/Inc/headerstyle.php. By editing this PHP file the changes will reflect on child theme instead of loading parent theme function, in this way we can modify all the template file as per our need.

Templates

WordPress knows to use this file in place of the old one because its name and location are the same. We can then open the file and make the necessary changes.

Conclusion

The WordPress child theme is the safest and easiest way to modify an existing theme, either for making few changes or extensive changes. Instead of modifying the theme files directly, we  can create a child theme and override within. It is important to know that even though we can always create a child theme of any WordPress theme, sometimes we may not need a child theme. Think about the number of changes we have planned for our child theme, if the changes we are planning are minor, then we can always create a custom-style.css file in our theme or use a Custom CSS plugin. If the changes are too extreme and if we find ourselves overriding the core parent theme files, then we should probably be creating a custom theme.

We hope that this blog has helped to get the basic understanding of what Word Press Child Theme is and how to create it.

Reference

2957 Views 7 Views Today