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" 
  } );




  1. I have recently started a blog, the information you provide on this website has helped me greatly. Thanks for all of your time & work.

  2. F*ckin’ tremendous things here. I am very glad to see your article. Thanks a lot and i’m looking forward to contact you. Will you please drop me a mail?

  3. I relish, cause I discovered just what I used to be taking a look for. You have ended my 4 day long hunt! God Bless you man. Have a nice day. Bye

  4. Hello there, I do believe your web site could be having browser compatibility issues. Whenever I look at your website in Safari, it looks fine however, if opening in I.E., it has some overlapping issues. I merely wanted to give you a quick heads up! Apart from that, great blog!|

  5. Just desire to say your article is as amazing. The clarity in your post is simply nice and i can assume you’re an expert on this subject. Well with your permission allow me to grab your feed to keep up to date with forthcoming post. Thanks a million and please keep up the gratifying work.

  6. Great work! This is the kind of information that are supposed to be shared across the internet. Disgrace on Google for not positioning this submit higher! Come on over and talk over with my website . Thanks =)

  7. Hello Sir, thank you for the nice article, glad you have written it.


Leave a Reply to happy new year images 2017 Cancel reply

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>