[Resolved] Add Next Post button at the end of Blog post

[Hemant]

Hello Support Team,

I would like to get more ambitious today..

How do I add a “Next Post” Button at the bottom of the post where the post ends..

I am ok to get it achieved through elements/php/css

Would like to achieve something like this: https://www.postfun.com/business/these-restaurants-offer-food-freebies/

Page on which I would like to achieve:
Across all the posts in the blog: https://fatlossplanner.com

[David]

Hi there,

you can use this PHP Snippet to convert the themes Next Post link to a button:

function filter_single_post_navigation($output, $format, $link, $post){
    // display post title
    // $title = get_the_title($post);
    $title = __( 'Next Post', 'generatepresss' );
    $url   = get_permalink($post->ID);
    $class = 'button next-post';
    $rel   = 'next';
    return "<a href='$url' rel='$rel' class='$class'>$title</a>";
}

add_filter( 'next_post_link', 'filter_single_post_navigation', 10, 4);

You can use this CSS to force it to fill the space available:

.button.next-post {
    width: 100%;
    text-align: center;
}

[Hemant]

That worked like charm.. Thanks for the help David..

Anything we can do to hide the link? just above the next post button (link for previous post).. it shows the native link. I tried hiding it from the customize option in theme… but it seems the next button also gets hidden.

Here’s the test page:
https://fatlossplanner.com/test-next-post-button/

[David]

Try this CSS:

#nav-below .nav-previous {
    display: none;
}

[Hemant]

It worked… You are awesome…

[David]

You’re welcome

[Author]

Posts