Custom Previous/Next Navigation with the Thesis Theme Part II – Previous/Next Navigation in the Sidebar

Okay, in Part I, I showed how I got a custom previous/next post link where I wanted it, namely below each single post, but not so far down as to be below the comments (for some reason, this location bothered me).

Now we move on to putting a previous/next link in the sidebar, which meant the chance for me to feel extra-special about how awesome I am. (Note: Yes, this is sad. It is also true.)

One of the things I like most about the design of The Caucus (the New York Times politics blog) is the interesting content and navigation-type stuff happening in the sidebar. Specifically, they have a very cool previous/next post link tandem happening in the top of the sidebar, when you’re reading a single post. I wanted to mimic this, because mimicking things makes me happy.

First, I knew I’d have to add the function before the sidebars, or before sidebar_1 (I think both would probably work). I also knew I would most likely have to use a table to get the previous and next links to sit the way I wanted them to, with a separator in the middle, and one link on each side. So, unlike the prev/next links under the single post, now I would have to use two different calls, one for the previous post and one for the next post.

After some searching I found the code I needed, in the incredibly helpful list of template tags in the Wordpress Codex. The two I needed were:

<?php previous_post_link(); ?>

and

<?php next_post_link(); ?>

Now I needed to put all that into a custom function, like so:

function custom_sidebar_post_nav () {
if (is_single()){
?>
<div id="sidebar_post_nav">
<table id="sidebar_post_nav_table"><tr>
<td class="lf"><?php previous_post_link(); ?></td>
<td class="rt"><?php next_post_link(); ?></td></tr></table>
</div>
<?php
	}
}
add_action('thesis_hook_before_sidebar_1', 'custom_sidebar_post_nav');

Now, breaking this down a little, you’ll notice that the function starts with:

if (is_single()){

Again, this function only is necessary when someone’s reading a single post. If they’re on the homepage, they’ll have other things to distract them.

Next you’ll see I created a div and a table to house the two links. The table I need, but I’m not sure that I need the div. (I tend to get div happy, I think. It’s part of being a very frightened man – you take precautions.)

The next step was styling the table. Specifically I had to play a lot with spacing and such, as I have pretty weird dimensions happening with my sidebar and main content area. And I played with the text-align also, because when I didn’t align the text a certain way, it looked wonky. In any event, here’s the css I used, in case it’s helpful.

.custom table#sidebar_post_nav_table {width:258px }

.custom table#sidebar_post_nav_table td {vertical-align:top; }

.custom table#sidebar_post_nav_table td.lf {
padding-left:0;
padding-right:10px;
width:111px;
text-align:left;
}

.custom table#sidebar_post_nav_table td.rt {
border-left:1px solid #ddd;
padding-right:0;
padding-left:10px;
width:111px;
text-align:right;
}

You can see the final result here, on a single post on The Faucet, my “breaking news” blog.

So, that’s it. Let me know any thoughts, suggestions, questions.

Tagged as: previous/next, previous/next sidebar, sidebar navigation, thesis, thesis customization, thesis theme