The Design Canopy

A lot of bloggers have a side column (or other area) dedicated for posting links and short snippets of information they come across. This is handy for those times when you want to share something but don’t feel like it warrants an entire blog post. For sake of clarity, I’ve labeled these such posts side notes.

It is fairly simple to implement these separate side notes using WordPress categories and the query_posts() and get_posts() functions.

We will be using a very popular theme for WordPress, Hemingway by Kyle Neath, to illustrate this functionality since the layout allows for a very quick and easy implementation.

As a side note (no pun intended), if you are looking for a way to implement side notes into your main blog loop (such as Kottke or Photo Matt), I would point you to Photo Matt’s technique (WordPress only).

Initial Setup

There are a few things to do before we delve into the markup and code, first make a new category in your WordPress admin section and name it “Side Notes” (or “Asides”, whichever you prefer, this doesn’t matter). Make sure to remember the category ID number as we will need it later, in this example it’s ID #3.

I’m assuming that you already have a copy of the Hemingway theme, so next make a backup of the index.php and we’ll get started.

Examining What’s There

Go ahead and activate Hemingway if it’s not already your current theme. If you have at least two posts published then your site should look something similar to Figure 1.

Now let’s look at the index.php file. The WordPress loop for the two posts on the home page starts at line six and ends at line thirty (what’s the loop?). Where we are going to be working is line five through twenty-two. This is the only place where we are going to be changing markup and code; I would recommend placing a few line breaks before and after this section to give some visual separation.

You can view the workspace in Figure 2 (disregard the line numbers in the reproduction below, as they won’t be the same as your text editor’s).

The Goal

Essentially, what we’re going to do is replace the post on the right side with a column that shows the ten latest side notes, and then at the end of this tutorial we’ll go over how to add several more posts underneath the latest one to help fill out the empty space on the left.

Step One - Clearing the Right Side

First, replace the number with the showposts parameter in the query_posts() function from two to one (see Figure 3a & 3b).

This does what you think it would, now when the loop is started it takes only one post (the most recent) from the database and not two. Your site should now resemble Figure 3c.

Step Two - Removing Extraneous PHP

Now you’ll want to delete the PHP code that gives the latest post a “first” class. There are three commands that handle this (see Figure 4a), and you’ll just simply delete these instances as shown in Figure 4b. However, as you’ll note in Figure 4b, you want to leave the actual class “first” (along with “story”), we’re just taking away the PHP that automates it.

You’ll notice that this doesn’t change the layout of your site, it still looks the same as it did after the first step (see Figure 3c).

Step Three - Adding the Markup for The Side Notes

This is a very simple step, we are just going to add a <div> for the side notes and add a title (see Figure 5a & 5b).

You will notice from Figure 5b that we gave the <div> in which the side notes will be placed a class name of “story”. We did this because “story” is an existing class and already has the necessary CSS associated with it; if we were building this from scratch a more semantic class or id would be used, such as “side-notes” or “asides”.

Your site should resemble Figure 5c now.

Step Four - Adding the PHP Code for The Side Notes

Before you implement this change go ahead and publish three quick posts and categorize them in the Side Notes category only. We are going to be placing the PHP code underneath the Side Notes title (see Figure 6a).

We will use the get_posts() function with the numberposts and category parameters to select the ten most recent posts in the “Side Notes” category (see Figure 6b). The foreach($posts as $post) command runs as the loop and the the_content() function pulls the content of each side note post from the database. The endforeach command closes the loop (see more on get_posts()).

Once those changes are implemented your site should look similar to Figure 6c.

Step Five - Excluding Side Notes from the Main Blog Loop

If you notice in Figure 6c the latest side note is being displayed as the latest post also. This makes sense as the side notes are still part of the main blog loop. So we will have to exclude posts that are published in the side notes category from the main blog loop.

Surprisingly, this is quite simple since we are already using the query_posts() function to grab the latest post from the loop. All we have to do is add a parameter in the query that will exclude the side notes category (see Figure 7a & 7b).

We are going to use the parameter, cat. When you add cat=-3 to the query_posts() function it excludes any posts that are published in category 3, which is my side notes category ID (see more on query_posts()).

Make sure you use your unique ID number that represents your side notes category.

Now your site should have the latest side notes on the right side and the latest blog post on the left side (see Figure 7c).

Final Steps

At this state it’s fully functional, but sooner or later you’ll have ten side notes displaying on the front page and only one post; which may or may not look similar to Figure 8 depending on the length of your post and/or side notes.

The last part of this tutorial will show you how to display more than one post on the left side, if you so desire. First, let’s take a look at what our markup and code should look like now (see Figure 9).

To add more posts all we have to do is move a few things around, add one more <div> and change the showposts parameter in the query_posts() function. So, without further ado…

Step Six - Rearranging

We have to move the endwhile command before the code that retrieves the side notes since we will be running through the main loop more than once (see Figure 10a & 10b). If we leave it in its current state it will display the entire side notes section multiple times next to each individual post. We are going to set it up to pull out the posts first and then pull out the side notes.

This step won’t change the current display of your site.

Step Seven - Moving Markup

Now we’re going to move the <div> with the two classes “story” and “first” outside of the loop so that it appears only once (see Figure 11a & 11b). If it appears more than once it will break the layout due to the CSS associated with it.

Like step six, this step shouldn’t change the display of your site.

Step Eight - Getting More Posts and Adding More Markup

In this last step we’re going to change the number of posts that we’re querying (same as step one) and add a <div> around each post (see Figure 12a & 12b).

Now the posts and side notes are better balanced with respect to one another (see Figure 13).

Modifying Posts and Side Notes Numbers

If you would like to change either the number of posts or side notes displayed on the front page all you have to do is change the numbers in the parameters passed to the query_posts() and get_posts() functions, showposts and numberposts, respectively. You can have any number you wish in either one. I’ve high-lighted the two lines to do this below in Figure 14.

However, depending on which version of WordPress you’re running, if you call for more posts than you have you will return a PHP error message that will break your layout. (The latest version of WordPress does not give you an error.)

That’s All!

If I missed something please let me know and I’ll update it, or if you have any questions or wish me to clarify something further don’t hesitate to ask.