How to get link and title of next and previous post on single page

Question

Guys

How can I get the link and title of both next and previous post on the single page? Just like in the screenshot below.

I try to use this but nothing shows up.

$prev = get_previous_post();
$next = get_next_post();
$prev_title = $prev ? get_the_title($prev) : 'Current is First Post';
$next_title = $next ? get_the_title($next) : 'Current is Last Post';

Thank you so much.

Answer 1

Here's what I did.

$previous = get_previous_post();
$next = get_next_post();

if ( get_next_post() ) { ?>
  <p><?php echo get_the_title($next) ?></p>
<?php } if ( get_previous_post() ) { ?>
  <p><?php echo get_the_title($previous) ?></p>
<?php } ?>

Answer 2

I believe what you want are the previous_post_link() and next_post_link() functions.

Answer 3

I think one guy already said it but this is an extra answer in case you may need, it actually has some bootstrap 3 style:

<!-- Previous and Next Post -->
<?php if(is_single()) : ?>
<!-- Para pantallas grandes -->
<div class="btn-group btn-group-justified hidden-sm hidden-xs" role="group" aria-label="..." id="nextpreviouslinks">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default btn-sm"> Previous Post: <?php previous_post_link( '%link', '%title'); ?></button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default btn-sm"><a href="<?php bloginfo('url') ?>"><i class="fa fa-th" aria-hidden="true"></i></a></button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default btn-sm"> Next Post: <?php next_post_link( '%link', '%title' ); ?></button>
  </div>
</div>
<?php endif; ?>
<!-- /Previous and Next Post -->

Answer 4

We can achieve this using wp_link_pages function. example:

wp_link_pages( array(
   'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Your theme slug' ),
   'after'  => '</div>',
) );