Tutorial – Building a WordPress 3 Theme From Scratch

I’ve wanted to learn how to build a wordpress 3 theme myself. The problem I’ve come across is that there aren’t very many tutorials on building a wordpress 3 theme and the documentation on WordPress.org is a bit confusing when it comes to learning how to setup the files past the true bare minimum without knowing how to hunt through several different links. That being said I hope to clear this up in this tutorial on how to build a basic wordpress theme from scratch.

With that out of the way lets get started. These are the bare minimum files you need inside your theme’s folder to get a WP theme working.
index.php
style.css

Each of these files require some code inside them and that code is:
index.php(Found here):


This will call the header.php and footer.php files in the default theme folder. You can create your own custom header.php and footer.php files and put them in your theme folder and it will call those instead without having to change this code later. In another tutorial I will go over customizing your own header and footer files for now this will work for a basic setup.

style.css(Found here):

/* 
Theme Name: 
Theme URL: 
Description: 
Author: 
Author URI: 
Version: 1.0
Tags:
Change Log : 1.0.0.0 - Original version
*/

Fill out this portion of the CSS as this is what gets loaded for the theme information in the wordpress backend.
Here is what your index page should look like now:

Now that you have the bare minimum you’ll have a site that loads your header and footer but nothing else. So lets add the next set of PHP required to load the actual blog posts. That is the loop.php file.

Here is the most basic loop.php code (taken from The Loop in Action) you’ll need to see your blog posts:

Here’s what you’ll see with this code if you’ve added the loop call below, notice there is no title for the blog post:

What I want to show you, and have you use is actually a bit more of an advanced version than the bare minimum, this set of code will pull in the title, link to the post, date, author, the post itself, and the category it was posted under. Here is what should go in your loop.php:



 

by

Sorry, no posts matched your criteria.

Save your loop file and now go back to the index.php file so we can add the call for the loop. This is the line of code to call the loop in:

Add that in between the calls for the header and the footer as you want the posts to show up inside of the website’s top and bottom. Your index.php should look like this now:
index.php:



Here is what this will look like or should:

There is one last call that is optional which is adding the sidebar which can be done by adding this simple call to your index.php:

So your index.php will look like this:




You can move the sidebar later on as needed for design purposes, just remember keep it inside the header and footer calls.
After adding the sidebar call your page will look something like this, now keep in mind since you don’t have any CSS styling your page the sidebar will now be at the top of the page:

Save all your files and check your blog out. Now this won’t be pretty as you don’t actually have any styling code in your style.css but it will give you plenty of ids and classes to attach styling to your blog.

Thank you for taking the time to read through this tutorial and I hope you found it useful.

Leave a Reply