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.

/*   
Theme Name: Your Theme
Theme URI: http://example.com/example/
Description: A search engine optimized website framework for WordPress.
Author: You
Author URI: http://example.com/
Version: 1.0
Tags: Comma-separated tags that describe your theme
.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

.
*/

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:

<html>
<head>
</head>
<body>
<div id="wrapper" class="hfeed">
    <div id="header">
        <div id="masthead">
         
            <div id="branding">
            </div><!-- #branding -->
             
            <div id="access">
            </div><!-- #access -->
             
        </div><!-- #masthead -->   
    </div><!-- #header -->

<div id="main">

    

   

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

</div><!-- #main -->
     
    <div id="footer">
        <div id="colophon">
         
            <div id="site-info">
            </div><!-- #site-info -->
             
        </div><!-- #colophon -->
    </div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

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:

<div id="container">

    <div id="content">
    </div><!-- #content -->
     
</div><!-- #container -->

<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->

<div id="secondary" class="widget-area">
</div><!-- #secondary -->

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.

<?php get_header(); ?>

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 . 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?

  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

10 thoughts on “WordPress Theme Template & Directory Structure

  1. Thank you for the great critique. Me and my neighbor were just preparing to do some research about this. We got a book from our area library but I feel I’ve learned more from this post. I’m very glad to see such fantastic info being shared freely out there…

  2. After research a few of the weblog posts on your web site now, and I actually like your manner of blogging. I bookmarked it to my bookmark web site list and will be checking again soon. Pls check out my site as nicely and let me know what you think.

  3. This is really interesting, You’re a very skilled blogger. I have joined your rss feed and look forward to seeking more of your magnificent post. Also, I’ve shared your site in my social networks!

  4. A fascinating discussion is worth comment. I believe that you should publish more on this issue, it might not be a taboo matter but generally people do not discuss these issues. To the next! Best wishes!!

  5. I really like your writing style, fantastic information, regards for putting up :D. “If a cluttered desk is the sign of a cluttered mind, what is the significance of a clean desk” by Laurence J. Peter.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s