You may have noticed I did a little bit of tweaking to the Single Post next/previous navigation in the hopes of making the archives a little more user friendly. Mystique uses next_post_link and previous_post_link which default to a time-based navigation—which isn’t helpful when most of my users are more interested in categories.

I couldn’t find any good plug-ins for multi-category navigation (which is odd) so I popped open single.php and started playing.

The base for this code modification is Mystique WordPress Theme created by Digital Nature now defunct version 2.4.2. Most of the code below should work under any theme, but the specific locations given are from Mystique.

Always make a copy of the file before you start editing so that you can replace it if something goes wrong!

The Code

In single.php the code for the navigation appears right after the Have_Posts line, so you don’t even have to scroll to find it.

This is the initial code:

      

          
< ?php previous_post_link('« %link') ?>
          
< ?php next_post_link('%link »') ?>
        

I’d like to make something more sophisticated later, but for now I’m just going to add a ‘by category’ navigation option to go with the ‘by date.’

I’m using the built in functionality of next_post_link and previous_post_link to get this done. Both of these use the same four parameters: (format, link, in_same_cat, excluded_categories).

format: This tells WordPress if anything should come before or after the %link. The value for %link is defined in the next parameters down.

link: This is the text for the link and it defaults to the post’s title (‘%title’). If you want to use something like ‘Next’ and ‘Previous’, you’d put that here instead.

in_same_cat: This defaults to FALSE. To only show posts in the same category, this needs to be set to TRUE.

excluded_categories: This should allow you to enter the category ID of the ones you don’t want to show in the list… but when I tried to exclude the top level categories it didn’t work.

In order to navigate by category, I need to add some information.

previous_post_link('[By Category] « « %link', '%title', TRUE)

In order to distinguish the two navigation choices, I added [By Category] and a second double arrow symbol to the format. I also included the values ‘%title’ and TRUE. The %title is the title of the post and the TRUE tells WordPress to only use posts in the same top level category as the current post.

I wanted to keep the by date navigation as well (in case anyone was using it) so I added a new DIV below the first one and hopefully the [By Date/Category] notes will make it obvious to the reader what’s going on.

Here’s what the new code looks like:

          
< ?php previous_post_link('[By Date] « %link') ?>
          
< ?php next_post_link('%link »') ?>
        
        

          
< ?php previous_post_link('[By Category] « « %link', '%title', TRUE) ?>
          
< ?php next_post_link('%link » »', '%title', TRUE) ?>
        

The CSS

Of course now the font size for the links is too large, so it’s time to hop into style.css and shrink it down.

You’ll want to search for ‘single-navigation’ within the file, which will take you down into the /* post */ section.

I shrank my text down from 120% to 80%, but you can play around with the size that’s best for you. I have long post titles and if I didn’t shrink things they ended up breaking into two lines (which is four lines).
Note: Changing the a{} will only affect the text link. If I wanted to change the [By Date/Category] as well, I would need to add font-size:80%; to div{} and take it out of a{}.

New code:

.single-navigation a{font-size:80%;border:0;background-color:transparent;padding:2px 4px;color:#888;text-shadow:#fff 1px 1px 1px;text-decoration:none;}
.single-navigation a:hover{color:#3873bd;}
.single-navigation div{display:block;max-width:49%;line-height:normal;color:#888;}
.single-navigation .alignright{text-align:right;}

Further Research

What I’d like to be able to do is have a full breadcrumbs navigation so that you’d be able to move around in whichever categories the post was in… but that will take some more complex coding I think.

Still, adding the categories should make it easier on folks who aren’t looking to read all of the subblogs, so I’m chalking it up as a win for now. If you happen to know of any plug-ins that would give me that sort of breadcrumb navigation, please let me know in the comments!