Mike vs Web: the blog and projects of a web developer fascinated by the web and all its technical greatness.

An Awesome WordPress Child Theme Tutorial

For this demo, we are going to use Semicolon as the parent theme. So obviously, it should be named: Comma. Period can be saved for another tutorial.

Download the Semicolon theme into the WordPress site and we can get started by creating a new directory in the wp-content/themes/ folder named comma.

Here’s the basic rundown of what we’re gonna do:

File Structure
This is what the file structure in your directory should look like.


The Setup

In our new directory named: comma, add the style.css file and type the following into it:


 Theme Name:	Comma, child of Semicolon   
 Theme URI:     this theme is for child theme testing
 Description:  	A child theme.
 Author:        Michael
 Author URI:    http://michaelcbreuer.com;
 Template:     	Semicolon
 Version:       0.1.1
 License: 	GNU General Public License
 License URI: 	license.txt    
 Text Domain:   comma

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

/* =Theme customization starts here
-------------------------------------------------------------- */

What you’ve just added to your stylesheet is its relationship to Semincolon. Under Template, we’re using Semicolon, the parent theme, and we’re importing its stylesheet into our custom theme. Once we’ve made these declarations, we can begin…

Create a folder within the Comma theme directory and name it: js.

Add a file into the js directory and name it: scripts.js
Copy and paste the following code into it. It’s nothing fancy – just a starting point for when you want to add some custom functionality.

  // send a message to the console
  console.log('scripts.js loaded');

Keep in mind that IE8 doesn’t like JavaScript console messages very much, so be sure to remove them when making the code live.

Note: the child theme’s Javascript files can load in the header or the footer, but will load before the parents theme’s Javascript files. The goal should not be to override the parent theme’s ability, but to build upon them. You can think of the parent theme as the family name of the House, so uphold the crest.

So when you choose a parent theme, make sure its a House or gang you are willing to align yourself with.

Add the custom Javascript file to the footer. This is accomplished through the functions.php file. We can create one within our child theme’s directory and it will add on to the parent theme’s list of functions.


  // Add action to enqueue scripts
  // Function to add custom JavaScript (/wp-content/themes/comma/js/scripts.js) for child theme
  function commaPlugins() {
    // add custom script to footer
    // get_template_directory_uri() won't work here because Semincolon is the parent directory
    wp_enqueue_script('commaJS', site_url() . '/wp-content/themes/comma/js/scripts.js',array(),'1.0', true);

Turn Theme On!

This is the time to go to the theme section of the WordPress and ensure that Semicolon and Comma are installed. Activate Comma and then check your site.

This is what you should see:

Make sure it works!

This is a super important step: make sure the code you just added works properly.


/* =Theme customization starts here
-------------------------------------------------------------- */
body { background-color: #B8D8EA; }
#page { 
	background-color: #fff; 
	padding-left: 20px; 
	padding-right: 20px;


  // send a message to the console
  console.log('scripts.js loaded');

  // check if jQuery is working and mess with the site slogan's CSS
  jQuery(".site-description").css( {
	backgroundColor: "#B8D8EA", 
	color: "#117bb8", 
	padding: "5px 20px ",
	fontSize: "18px" 
  } );



Submit a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>