How to create a better WordPress Child Theme

What is WordPress Child Theme?

Let’s say you’ve purchased a great theme but you want to add some modifications to it. You went ahead and altered css, functions etc.  Then developer releases a theme update. It will overwrite changes you’ve worked so hard for or even paid a developer to do them for you.

Now you are forced to either stick with altered old theme or update the theme to its latest version and lose and redo all changes made to it.

This is where Child Theme comes to save the day. Child theme is a WordPress theme that is meant to work alongside its parent theme. AnyWordPress theme can have a child theme.

How exactly does Child Theme work?

Simply put, Child theme allows you to append code and override its parent theme, thus altering parent’s look and/or functionality without changing its code. Child theme can be used for minimal alterations as well as major overrides.

How to create a better Child Theme?

Are there many ways to do that? Actually there are couple ways to do that. Old way and a better new way.

Old way overrides parent stylesheet by importing @import url(..  it to itself and then overwriting it. This creates unnecessary burden since browser has to read the styles twice. Remember if child theme folder doesn’t have functions.php it means it uses old way.

Let’s create a child theme

Create a folder for child theme.

Name it whatever the parent theme name is and add “-child”. It’d be easier to track your folder.

screenshot.png
Example: Parent theme and Child theme

create style.css and functions.php files inside the child theme folder

screenshot.png

open style.css and create header for it. Easy way is to copy/paste from parent theme’s style.css. Edit it and add “Child” to your theme name. Simply replace “mywordpresstheme” with your actual theme name. See example below.

/*
Theme Name: mywordpresstheme Child
Theme URI: http://www.myuri-example.com
Author: Author Name
Author URI: http://www.myurl-example.com
Template:mywordpresstheme
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark
Text Domain:  mywordpresstheme-child */

Template: mywordpresstheme” This line tells child theme where to look for its parent theme. Make sure your parent theme name appears here exactly as written in its style.css header line “Theme Name:”

Now we need to edit functions.php inside your child theme and tell it to load styles from its parent. Add code below to the file (between php tags)

add_action( 'wp_enqueue_scripts', 'child_theme_scripts' );
 function child_theme_scripts() {
     wp_enqueue_style( 'mywordpresstheme-style', get_template_directory_uri() . '/style.css' );
 }

The only thing you need to change here is replace “mywordpresstheme” with your theme name.

Activating the Child Theme

Time to activate the child theme. We need to upload and install both parent and child themes, but only activate child theme. Now your theme is ready to be customized.

Discuss