How do I add pagination to posts?

Support
#1

I run a site at www.aatmcentral.com using X-Theme and Cornerstone, and I often make posts to my News category. I want to add a “Next” and “Previous” to bottom of each post so people don’t have to keep going back to the News page to click on the article they want to see.

Can anyone help, please?!?!?!

#2

Hi There,

Please add the following code under functions.php file locates in your child theme:

add_action( 'x_after_the_content_end', 'x_print_navigation', 999 );
function x_print_navigation(){
	if(is_singular( 'post' )){
		x_entry_navigation();
	}
}
#3

Thank you!!! Now, is there a way I can make sure that the paginations link only to posts in the same category as the post that they are coming from? For instance, I have News, Blog, and Podcast categories. I’d like my visitors to click on a news article and be able to click the arrow to go to the next news article. Right now it’s just directing to the next post regardless of category.

Thanks so much!

#4

Hello There,

It’s good to know that @thai’s code is working for you. To make sure that the articles link in the next and previous is in the same category, please add the following code in your child theme’s functions.php file as well:

// Entry Navigation
// =============================================================================

if ( ! function_exists( 'x_entry_navigation' ) ) :
  function x_entry_navigation() {

  $stack = x_get_stack();

  if ( $stack == 'ethos' ) {
    $left_icon  = '<i class="x-icon-chevron-left" data-x-icon="&#xf053;"></i>';
    $right_icon = '<i class="x-icon-chevron-right" data-x-icon="&#xf054;"></i>';
  } else {
    $left_icon  = '<i class="x-icon-arrow-left" data-x-icon="&#xf060;"></i>';
    $right_icon = '<i class="x-icon-arrow-right" data-x-icon="&#xf061;"></i>';
  }

  $is_ltr    = ! is_rtl();
  $prev_post = get_adjacent_post( true, '', false );
  $next_post = get_adjacent_post( true, '', true );
  $prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
  $next_icon = ( $is_ltr ) ? $right_icon : $left_icon;

  ?>

  <div class="x-nav-articles">

    <?php if ( $prev_post ) : ?>
      <a href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
        <?php echo $prev_icon; ?>
      </a>
    <?php endif; ?>

    <?php if ( $next_post ) : ?>
      <a href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
        <?php echo $next_icon; ?>
      </a>
    <?php endif; ?>

  </div>

  <?php

  }
endif;
// =============================================================================

We would loved to know if this has work for you. Thank you.

#5

Thank you so much! It works like a dream!!!

Now, is there a way to make it appear at the top of the page?

#6

Hi Again,

If you want it to appear on top of the content, please update @thai’s code and make use of this code instead:

add_action( 'x_before_the_content_end', 'x_print_navigation', 999 );
function x_print_navigation(){
	if(is_singular( 'post' )){
		x_entry_navigation();
	}
}

We would loved to know if this has work for you. Thank you.

#7

OK. I made the change, but it’s still showing up in the same spot at the bottom of the page.

Here is the entire code that I am using.

add_action( ‘x_before_the_content_end’, ‘x_print_navigation’, 999 );
function x_print_navigation(){
if(is_singular( ‘post’ )){
x_entry_navigation();
}
}
// Entry Navigation
// =============================================================================

if ( ! function_exists( ‘x_entry_navigation’ ) ) :
function x_entry_navigation() {

$stack = x_get_stack();

if ( $stack == ‘ethos’ ) {
$left_icon = ‘’;
$right_icon = ‘’;
} else {
$left_icon = ‘’;
$right_icon = ‘’;
}

$is_ltr = ! is_rtl();
$prev_post = get_adjacent_post( true, ‘’, false );
$next_post = get_adjacent_post( true, ‘’, true );
$prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
$next_icon = ( $is_ltr ) ? $right_icon : $left_icon;

?>

<?php if ( $prev_post ) : ?>
  <a href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
    <?php echo $prev_icon; ?>
  </a>
<?php endif; ?>

<?php if ( $next_post ) : ?>
  <a href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
    <?php echo $next_icon; ?>
  </a>
<?php endif; ?>
<?php } endif; // =============================================================================
#8

Hi There,

Please update that bit of code as follows.

add_action( 'x_before_the_content_begin', 'x_print_navigation', 999 );
function x_print_navigation(){
  if(is_singular( 'post' )){
    x_entry_navigation();
  }
}

Hope that helps.

#9

Fantastic!!! Thank you all so much!!!

#10

Glad we were able to help :slight_smile: