WordPress Theme Creation 1: Introduction

What is this tutorial series good for? You will learn how to create a complete WordPress portfolio theme, from scratch, in the easiest way possible. Back when I started teaching myself how to create WordPress themes, I found a problem.

The WordPress community is pretty awesome when it comes to sharing its knowledge. However, the problem is that it’s all bits-n-pieces and you have to pay for the good stuff. I could not find a single tutorial series that told me everything I needed in one nice little package. Actually, I could, but those tuts were either ancient (circa 2010) …or paid.

So, now that I know a lot of WordPress theme stuff, I want to create the tutorial I would have loved back then. Also, I have a Freebies page on this website. Go look …NOTHING there. With the client work I do these days, I don’t have much time for writing tutorials and much less time for creating themes that are not custom tailored to suit just one client. See, it’s a bit selfish too. I get a series of blog posts, and an actual freebie to put in the freebie vacuum, at last. And you get (hopefully:)) a step-by-step, all-in-one theme creation road map.

Let’s get to it

This tutorial assumes that you already have a development environment set up(either locally or on a live server), with the latest version of WordPress installed. If you do not, and you are on Windows, you can check out my tutorial about installing WordPress locally here. Users on Mac or Linux, can see the Codex here. If you are using a hosted WordPress installation, you will need either FTP or control panel access to your server.

You also need to be comfortable navigating the WordPress Dashboard and have some knowledge of HTML5, CSS3, JavaScript, jQuery and at least a basic understanding of PHP. I also use the Bootstrap Framework to ensure that my themes are 100% responsive. So, it will be easier if you know a little about it. However, this is not absolutely required, as I will explain it as I go along. One last requirement is that we will be using Git and Github. If you have never used version control before, you can read this free Udacity tutorial.

On the topic of the Codex: It’s a good idea to familiarize yourself with the official Codex article about Theme Development here. It’s quite comprehensive(i.e. looong) but will give you an excellent foundation.

Further setup and tools of the trade

The WordPress Developer plugin is the most important tool we will use. It packages all the plugins we need by providing links and helping us set them up all at once. You can download it from the link I provided above.

Once activated, you will see the popup below. Select Theme for a self-hosted WordPress installation and save your changes.

wordpress themes

The screen below will popup. You obviously need an internet connection for this part, as these are links to the relevant plugins.

wordpress themes

We are only going to install the plugins I indicated in the image:

Debug Bar adds a Debug item to the toolbar.
Log Deprecated Notices alerts you about incorrect function usage, as well as deprecated files and functions.
Monster Widget adds all the default WordPress widgets to the sidebar at once, so you can ensure that your styling and functionality works with all of them.
Regenerate Thumbnails is useful when you change your theme’s default size for thumbnail images.
Theme Check is the most valuable of all these plugins to me. It checks that your theme follows WordPress best practices. Plus, it’s fun to test all the themes you have installed to see if they pass.

If you click on the Developer item in the toolbar, that will open the Developer Helper. Go down to the bottom, under the heading Constants and you will see the recommendation that you should turn WP_DEBUG on. This is important as it will let you know about any PHP errors, notices and warnings.

You will find the wp-config.php in the root of your WordPress Installation.

Find this line: define('WP_DEBUG', false); and change it to define('WP_DEBUG', true); and save. And that is all you need. Your ideal theme development environment is complete.

The best place to start: Introducing Underscores

You have a few options.

You could start completely from scratch. It would be a great way to learn template hierarchy and how everything fits together. But, chances are you will make some mistakes and omit important things. It would also take an unneccessarily long time.

Another option might be using a framework. A framework functions like a parent theme upon which you create a child theme. It all gets a bit bulky and could be confusing with all the prebuilt options, especially when you’re not sure which parts you don’t need. If you consider yourself more of a designer and don’t really want to get into the code, this might be a good option for you. However, each framework comes with its own learning curve. Also, the really good ones are not free. If you like the idea of using a framework, I would absolutely only recommend Genesis.

The third option is the one we will be using. A starter theme is not a parent theme. The one we will be using is the massively popular Underscores or _s. It’s a blank theme that you can use to create any kind of theme you can dream up. Underscores only has some reset and navigation styling. Everything else is up to you. It was created and is maintained by Automattic. This means that it is always up-to-date with the latest WordPress best practices. Just creating a theme using _s will not guarantee that our theme will pass the WordPress repo’s theme review process, but it is an excellent place to start.

The Kirki Customizer Plugin

Now, you can download Underscores from the link I provided above. But, we are going to go one step further. The easiest way to add theme options to the customizer is by using the Kirki Customizer plugin. It’s a framework that allows you to add advanced options to the WordPress customizer (without any admin pages) and provides some advanced features for you. It will allow you to add your own custom fields to the customizer a lot faster and more efficiently!

The plugin author forked the Underscores theme on Github and created a version that already has Kirki integrated. You can download it from here.

Now, the first thing you want to do, is to extract all from the zipped folder. It is an _s-master folder with an _s-master directory inside. You only need the inside directory, so change the name to something else (the name of your theme- mine will be Mooi ) and only copy that.

wordpress themes

Then you’ll need to do a five-step find and replace on the names in ALL of the templates (make sure you go through all of the files).

Search for:
1. ‘_s’ and replace with: ‘mooi’
2. _ s_ and replace with: mooi_
3. Text Domain: _s and replace with: Text Domain: mooi in style.css.
4. _s and replace with: Mooi
5. _s- and replace with: mooi-

wordpress themes

Also, your text editor might show you things like add_theme_support as part of the results when you search for _s. Go slowly and check each item found, to make sure you don’t accidentally replace this.

Once you have done all that, you can zip up the theme again and upload and activate it, just like any other theme. When you visit your site, you will see this. See, no CSS. It’s supposed to look like that.

wordpress themes

Now, let’s run our theme through the Theme Check plugin, just to test. Go to Appearance->Theme Check. Make sure your theme is selected and press the Check it! button.

wordpress themes

As you can see, it will tell you if you didn’t replace _s somewhere. It also mentions textdomain. You can find that in the include-kirki.php file. Also replace it with _s. You can also delete the 3 hidden files: .jscsrc .jshintignore .travis.yml. We don’t need them.

Open your theme’s style.css again. We have to add our own details here:

/*
Theme Name: mooi
Theme URI: http://lanigouws.co.za/mooi/
Author: Lani Gouws
Author URI: http://lanigouws.co.za/
Description: A simple, responsive portfolio theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mooi
Tags: theme-options, portfolio

mooi is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

You can find a list of acceptable tags here. When you check it again, it should now pass the theme check. We will get back to the recommended things, later.

Theme Unit Test Data

This is dummy data that populates your theme and ensures that every kind of element is correctly styled. Everything that you would need to test your WordPress theme is packed in theme unit test data. It has categories, child categories, menu items, nested comments, pages, sub-pages, images of different sizes, image alignment, etc. There are lists, blockquotes, links, code, and other HTML tags that you should style in your themes.

Download the Theme Unit Test XML file from here. In your Dashboard, go to Tools->Import

wordpress themes

Go down to WordPress and click Install Now. When that is done, click Run Importer. You will see the screen below:

wordpress themes

Browse for the XML file you just downloaded and click Upload file and import. On the next screen, just check Download and import file attachments You may have to do this more than once to ensure everything is imported and you see All done!. Go look at your home page. It should look something like this:

wordpress themes

Congratulations! You made it to the end of the first tutorial. You now have everything you need and the perfect environment to start creating your first WordPress theme with me.

Next time we will start doing some actual development.

Until then,
Happy WordPress coding!

Leave a Reply

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