WordPress Theme Template & Directory Structure

While the most minimal of WordPress Themes really only needs an index.php Template and a style.css file (or just the style file if it’s a Child Theme) most WordPress Themes need something a little more solid.

Our new minimal will include 6 files. Make a folder in wp-content/themes/ for your theme—for this tutorial I’ll be using “your-theme” but it can be whatever you want—and create the following files in that new folder (don’t worry, they’ll be blank until the next few steps).

• index.php
• header.php
• sidebar.php
• footer.php
• functions.php
• style.css

Now let’s open up the last file we created, style.css, in a text editor. The first thing we need to do is add a section at the top of this file bracketed by what are called CSS “comments” (these guys: /* and */). It’s here that we need to put the info that tells WordPress about your theme. Without it, your theme won’t show up in the themes panel.

Something to note: a lot of this is optional. Really, you just need the Theme Name. But if you ever plan on releasing your theme, or if you’re making a custom theme for someone, you’ll want to start out including most, if not all, of the rest. At the very least, I want you to feel free to mess around with it.

Once you’ve got that done you can activate your theme and navigate to your test site. We’ve made the ultimate blank theme! Things should start to get interesting right about now.

Building In Your HTML Structure

Now we get to use our HTML structure from the previous lesson. But first a mini-lesson about WordPress and Templates.

WordPress really only needs 1 template file, index.php. We can, and will be adding a series of template files that can be used instead of index.php for certain situations (single posts, category pages, etc.), but at the very beginning, index.php is all we’ll need.

Now, index.php and all it’s related brothers and sisters (which we’ll get to) make the web pages we see in our browser. They’re files with some HTML and HTML-outputting-PHP but in the end they make web pages.

Let’s think of web pages like stories, something with a beginning, a middle, and an end. Well, when we write out our index.php file (and later our single.php, category.php, etc.) we’re going to concentrate only on the middle bit. But! We’re going to call in the beginning bit and the end bit. We may have to always be redoing our middles but we’re only going to do the beginning and end of each web page once.

Header.php and Footer.php

Get the HTML structure we worked on in the previous lesson and copy everything up to and including <div id="main"> into header.php and save it. It should look like this:

Now, copy everything after, and including, </div><!-- #main --> into footer.php. It should look like this:

Index.php

I bet you can guess what we have to do now. Copy everything from our HTML structure inside the #main div into index.php. It should look like this:

With only two small additions we’ll have a perfectly invalid WordPress Theme but we’ll be on the right track. We need to call in the header and footer to your theme.

At the top of index.php, before anything else, add the following template tag.

I think it’s pretty obvious what this tag does. It gets the header. But while we’re here, take a good look at this template tag if you’re new to PHP. I want you to notice a few things. First, our PHP function call—get_header()—begins with <?php and ends with ?>. Secondly, while our call is only 1 line long it ends with a semi-colon. Small, but important stuff.

Alright! Can you guess what function call we’re going to put at the bottom of index.php?

Yep. Now we’ve got our main file that WordPress looks for, index.php. It has all the middle bits of our web page, but the top calls in the beginning bits, and the bottom calls in the ending bits.

Reload your page in the browser and check out the source code (View > Page Source, in Firefox). Look! It’s your code!

You’re on your way to making your first WordPress Theme.

How To Create a WordPress Theme

This post is part of a WordPress Themes Tutorial that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

1. WordPress Theme Tutorial Introduction
2. Theme Development Tools
3. Creating a Theme HTML Structure
4. Template and Directory Structure
5. The Header Template
6. The Index Template
7. The Single Post, Post Attachment, & 404 Templates
8. The Comments Template
9. The Search Template & The Page Template
10. The Archive, Author, Category & Tags Template
11. The Sidebar Template
12. Reset-Rebuild Theme CSS & Define Your Layouts