Previous Posts, or Next Page?

Unfortunately, sometimes the logical thing to do and the “technically right” thing to do are polar opposites. Such is the case with those little tiny links at the bottom of your WordPress blog that send your reader into the pits of your archives. One must make a choice here… should I link to “page 2” of the blog archives using the words “previous posts” or “next page”?

Technically speaking, they are indeed previous posts. One would think that while a person is browsing the articles on your blog, they would naturally know what “previous posts/entries” meant, and would consequently know intuitively which link to click when presented with the options.

One would be wrong.

In fact, yours truly has been so indoctrinated by habit (and perhaps through digg’s “next” link) that I found myself more times than not, actually not reading the text of the link, and simply clicking based on the position of the link, and the direction of the arrows.

This was not acceptable. All my free themes, as well as the customs I had done, all had “previous entries” and “next entries”.

No, I haven’t gone back and changed them all yet … but I have implemented a new policy … and wrote some simple code to get them displaying correctly. Wanna see? OK…

The first challenge is getting the WordPress code working right.

The code for the “next page” link looks like this:

It seems as if WordPress wants us to use the “next page” phrase 🙂

But there’s also the “previous page” link to take care of. No problem…

Notice that we are using the « and » symbols to indicate next and previous. Again, this is just because it makes sense and it reinforces the idea of true forward and backward navigation. So currently, there are actually 2 links siting side by side, probably aligned left, with little or no spacing between them. With a little CSS magic, we can take care of that. Here’s the code in full … then I’ll give a brief explanation:

I embedded the CSS to save room, but feel free to name your divs and do this in the stylesheet. Basically, what I’ve done is calculated the width of the parent div (in my case, it was 450px) and divided the width by my 2 navigation divs. That way, we get one link on the far right of the parent, and one link on the far left (further reinforcing the idea of going to the next page or previous page). All this code does is floats the “previous page” link to the left, and aligns the text left, and floats the “next page” link to the right, and aligns the text right.

Presto! Now you have logical navigation links at the bottom of your archive pages. Feel free to insert this code in any WordPress template page that needs navigation.

Hope that helps! I know it saved me some frustration 🙂