The Components of a Theme

As I'm sure you're probably aware, themes are made up of many different files, each of which play their respective part in the displaying or functionality of a theme. Let's have a look at some of the most common files WordPress recognizes by default that we'll be dealing with. Most files are self explanatory by their name alone:

header.php

Usually this file contains our theme up until </head>, it also plays home to the wp_head() function, which is one of the most essential hooks in WordPress.

sidebar.php

An optional file called by the use of get_sidebar(), you can use this file for a sidebar, navigation or anything similar. This is also where you will usually include the code to allow widgets to run, if your theme allows them.

footer.php

An easy part to guess, this is where the theme wraps up and also where you can register a second area for widgets to display. Of course you can display widgets anywhere you want, but sidebar and footer are the most common.

page.php

Used to display a single page - not to be confused with a post.

single.php

The post file, used to display a single blog post but very similar to page.php in code.

index.php

As you can probably guess, index does the chunk of the work for a blog; displaying posts, search results, serving up error messages and so on.

functions.php

The functions file may be new to you. This is where theme specific functions are stored - most commonly the functions to register widget ready areas.

comments.php

Displays a loop similar to index.php which iterates through comments. This is also where trackbacks, nested comments and other related functionality is performed.

A theme can use as many or as few theme files as desired, but these are the files most common to almost every theme. Theme file structure is essentially the decision of the theme developer - for example there could be vimeo.php, youtube.php and audio.php that display their respective post types rather than having all of the code bundled in to one page.php or single.php.

Footer.php

To finish off our work here, we are going to create our footer.php file, which too will use the #footer that we declared in our style.css, and will just contain some basic copyright information as well as a link to the stories and comments RSS feed at the bottom.


<div id="footer">
    <p>
    <strong>Copyright 2011 <?php bloginfo('name'); ?> | All Rights Reserved.</strong> </a> 
    Designed by <a href="http://slackrmedia.com">SlackrMedia</a>
    </p>
    <p><a href="<?php bloginfo('rss2_url'); ?>">Latest Stories RSS</a> | <a href="<?php comments_rss_link('comment feed'); ?>">Comments RSS</a></p>
    </div>
</div>

</body>
</html>

Category.php

The category.php will serve as the file that, whenever a user looks at a specific post category, time for posts, or specific author, will be the file that serves up the information to display posts. As with our page.php, most of the code here is going to be the exact same as the single.php we created before, except for a chunk right at the beginning.

<?php get_header(); ?>

    <div id="blog">
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
         
    <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
      <?php /* If this is a category archive */ if (is_category()) { ?>
        <h2>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>
      <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
        <h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
      <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
        <h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>
      <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
        <h2>Archive for <?php the_time('F, Y'); ?>:</h2>
      <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
        <h2>Archive for <?php the_time('Y'); ?>:</h2>
      <?php /* If this is an author archive */ } elseif (is_author()) { ?>
        <h2>Author Archive</h2>
      <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
        <h2>Blog Archives</h2>
    <?php } ?>
         
        <div class="post">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <div class="entry">
            <?php the_content(); ?>

                <p class="postmetadata">
                <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
                </p>

            </div>

        </div>
         
<?php endwhile; ?>

    <div class="navigation">
        <?php posts_nav_link(); ?>
    </div>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>   
<?php get_footer(); ?>

Page.php

When you create a page in WordPress, a different file is used to display the content of what you typed into the page, and that is page.php. The code will look almost completely identical to what we typed up in our single.php, except since it is a page we are going to omit the comments template, and change the post navigation slightly to handle a page instead of a post. Other than that, the code will be exactly the same.

<?php get_header(); ?>

    <div id="blog">
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
         
        <div class="post">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>


            <div class="entry">
            <?php the_content(); ?>

                <p class="postmetadata">
                <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
                </p>

            </div>

        </div>
         
<?php endwhile; ?>

    <div class="navigation">
        <?php posts_nav_link(); ?>
    </div>

<?php endif; ?>
</div>

<?php get_sidebar(); ?>   
<?php get_footer(); ?>

Comments.php

With the release of WordPress 3.0 has meant the standardizing of comments forms throughout all WordPress themes making it easier for theme authors to and plugin developers since the comments form can be modified via hooks.

Single.php

The single.php is what will be used for a single post page, and most of the code should look pretty similar since we've already coded up our index.php. Really the only thing that's different is that we have added in our comments-template div, and the code to include the comments.php.

<?php get_header(); ?>

    <div id="blog">
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
         
        <div class="post">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <div class="entry">   
                <?php the_post_thumbnail(); ?>
                <?php the_content(); ?>

                <p class="postmetadata">
                <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
                </p>

            </div>

            <div class="comments-template">
                <?php comments_template(); ?>
            </div>
    </div>

<?php endwhile; ?>
     
    <div class="navigation">  
        <?php previous_post_link('< %link') ?> <?php next_post_link(' %link >') ?>
    </div>

<?php endif; ?>
</div>

<?php get_sidebar(); ?>   
<?php get_footer(); ?>

Sidebar.php

The sidebar.php is, as you guessed, the file that will display all of the information we want in the sidebar. Since we have already included the file in our index.php, all we have to do is put the code in this file and our sidebar will show up on the homepage.

1 2 3 4 5

<div class="sidebar"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>   <?php endif; ?> </div>

Yup, that will be all of the code that's added to our sidebar.php to make it functional. We call the div that we created in our style.css, and the code below will make it so that we can add widgets to our sidebar in the order and way we want them via the WordPress backend. However, like many features, we have to modify ourfunctions.php file first to make this feature work properly.

1 2 3

//Some simple code for our widget-enabled sidebar if ( function_exists('register_sidebar') )     register_sidebar();

The code just tells WordPress to register a sidebar which we called in our sidebar.php. 

Enabling Post Thumbnails

We have added our code to show the post thumbnails on the homepage, but at the moment nothing happens as we have not actually enabled the feature to work. Now open up the functions.php that we worked on before, and the below code should be added after your menu navigation code.

Index.php

The index.php will be the home page of our website, and will contain code to include our header, footer, and sidebar, which I will explain below, as well as the code to include the most recent posts from our blog and take advantage of WordPress 3.0's post thumbnails feature.

Styling the Navigation

We have our custom header navigation up and running, but at the moment it just looks like a boring old list of links that unfortunately, are aesthetically unappealing. To fix this, we will create a class called nav in our style.css.

Adding Custom Navigation

Now that we have coded up our header.php with our basic information and our blog's name, we can add our custom navigation menu, a feature that was introduced in WordPress 3.0. Before we actually add the code to our header.php though, we have to first open up the functions.php, and add the necessary code to enable the custom menus.

Header.php Creation

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />

<title><?php wp_title ( '|', true,'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />