WordPress post navigation with the thumbnails

As we told we want to share some tutorials with you. Let us start with an easy tutorial. If you want a post navigation just like this blog please see the tutorial.

At these days almost all of the websites have a blog section and all firms trying to get more visitor with those blogs. For search engines, the text need to be unique and a little long. But what about visitors? The important thing is not to get visitors. The important part is keeping that visitors and gain some profit from them. So some effects in the text and outside of the text are very important. Sometimes easy tricks are taking too much effectivity. Post navigation is one of them.

We are trying to keep it very simple but we think that you already know the simple things when coding a template. Still, you can as questions about the tutorial at the comments. Please don’t hesitate.

First, we need to open our template files and find the “single.php”. This file shows the sites default single post file. At every templates WordPress default navigation code might be there if not a custom one at there. The default code is “the_post_navigation();”. This function only shows the next and previous post names with the link. As we told this is a simple tutorial. So let’s get a start.

First, comment the default WordPress post navigation code(use “//” at the start of the line or at the start use “/*” and at the end use “*/”.).

//the_post_navigation();
/*the_post_navigation();*/

Then we need to simply separate the next and the previous links. To do it we need to understand these functions.

get_previous_post();
get_next_post();

We think you already understand what they are. just like their name, these are to get the next and previous post functions. We just need to point featured images and titles for them. Here is our code for it:

//Previus post
$prev_post = get_previous_post();
$prev_title = get_the_title( $prev_post->ID); /*title*/
$prev_thumbnail = get_the_post_thumbnail( $prev_post->ID, 'large'); /*image*/
//Next post
$next_post = get_next_post();
$next_title = get_the_title( $next_post->ID); /*title*/
$next_thumbnail = get_the_post_thumbnail( $next_post->ID, 'large'); /*image*/
//you can change large to small, medium etc just like the thumbnail classes.

Now we have all the things we can use. We just need to call them. Here we go

$args = array(
   'prev_text'  => '<div class="post-nav-image">'.$prev_thumbnail.'<span>'.$prev_title.'</span></div>',
   'next_text'  => '<div class="post-nav-image">'.$next_thumbnail.'<span>'.$next_title.'</span></div>'
);

the_post_navigation( $args );

Now what we did is edit a default WordPress function with arguments. You can refresh your post now. You are going to see the next and previous post names and the featured images. As you may see in the code we already add some divs and spans. These are just for styling. Here what we did for the styling:

.post-nav-image {
position: relative;
}
.post-nav-image span {
position: absolute;
bottom: 0;
right: 0;
color: #fff;
text-shadow: 1px 1px 1px #000;
margin: 0px 10px 10px 0px;
}

After that when you refresh the site you need to something like our blog. Maybe the images are going to be a little big. But it will be just normal because we adjust our image sizes for it. We are sure you can do this too.

We hope you like our first tutorial.

As told please do not hesitate to ask anything about this tutorial the comments.

Leave a Reply

Your email address will not be published.