How to Create a WordPress Theme the Smart Way

Developing a WordPress theme is something that requires planning and a good toolbox. The following is my method on how I start to develop a custom WordPress theme.

Development Environment

The first step is to make sure you have a development environment configured.  My preference is to have a local development environment. For your development environment it is usually a good idea to turn on debugging by adding the following line to your wp-config.php:

define('WP_DEBUG', true);

WordPress Framework

Using a WordPress framework is potentially much different from how you are accustomed to developing WordPress themes. In my experience, once you learn how to use a specific WordPress framework you will never build a theme without one. There are many frameworks available for WordPress, and my favorite framework is genesis. A good framework makes it easier to develop a theme by providing custom filters and functions for things you do often during custom theme development.

Base WordPress Theme Template

A good WordPress framework will most likely have a sample WordPress child theme for you to start your development from. This child theme will most likely have some base CSS on which your new custom child theme can start from. For the genesis framework I use the Genesis Sample 2.0.1 child theme available from https://github.com/copyblogger/genesis-sample. You can also download this sample theme from your my StudioPress account.

Version Control

The next major tool in your toolbox is a version control system. Version control allows you to have multiple versions of a WordPress theme, which show the changes that were made to the code over time, and allows you to revert if necessary and undo those changes. Another benefit is it helps significantly with documenting why you created various pieces of code. The version control system I use is Git and a free solution is available from GitHub. GitHub also has various clients to download, one is GitHub for Mac. The steps below assume that you are using GitHub for mac. Similar steps can be done using other version control systems and operating systems.

Create New GitHub Repository

If you don’t already have a GitHub account, you will need to sign up for an account at github.com. Next you need to install GitHub for mac (or something similar) on your local computer.

To create a new GitHub repository, launch GitHub for Mac and choose New Repository from the File Menu.

GitHub New Repository

Fill out the dialog box similar to what is above and click Create Repository.  Now you have a new empty repository on GitHub.

To upload new files to your repository, copy the files from the genesis sample child theme into the local folder where GitHub repository was created above. I like to delete the xml folder from the genesis sample child theme because I don’t need to keep the sample data in my repository.

First Commit to GitHub

Github Initial CommitIn GitHub for Mac you will now see all your new files added to the repository as pictured to the right. Your first step is to commit these changes to keep the original versions. Type in a reason for this commit where it says Commit Summary. For the first commit I usually just type Initial Commit. Then click the button that says Commit and Sync. Your repository with the new data should now be available on github.com. At this point you should verify it is committing and syncing to the repository before continuing. My sample theme is available at https://github.com/johnlevandowski/wpselect-base

Changes to Genesis Sample Child Theme

Once you have your base sample code synced to the repository, it is time to make a few changes to your new WordPress theme. Here is a list of files that should be updated.

README.md

Make changes to the readme as needed. This isn’t critical for your theme, but it is the data that will be displayed when someone views your repository on github.com.

functions.php

Update the Child Theme Name, URL, and Version.

style.css

Update the Theme Name, Description, Author, Author URI, and Version.

Commit and Sync changes

After you have made the changes above, launch GitHub for mac and Commit and Sync the changes. An example of changes for my base theme is located on GitHub.

Create your custom WordPress Theme

After you have done the above, you are now free to change the CSS and PHP for your new WordPress theme and commit changes to GitHub as often as you need to. This will help document your theme changes and easily revert pieces of code.

I hope that the above tutorial helps make your development of WordPress themes easier. I highly recommend that your buy a great WordPress framework like Genesis to use for your custom WordPress development.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s