Custom Previous/Next Navigation with the Thesis Theme

So, as this is my first post on this blog, let me start everything off by saying I’m not much for thinking I know enough about site design and code and whatnot to write tutorials. However, since so many tutorials have been helpful to me, and since I’m so psyched that I got this stuff working the way I wanted to, I thought I’d share a bit of what went down with the attempt to customize my previous/next post navigation, using the Thesis theme. Who knows? Maybe it’ll help some people.

First of all, I love Thesis. I’m discovering new possibilities with it all the time.
(I recently upgraded to the developer option so I could use it on several different sites and blogs. As an example of how extensive the customization options are, check out Thesis on my fake news site, The National Protrusion, and on my blog of a (fictional) murder suspect, I Didn’t Kill Ed.)

I should probably back up a little and preface this by saying that my main site is a fake news site. So my motivation for most of the changes and additions and customizations I make to Thesis is that I want my site to look something like a real news site, namely The New York Times. I’m fascinated with how new sites work, the different functionality and navigational tools they employ, and so on. (I’ll probably do a post on the general challenge of mimicking a news site, but suffice it to say that I’m learning I get almost as much enjoyment, if not more, from making the site function like a news site, than I do from writing the fake news articles and content.)

So in that vein, I recently embarked on a goal of making some blogs that would accentuate the main site and offer different, more specific information, much like the blogs on real news sites do. So far, I’ve created this blog and The Faucet, a “breaking news” blog that is actually a “breaking fake news” blog. In terms of design of the blogs, as is probably apparent, I am once again partial to the NYT design, especially The Caucus, which is their political news blog.

One of the things the The Caucus (and all the Times blogs, from what I can tell) does really well is navigation. When you’re reading a single post, it’s very clear what the previous and next posts are, and how you can get to them. (They also employ what I think is a great feature – prev/next post links in the sidebar. I’ve implemented this on the blogs I just created, and I’ll go into the details of how I did it in Part II.)

In terms of the previous/next navigation below the single post, I wanted to basically keep it the same, but move it above where it sits by default in thesis – under the comments. I wanted it somewhere closer to the end of the actual post itself.

To make this happen, I needed to add a custom function in the right place, with the call to get the previous/next post links. But first I had to find out what php snippet I’d need to get the previous and next post links. I found it in this post, which lists all the Thesis default hooks. The snippet I needed is:

<?php thesis_prev_next_posts(); ?>

Now, the tricky thing for me was finding the function that corresponded to the default previous/next link. I don’t know exactly why this was tricky for me, but alas… I just couldn’t figure it out, until I stumbled upon the reality that the Thesis default hooks list also lists all the corresponding functions for those hooks. So that helped. A lot. Long story short, it’s the after_content hook. So here’s the function as I finally cobbled it together:

function custom_prev_next () {
if (is_single()) {
?>
<?php thesis_prev_next_posts(); ?>
<?php
	}
}
add_action('thesis_hook_after_post', 'custom_prev_next');

UPDATE: I forgot to mention the if statement in the function, which is there because we’re only concerned with previous/next navigation on single posts.

However, I soon realized I wanted to remove the old version of the previous/next link because having two of them seemed unnecessary and messy. (I tried keeping both for a while, but my OCD nature wouldn’t let that happen.)

So I needed to remove the old previous/next function. But I didn’t really know how to do this. Do I need to do a whole new custom function just to remove the old links? After some forum searches, I realized I could just add it to the existing custom function I was already creating. So the line to be added, which will remove the old previous/next links is:

remove_action('thesis_hook_after_content', 'thesis_prev_next_posts');

And then I just had to add that to my custom function, like so:

function custom_prev_next () {
if (is_single()) {
?>
<?php thesis_prev_next_posts(); ?>
<?php
	}
}
remove_action('thesis_hook_after_content', 'thesis_prev_next_posts');
add_action('thesis_hook_after_post', 'custom_prev_next');

So that was the easier one. In Part II, I’ll talk about getting the nifty sidebar previous/next navigation to work, which made me feel cool. (Caution: It may very well not make you feel cool – I have a low threshold.) Any questions, comments, etc… I’d love to hear them.

UPDATE: Part II is up. You can see it here.

Share and Enjoy: