LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » WordPress / WordPress Snippets » How To Add Next-Prev Posts Links With Thumbnails And Other Stuff?

How To Add Next-Prev Posts Links With Thumbnails And Other Stuff?

How-To-Add-Next-Prev-Posts-Links-With-Thumbnails-And-Other-Stuff
Just about every WordPress topic you’ll run over has help for heading off to the previous or next post. That is fine and best, however in WordPress 2.9 we got the capacity to have post thumbnails. Wouldn’t it be extraordinary to utilize thumbnails rather than or nearby our post titles? The answer is yes, it would. So I set out on a trip to make sense of how to add this usefulness to your subject, and have posted the results underneath. First and foremost for general WordPress clients, and afterward for Thesis clients.

Now if you are making your own WordPress theme then you must have to add goood features that are easy to add and will make your theme completely different. Showing only Next-Prev posts title is not catiching for readers to read those posts but if you will let him to view your attractive image then they must go to read that so from this you can get good SEO results too. Now without any more preface, just move and get your code to make your theme more beautiful.

Table of Contents

Features:

1.) Pure PHP code.
2.) Have to edit single.php file only.
3.) Add pagination on your all single post page.
4.) Display Text, Title, Thumb, Date, there.
5.) Easy to use and fully customizable.

How To Add Next-Prev Posts Links With Thumbnails And Other Stuff?

Step 1:) Copy the below code and Paste in in your Single Page(single.php) file.

<div id="post-nav">
    <?php $prevPost = get_previous_post(true);
        if($prevPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $prevPost->ID
            );
            $prevPost = get_posts($args);
            foreach ($prevPost as $post) {
                setup_postdata($post);
    ?>
        <div class="post-previous">
            <a class="previous" href="<?php the_permalink(); ?>">&laquo; Previous Story</a>
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
            <small><?php the_date('F j, Y'); ?></small>
        </div>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if

        $nextPost = get_next_post(true);
        if($nextPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $nextPost->ID
            );
            $nextPost = get_posts($args);
            foreach ($nextPost as $post) {
                setup_postdata($post);
    ?>
        <div class="post-next">
            <a class="next" href="<?php the_permalink(); ?>">Next Story &raquo;</a>
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
            <small><?php the_date('F j, Y'); ?></strong>
        </div>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
    ?>
</div>

Customization:

You can see more stuff from next post. Now you just have to add some CSS on it only. Rest all is done.

Theme Files Editing Warning:

Keep in mind that every code that you will add in your themes files will be removed when you will change the theme. So after changing your theme, you have to follow this article again and you will get everything back same as it is now.

Recommended For You:
How To Make CSS Sprites Images And Use Them To Speed Up Your Site?

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *