How to Create a WordPress Theme Part 1

Creating your very own WordPress theme from scratch might sound daunting to most, but it’s actually not that hard. All you really need is to know a little basic HTML and WordPress coding. Even if you don’t, those are really easy to pick up. Knowing CSS is a huge plus.

What I’m going to do is take you step-by-step as I build a new WordPress theme from scratch, and you will see how you can easily do the same.

There is a quote from Picasso that a good artist creates, and a great artist steals. That pretty much sums up on how we’re going to create a new WordPress theme from scratch – by ethically “stealing”, copy-paste.

Workspace

If you’re going to create a theme, you’re going to need a workspace where you can build and test at the same time. There are basically 2 ways you can do this.

The first is simply by doing everything “live” online. You can set up a dummy test blog and use that as your workspace, editing the codes directly from the theme editor.

However, it can be frustrating to do that if you have a slow Internet connection. In that case, you might want to set up a workspace directly on your PC. This requires some extra work at the beginning but can really pay off in the long run. If you plan to do this, check this post on how to install WordPress locally on your HDD.

Regardless of which method you use, you should first create a new folder where all your theme files will be located.

Design the layout

You’re going to need to design out the basic layout of your new theme. It’s actually good to have a rough sketch drawn out on a piece of paper so you can have a better idea of what it will look like and can be referred to later.

For this, I will be using a 3 column layout, but with 3 sidebars. Here is my rough sketch of how the new theme will look like:

If you’re having problems coming up with a layout design, just head over to a few of your favourite blogs and try to find some inspiration from there. Don’t beat yourself up to try and come up with something unique or different. Most blogs have the same basic few layouts, and it is really up to your creativity on how to make these generic layouts work for you. More on this later.

Preparing the files

Next we need to prepare the files that will “house” the new theme. The basic files required are:

• style.css
• index.php
• single.php
• header.php
• sidebar.php
• footer.php
• page.php
• comments.php
• search.php
• functions.php

Some themes have more than these basic essentials but these are all you need for most themes. You can just stick to these, or you can choose to include more files. It is really up to your preference, but personally, I like to keep different segments of my theme in its own file so that it is easier to edit later on. That is exactly what we will do here.

I will split my sidebar into 3 different files, one for each. So I will be adding 3 more files to this theme:

• sidebar_top.php
• sidebar_left.php
• sidebar_right.php

Take note that these are 3 additional sidebar files, and I’m still retaining the original sidebar.php as well. That makes 4 different files for the sidebar alone. There is a reason for this, and you will see why later.

You can create these files using Notepad. Simply open up Notepad, and select File > Save As. Set the file name as “header.php” with the quotes and save it into your theme’s folder.

Repeat this process until you’ve created all the necessary files for your new theme.

When creating your “style.css”, you should also add in your theme information before saving it. Just copy and paste the following in your style.css and fill in the information yourself:

/*
Theme Name: Your Theme Name
Theme URI: Your URL
Description: Short Description
Version: Theme Version
Author: Your Name/Nick
*/

Just simply fill the information in, you can always change them later. The theme name is the most important right now, because WordPress will take the name of the theme from here. If you don’t know what to name your theme yet, just use any name so you can identify it.

Upload your theme folder

After you’ve created all the files, it’s time to upload it to your themes folder in your WordPress blog.

Once that is done, we can begin the actual theme creation (and the copy-paste) in the next post…

Related posts:

1. How to Create a WordPress Theme Part 3
2. How to Create a WordPress Theme Part 2
3. How to Create a WordPress Theme Part 4
4. Create Your Own Wordpress Theme for $10
5. How to Create a WordPress Theme Part 5