WordPress Theme Design - Body and Sidebar

Leading up to now we've managed to build template files for our header, footer and stylesheet. All that's left, right now, is to build template files for our index.php and sidebar.php files. For the time being we're going to keep these files as simple as possible - just like our header, footer and stylesheet.

After this post is complete we're one post away from our super basic WordPress template. Let's get started.

The Sidebar.php File

For now we're only interested in setting up the basic sidebar so we'll skip over adding any content to it. All the file really needs to contain is some basic text just to signify the sidebar itself. Later on we'll talk about floating the sidebar and getting it exactly where we want it - that's still a short while away though.

For now you simply want to include some basic text in your file - just "This is the Sidebar" will do.

The Loop and Index.php

The WordPress Loop is the code that really controls any listing of your posts. Whether it's a category page, post, or Page you'll be using the loop to call your posts. Most of the hard work is all behind the scenes - you just need to familiarize yourself with the basics. For now we're interested in running a very basic version of the loop so we'll keep it simple. When we start talking about customizing a post we'll get into more detail.

The Loop in Action

Below you'll see a basic version of the WordPress Loop. We're not going to do anything fancy with it right now - just set it up to display posts. The code below will display each post's title as well as the post's content. Simply add the following text to your index.php file and your loop will be ready.

<?php if (have_posts() : while (the_post()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; else : endif; ?>

The code above is a relatively simplified Loop. When executed it will simply display all post titles and the post content. It won't look spectacular but it will do the job.

Calling the other Templates

At this point our basic starting theme is almost done. In order to bring everything together we need to include a few more lines of code. WordPress offers some simple tags for calling our header, footer and sidebar which we need to add to our index.php in order to get things running.

Thankfully the tags we need are really easy to remember - it's just a case of putting them in the right place. In an un-styled page we want our content to behave a certain way. The basic page structure requires that our header and footer always start and finish the page so we know right off the bat that they'll lead and close our index.php file.

Besides our header and footer we also need to add the sidebar. Bare in mind that your content should always precede your sidebar text. Recognizing this your sidebar should always be called after your content but before your footer - here's how it'll look:

<?php get_header(); ?>
  Loop Goes Here
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Once you've done this boot up your version of WordPress sandbox and you're ready to go. Tomorrow we'll begin dissecting playing around with the theme's color and typography.