Anatomy of a Wordpress Template: The Basics

There are tons of free Wordpress templates available, but at some point you’ll probably want to modify one or make your own. Even if you know HTML pretty well, this can be a daunting task at first.

Wordpress templates have a decent amount of simple PHP mixed in, and you need to utilize a special file structure for the template to operate correctly. Before you dive into making a Wordpress template, let’s look at the basic structure of a Wordpress template compared to a normal website template.

Example Basic Website Template

A typical website consists of a few parts – the content, a header, and a footer. You may also have a sidebar for navigation and/or a horizontal menu bar. The typical markup for this type of template would look something like this.

<body>
<div id="header">
  ...  Header Stuff Here ...
</div>
<div id="content">
  ...  Main Content Here ...
</div>
<div id="sidebar">
  ...  This floats to a side ...
</div>
<div id="footer">
  ...  Footer Stuff Here ...
</div>

If you’ve learned some PHP, then you can include a series of PHP files to create your webpage template. Chances are your header, footer, and sidebar are the same for all or most of your pages – so it makes sense to create them one time each.

<?php include('header.php'); ?>
 
<div id="content">
  ...  Main Content Here ...
</div>
 
<?php include('sidebar.php'); ?>
 
<?php include('footer.php'); ?>

Nothing too complicated here. Just a simple, barebones template.

What Does a Wordpress Template File Look Like?

Although the terminology is a bit different, a Wordpress template has the same basic structure. Let’s look at a pared down version of the default template’s index.php file.

<?php get_header(); ?>
 
<div id="content" class="narrowcolumn">
  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
      ... Post Info ...
    </div>
    <?php endwhile; ?>
  <?php endif; ?>
</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

The bulk of the action here is in the “content” div. With PHP, Wordpress checks to see if any posts were retrieved from the database. If they are, then it loops through the posts and outputs each one.

“Post Info” would be replaced by the markup you want to use for the actual post headings, information, and content.

The PHP function calls are similar to the include() calls in the earlier template. get_header() fetches the standard header info, get_sidebar() fetches the sidebar, and get_footer() fetches the footer. But where does Wordpress find this information?

Special Wordpress Template Files

Wordpress uses some standard tempalte files to make these functions work.

For example, get_header() looks for the header.php file. It’s more or less a proxy call for include(‘header.php’). To make Wordpress work properly, therefore, you should include all of your header information in header.php.

The same goes for get_footer() and footer.php as well as get_sidebar() and sidebar.php.

So, to begin designing a Wordpress template or to convert a regular website template to a Wordpress template, you need to worry about four basic files:

  • header.php – the header div and information
  • footer.php – the footer div and information
  • sidebar.php – the sidebar div and information
  • index.php – calls get_header(), get_footer(), and get_sidebar(), and contains the content div

There are some other special files as well, but this is enough to get started. Once you understand the basic structure of the template, you can look into customizing the information that is displayed for each post.

Bookmark and Share:
  • Digg
  • Furl
  • del.icio.us
  • StumbleUpon
  • MisterWong
  • DZone
  • Technorati

Tags: , , ,

2 Comments to “Anatomy of a Wordpress Template: The Basics”

  1. Google Analytics: Inserting Into a Wordpress Template | Web Cash said this on March 29th, 2008 at 12:00 pm

    [...] we previously discovered, a Wordpress template is made up of a series of files. Three basic files – header.php, sidebar.php, and footer.php – help [...]

  2. This Life of Brian » Blog Archive » Google Analytics: Inserting Into a Wordpress Template said this on November 11th, 2008 at 7:12 pm

    [...] we previously discovered, a Wordpress template is made up of a series of files. Three basic files – header.php, sidebar.php, and footer.php – help [...]

Leave a Reply