Creating WordPress Child Theme Method One

So, you have your site developed and is using some of the WordPress theme to present your site, but, you are not satisfied with that and want to add more functionality to your site. Is it really possible? Well, for the answer on this is, it is really simple and can be done in less steps. The hero for this feature in your site is the WordPress child theme.

You need to add some CSS code to make your site look more beautiful but could not know how to do it, then, the child theme will assist you on this. Similarly, if you want to add some more function to your site, then, again the hero on this is the WordPress child theme. So, in order to help you with creating the child theme, here, we will create a simple but needed work to create it from scratch. Also, creating a WordPress child theme is essential because, there is always a release of the new versions of that theme used in your site with bug fixes and additional feature addition, so, if we create a child theme, we do not need to overwrite the parent theme again and again, if we code in the parent theme file. The steps involved in creating a WordPress child theme are listed below:

Creating a folder for your child theme

In order to create a WordPress child theme, first of all you need to create a folder for your child theme. For eg. here we have created a folder named as twentyfourteen child in the folder contained inside /wp-content/themes/ in the WordPress installed. The steps involved for this is completed.

Creating a style.css file

This is the most important part in creating a WordPress child theme, because it tells WordPress that it is a theme by inserting a line of comments in it’s top location. If the comments are not present in the style.css file, then, WordPress can’t recognize it as a theme and hence, displays the error in your theme page of WordPress install, and is too not listed in the theme list. So, this is the most important part in creating WordPress child theme. The comments to be written in this file is as:

The above mentioned comments is in that file is as:

  1. Theme Name: Name of the child theme to be given for the created child theme
  2. Author: Name of the theme author
  3. Version: The version number for the developed child theme
  4. Template: The name of the parent theme to be used to create a child theme (ie. to modify the parent theme, here, the parent theme is twentyfourteen in our case).

showing-the-wordpress-child-theme

After completing the above mentioned steps, when you visit the Appearance tab in your WordPress dashboard, you will notice that a new theme appears as the name of the provided theme name as above. Here, in our case, there is Child Of Twenty Fourteen. Here either you can copy all the contents of CSS from your parent theme, or, just import them from your parent theme’s style.css file by simply writing a simple code in your style.css file of child theme which copies all the style property from the parent theme. The code for it is provided below:

This code should be inserted either before the comments or after the comments in the style.css file.

Overwriting the parent theme

Here, if you complete the above mentioned steps, you can see that there is no change at all in your site. So, in order to change some of the styles through your child theme, you have to just overwrite the style of the parent theme in your child theme’s style.css file, below the comments. The code would be like this:

This example of CSS code will create the justified text when you use your newly created child theme in your site, overwriting the parent theme’s CSS code.

screenshot-before-applying-the-child-theme-for-wordpress

The above image shows you the screenshot before overwriting the parent theme via child theme. Also, if you have to modify some of the files to function at your command, then, you have to create a new file with the same name and in the same structure as in the parent theme to take effect. For eg. here, we will modify the single.php file of the parent theme, using the child theme, not to display the post navigation. To do so, you have to copy all the content of the parent file exactly as it is to the child file and then overwrite it as:

screenshot-after-applying-the-child-theme-for-wordpress

The above image shows you that the parent theme has been overwritten through the help of the child theme. And, if you want to create a screenshot for you child theme, then, create a file with named as screenshot.jpg or screenshot.png in the same folder. Also, if the theme have some functions on it which you need to overwrite, then, you need to create a file in your child theme named as functions.php and the copy that function of parent theme to the child theme exactly as it was and then overwrite that function according to your site requirement.

Conclusion

If you have followed the above tutorial properly and managed to create the child theme for your site, then, we can assume that you are already familiar with the WordPress child theme and can make your site look more appealing than before using the child theme.

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply