How to Add Previous and Next Post Links with Thumbnails in WordPress

Do you want good looking post navigation links with corresponding thumbnails at the bottom of your post, then this is for you.

check mark

This tutorials requires you to add custom code in WordPress. “Code Snippets” is an easy, clean and simple plugin to run and manage PHP code snippets on your website. It removes the need to add custom snippets directly to your theme’s functions.php file. Please read our tutorial on how to use “Code Snippets” or download the plugin here.

<div id="post-nav">
	<?php global $post;
    $prevPost = get_previous_post(false);
        if($prevPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $prevPost->ID
            );
            $prevPost = get_posts($args);
            foreach ($prevPost as $post) {
                setup_postdata($post);
    ?>
        <a class="post-previous" href="<?php the_permalink(); ?>">
				<div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.1),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">
            <div class="post-nav">Previous</div>
            <h3 class="post-nav-title"><?php the_title(); ?></h3>
        </div></a>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
        $nextPost = get_next_post(false);
        if($nextPost) {
            $args = array(
                'posts_per_page' => 1,
                'include' => $nextPost->ID
            );
            $nextPost = get_posts($args);
            foreach ($nextPost as $post) {
                setup_postdata($post);
    ?>
        <a class="post-next" href="<?php the_permalink(); ?>">
        <div class="post-nav-wrap" style="background: linear-gradient(0deg,rgba(52,62,71,0.6),rgba(52,62,71,0.3)),url('<?php the_post_thumbnail_url(); ?>');">
            <h3 class="post-nav-title"><?php the_title(); ?></h3>
            <div class="post-nav">Next</div>
        </div></a>
    <?php
                wp_reset_postdata();
            } //end foreach
        } // end if
    ?>
</div>
.post-nav {
    background-color: #ff3366;
    color: #fff !important;
}
#post-nav a {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    #post-nav a {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }
}
#post-nav .post-nav-wrap {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 120px;
    height: 100%;
    padding: calc(6% + 1em) 5%;
    -webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
    -webkit-transition: -webkit-box-shadow 500ms;
    transition: -webkit-box-shadow 500ms;
    transition: box-shadow 500ms;
    transition: box-shadow 500ms, -webkit-box-shadow 500ms;
    position: relative;
}
#post-nav .post-nav-wrap:hover {
    -webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
}
.post-nav-wrap>* {
    color: #fff;
}
.post-nav-date {
    font-size: 0.9em;
}
.post-nav-title {
    margin: 5px 0 !important;
}
.post-nav {
    min-width: 60px;
    position: absolute;
    top: 0;
    border-radius: 0 0 2px 0;
}
.post-nav:first-child {
    left: 0;
}
.post-nav:last-child {
    right: 0;
}
Previous

How to Add Functionality with functions.php

How to Add Custom Code Snippets in WordPress

Next

Leave a Comment

0 Shares
Share
Tweet
Share
Email
Secured By miniOrange