Single Post Navigation Links in WordPress – Part 1: The Problem

There are two different types of navigation links for posts.

Type 1 – Older/Newer Posts: These links appear on pages that show post excerpts. If a query produces more posts than are set to appear on one single page, WordPress, by default, supplies links to the additional post pages by displaying links to “older posts” and “newer posts” where applicable.

Type 2 – Previous/Next Post: Previous-Post and Next-Post links appear on single post pages. When a request results in more than one post to be displayed, the single post view provides links to “previous-post-name” and “next-post-name” where applicable.

Before WordPress version 3.0, the link navigation areas would have been displayed regardless of whether such links actually existed. If there were no links to display and no CSS styling had been applied to the navigation area, then there would just be some extra space (which in itself could be annoying), but if like many of us you had applied CSS styling to these links, you would get that embarrassing “all dressed up and nowhere to go” look.

What was needed was a conditional to first determine if there were any links to display, and then and only then, display the links navigation area.

Finally, in WordPress 3.0, a conditional was provided as part of the core to cover the case in “type 1” above. Thanks WordPress! I do, however, have to wonder why no matching conditional was provided for the “type 2” occurrence.

In his post: CONDITIONAL PAGE/POST NAVIGATION LINKS IN WORDPRESS (REDUX), Eric Martin provides a conditional to deal with type 1 link navigation, (applicable to pre v3.0 WordPress), but states as to type 2: “As for the single post next/previous links, I decided to remove the check because I’ll always have more than one entry.”

But sometimes there is only one post. My layout is such that posts are displayed by categories. Each category is displayed via a corresponding page. To achieve this, I use the “Smarter Navigation” plugin, and because of this, I do have occasions where there is a single post to display, either because it’s the only one in its category, or because it’s the only one to appear in search results. When there is only one post to display, there are no previous/next post links. I would like the display for such cases to be correct, meaning no display of the post navigation links’ area if there are no previous/next posts.

If the CSS for the area consists of a background color only, it will not show up when there are no links. However, if you set ANY of margins/padding/height/width/borders, the navigation CSS styling will become visible.

Previous/next post links’ navigation in single post view – with links

Navigation Links Area with Previous/Next Posts

Previous/next post links’ navigation in single post view – without links

Navigation Links Area with No Previous/Next Posts

By eliminating margins, paddings, and width, I was able to minimize the visible portion of the navigation area (except for the display of the borders I was unable to give up.) In fact, you might not have even noticed it except for my pointing it out (shoot self in foot?)

I do not have a fix for this – yet! That’s where the “Part 1” in the title comes in. I plan to either hunt down a fix, or create one, thus “Part 2.” The only reason I’m posting this now is just in case the wheel has already been invented and I was unable to find it. If you already have a solution, please feel free to share.. 🙂

Leave a Reply