How to create WordPress Child Themes

Filed Under: WordPress

I have been blogging for a long time now and I use WordPress in all my blogs. Its easy to use and provide a lot of features to extend it easily. Today I will explain what is “WordPress Child Theme” and how easily we can create a child theme from any parent theme.

WordPress Child Theme

WordPress child theme is the extension of an existing parent theme, it allows us to modify the functionality of parent themes. Its always better to create a child theme if you want to modify the theme files because it will make your life easier if you need to update your parent themes.

Steps to Create WordPress Child Theme

If you will look into the WordPress installation directory, you will see that all the theme files are located at wp-content/themes directory. This is the place where we need to create the child theme.

First step is to create the folder for the new theme, for my example I am creating a folder name “pinboard-child” in the theme directory.

WordPress Child Theme CSS File

The only required file to create a child theme is style.css and it should contain some important information that WordPress Codex use to determine the child theme information such as theme name, parent theme name, author etc.

My child theme style.css looks like this:


@charset "utf-8";
/*
Theme Name: Pinboard-Child
Theme URI: http://www.onedesigns.com/wordpress-themes/pinboard
Version: 1.0
Author: Pankaj
Author URI: https://www.journaldev.com/
Template: pinboard
*/

@import url("../pinboard/style.css");

#wrapper {
	position:relative;
	max-width:1200px;
	margin:0 auto;
	box-shadow:0 0 18px rgba(0, 0, 0, .4);
	background:#f8f8f8;
	overflow:hidden;
}

The other thing required in style.css is the import of parent theme stylesheet i.e @import url("../pinboard/style.css");

Once we are done with these information, we can add any extra stylesheets we need for the new theme. Notice the Template is “pinboard” that is the parent theme folder name.

After this you can go to WordPress Admin Themes section and you will see the new theme listed there. You can activate it and start making further changes.

WordPress Child Theme PHP Files

If you want to modify any PHP files, you can copy them to the new theme and then modify it. WordPress will automatically use the new files for the theme. For example, I wanted to modify the header and footer PHP files to add some tracking information, so I just copied them to the child theme folder and modified them accordingly.

WordPress Child Theme Overriding functions.php

functions.php contains all the functions required by theme files and WordPress automatically register all the functions defined in the parent functions.php file, so you can’t just copy it to child theme and modify it. PHP will throw fatal error that function is already defined. All you need to do it create a new functions.php file and make any changes accordingly. For example, I wanted to limit the number of tags shown in the tag cloud, so I created a new functions.php and added a new function in it. My child theme functions.php look like this.

functions.php


<?php
add_filter('widget_tag_cloud_args','set_number_tags');
function set_number_tags($args) {
$args = array('number' => 18, 'largest' => 22);
return $args;
}
?>

Notice that it’s a PHP file, so you need to add the PHP start and end tags.

WordPress Child Theme Overriding Javascript Files

Overriding JS files is a bit tricky and you need to create a new function in functions.php file to deregister the JS script used in parent theme and register them in the child theme.
For example, I added following function to register the jquery JS file.


function pinboard_child_js()   
{    
 wp_deregister_script('jquery');  
 wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');  
 wp_enqueue_script('jquery');  
}  
add_action('init', pinboard_child_js);

Once I was done all the changes, I went to themes section and activated the new theme and it looks fine, just like the old one with some tweaks I made, now I don’t need to spend a lot of time in making sure all my changes are preserved while updating the parent theme.

For more information, refer WordPress Child Theme.

Comments

  1. Loren says:

    Very complete guide for the WordPress Theme. I am impressed by reading this article and will try to practice it on my blog. Thanks for the useful and meaningful articles for me.

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages