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.

1, 'include' => $prevPost->ID ); $prevPost = get_posts($args); foreach ($prevPost as $post) { setup_postdata($post); ?>
Previous

1, 'include' => $nextPost->ID ); $nextPost = get_posts($args); foreach ($nextPost as $post) { setup_postdata($post); ?>

Next
.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;
}

About Bas Martens

Bas MartensLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet rhoncus arcu non aliquet. Sed tempor mauris a purus porttitor, ac convallis arcu venenatis. Donec lorem erat, ornare in augue at, pharetra cursus mauris.

Leave a Comment

Thank you for leaving a comment. All comments are moderated according to our comment policy. Keep comments in english please. We will never publish your email address.