Part One: What is a WordPress Theme?

Posted by Nathan Chapman on July 25, 2008

This post is one in the series on creating a Wordpress Theme, including design aspects, mock-up to code, WordPress’s PHP and debugging. This series assumes you know a little bit… If you’re still clueless after the series, contact me and I’ll explain further for you.

Before you can make a WordPress theme (well, a good theme at any rate), you need to know what makes up a theme and how one works.

WordPress stores all of its data - your posts, comments, settings etc. - in a MySQL database, from which is uses PHP to “grab” data from this database.
A WordPress theme can be made of just one PHP file, however for editing purposes it is generally split up into four main files:

  • header.php
  • index.php
  • sidebar.php
  • footer.php

Three of these files (header.php, sidebar.php and footer.php) are “called” from index.php when a page or post is loaded.

HEADER.PHP

The header.php file should contain the basic start to every web page (even static pages), including Doctype and page language specification.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>

After this, WordPress starts to use its special “brand” of PHP to grab data from the MySQL Database. For example, take the <title> tag:

<title><?php if ( is_single() ) { ?> <?php wp_title(''); ?> - <?php } ?> <?php bloginfo('name'); ?></title>

There is the standard <title> tag, and then a PHP argument, asking for some text from the MySQL database. In this example, WordPress checks if this is a single post or an archive/home page (is_single()), before then displaying the Post Title (wp_title(”)). Finally, WordPress returns the name of the blog the post is on (bloginfo(’name’)).

The header continues on, referencing for the theme’s stylesheet (with another PHP argument), the RSS Feeds, Pingback URL, before finally ending on <?php wp_head(); ?>. This argument is asking for any plugin’s code that must be in the header - for example, many tracking and analytic codes must be in the header.

INDEX.PHP

The most important file in a theme is index.php. Like any website, a file named index.php (or index.html, for that matter) is the default page to be loaded. Because of this, index.php must reference other pages in the theme somehow. It does this by using three arguments:

  • <?php get_header(); ?>, used to call header.php
  • <?php get_sidebar(); ?>, which calls sidebar.php
  • <?php get_footer(); ?>, which (surprise, surprise!) calls footer.php

By calling each file, it includes their contents as if they were part of index.php. By doing this, index.php (which does not have Doctype or HTML tags) then contains the Doctype information from header.php, as well as (using get_footer();) the closing HTML tag from footer.php.

The other main function of index.php is to call and run The Loop. Simply put, The Loop is used by WordPress to display posts, both individually and in archives. Any code placed in The Loop is repeated on each post, as one post is one “run-through” of The Loop. One there are no posts remaining, or another parameter is met, The Loop stops executing and the page continues to load as normal - of course, the generation of the page happens instantaneously, so this repeating is not noticed. The basic layout of The Loop is as follows:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

[ Code inside the loop goes here, where it is repeated each post ]

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

The first section of that code above, starts The Loop. In normal terms, it says “Do we have posts? Yes, good. Continue on. Every time you came back here, see if we still have posts.” The Loop then continues down, generating content, and at the bottom, checks a few things. The Loop says “Go back to the top and check for more posts. No more posts? Let’s end The Loop now.”

And yes, I’m not sure that’s what WordPress would say if it could talk, but you can always hope.

SIDEBAR.PHP

Not every blog theme has to have a sidebar - mine doesn’t and it is (I hope) still very usable and nice. With the integration of Widgets in WordPress 2.3, sidebars have become much easier to make, however you need to edit or create a new file, functions.php to use them. As the sidebar is an important and very versatile part of a WordPress theme, the sidebar will be covered in detail in a later post. Sorry!

FOOTER.PHP

The footer of (most) blogs is a rather humble affair - maybe a link or two, but it is really just there to finish the page nicely. That is what footer.php is for. If you would like a large footer (Like those showcased here on Smashing Magazine), then it may be better to place the PHP for it in index.php after the loop, or in an entirely seperate file.

Like header.php, footer.php also has a PHP argument asking for plugins’ generated code - <?php wp_footer(); ?>.

Apart from this, footer.php is (for me) just to finish the page, closing <div> tags, and finally the finishing </html>.

Don’t miss a single post! Subscribe to Pixl’s RSS Feed!

8 Responses to “Part One: What is a WordPress Theme?”

  1. Ebony Says:
    July 26th, 2008 at 1:40 pm

    Great Blog…Looking to captilize from blogging as well.

  2. johnny Says:
    July 30th, 2008 at 8:54 am

    Thanks for the great info! The Best Work At Home Program on the planet!

    Comment editied by Nathan on 10-8-08

  3. geoff daum Says:
    August 11th, 2008 at 3:02 pm

    Yep - I would agree with that.. Thanks for the line.

  4. Alex Says:
    August 16th, 2008 at 4:37 am

    Your blog is interesting!

    Keep up the good work!

  5. akciger rahim kanseri Says:
    August 18th, 2008 at 4:28 pm

    I like very much the writings and pictures and explanations in your adress so I look forward to see your next writings. I congratulate you.

  6. Masaguz Says:
    August 23rd, 2008 at 12:22 pm

    hi, i’m agus from indonesia, i like this tutorial ;)

  7. Maria Says:
    September 1st, 2008 at 11:48 pm

    Another sweet tutorial on how to make Wordpress tepmlates. :) I’ve been looking for such for some days but suddenly, there are posts popping up all around the internet with information on how to make one yourself. Which is very good because in my opinion it’s a faster way how to make your blog look to your taste and not use other copirighted templates (themes or whatever). I’m looking forward to see more popular tutorials from you. Keep it up.

  8. Nathan Chapman Says:
    September 2nd, 2008 at 9:19 am

    @ Maria:
    Hey, Thankyou!
    I just hope that it made enough sense to you.
    Is there anything you’d particularly like to know regarding themes?

    @All:
    Thanks for commenting guys!

Leave a Reply