Build Your Own Business Website header image

Customize Next & Previous Posts Links – Part 4 – Create Custom Post Navigation

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is the 4th in an 8 part series that shows how to customize the Next Post/Previous Post links in Thesis. Now that we have removed the Thesis filters we are going to create our own next post/previous post image links.

Video Transcript

So now we’re going to create our own previous next post but instead, what we’re going to use is an image. So if we come back over here to custom functions and we’re going to say add action… oh no, I’m sorry. We’re going to create a function first. Function and then custom previous next post…okay and we may as well do our add action, control copy, control V and then it’s just going to be an add action and then we’re going to add this custom previous next post. Okay so we’ve got our function and now we’ve got our action.

And so the next thing we’re going to do then is we are going to use the WordPress previous post link and next post link. And so let’s take a look at that on the WordPress codex. Previous post link… so the previous post link will allow you to… well, it creates the link in the first place and then it lets you replace the link with some other text string like the post title. And what we’re going to do is we’re not going to use the post title, we are going to use the image reference for this.

So the expression is previous post link…let’s see, let’s look at the example. Previous post link… if we just use that right there, control copy and then actually, I think, what we want to do is this one here. Previous post link with the link and then the previous category and then true… let’s see… what does true mean? True means indicates whether the previous post must be within the same category… only post with the current category will be displayed. So we’re going to say false to that but if we come over here now and you can see that what it’s doing is it’s creating this navigation so we’re going to do the same thing actually. We’re actually just going to go ahead and copy all of this really.

Let’s see, where does that start off there? It starts right there so we’re just going to copy all of this Thesis code and come over here to our function. And then in our Thesis code, we are going to…so get previous post, get next post, previous post text… we don’t really care about that. So we’re just going to go ahead and take that out. And what happens here is that previous is going to get the previous post id if there is one and next is going to get the next post id if there is one. That’s why we kept this logic. So if there’s a next post or if there’s a previous post which is what this logic does. So if previous or if next then create this link or create this HTML structure. And then if it’s previous and if it’s previous and next then what we’re going to do is echo this… although we are going to get rid of add class. We are going to get rid of this…pardon me. We are going to get rid of this previous text because we don’t have any previous text any longer and then we’re going to keep that previous post link. We’re going to keep the link but instead of title here, what we’re going to use is an image link.

So that is going to be imgsrc equals and then double quotes and double quotes and then title equals let’s see, go to previous post. And then we’re going to close out that and otherwise, we are going to do this one. Control copy… otherwise here, first, we are going to get rid of next text… delete. And instead of title, we’re going to put that one in. Go to next post and we are going to have to put an address in here as well. And so, let’s go get my address. I have 2 images that I created for this purpose. If we go up here to… let’s see, let’s go to wp admin and we’ve got to get the address of those images.

So if we go to the media library… okay, my previous is going to be my left arrow. We’ll grab that URL, come over to our code, URL in this image source. So img source equals that… okay and then we come back over to our media library and…well, that was our left arrow. And then we get our right arrow, copy, go back to our media here and paste that address. Okay, we should be good to go. We’re double checking to see if there’s a previous post and if there is a next post. And then if there is a previous post or a next post then we’ll create this HTML structure. If it’s a previous post then if its previous and next, we’ll create this structure. If it’s next then we’ll create this structure and then we close out. Okay so let’s save the function, let’s upload the function and let’s see.

Drumrollplease.Oh isn’t that interesting? It’s right there. Blog…oh you know what? I think I have to say if is single for this because… yes, I do. But you can see it does say go to previous post, go to next post and if we hit go to previous post, it’s Northern Spy. If we go to next post, it’s Morello Cherry.

Okay so then we need to come back here and say if is singular then do this. Let’s go ahead and tab that in. I just learned if is singular from Godhammer last week so let’s try that. Let’s upload this and let’s test it.

Okay so now it exists on a single post page but hopefully… oh singular also affects individual pages, right. That’s doesn’t make any sense. We should say if is single. You can see it doesn’t show up on the blog, right? So that’s a mistake…if is single, not singular because singular picks up pages as well. If is single, save document and then upload document and then test it.

Okay so we go to Bing Cherry 2 so if we go to next post, this is the latest post so there should only be one arrow. Oh my gosh, it works! I can’t believe that. So many of my things I’ve tried without perfectly testing it in the past have not been working lately.

0 Comments… add one
0 comments… add one

Leave a Comment