PRO with Integrity stack previous next post buttons

[katriley]

Hi there,

So, I see this is a popular question and I tried to implement it myself but I can’t quite get it right.

I want to add buttons for previous and next post to the bottom of each post.

I need them to stay within the category, for instance if they are looking at a news article when they click on next, it should go to the next news article, not the next blog post chronologically.

I found the post regarding adding global content area with buttons, I was able to insert it into the functions.php section of my child theme. I saw some code for Integrity that restricted it to default category but I am not using the breadcrumbs nav.

Can you tell me what i need to add to the functions php file to make it stay within category? thanks!

this is the current code:

function custom_post_arrows() {
if ( is_single() ) {
echo do_shortcode(’[cs_gb id=1942]’);
}
}
add_action(‘x_before_the_content_end’, ‘custom_post_arrows’);

[nabeel]

Hi @katriley,

Thank you for reaching out to us. To add post navigation buttons for specific category, just add the following code in your child theme’s functions.php file:

// Post Navigation Within a Category
// 
// 
if ( ! function_exists( 'x_navigation_within_category' ) ) :
  function x_navigation_within_category() {

  $stack = x_get_stack();

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

  $is_ltr    = ! is_rtl();
  $prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
  $next_icon = ( $is_ltr ) ? $right_icon : $left_icon;
  ?>

  <div class="x-navigation-articles" style="display: flex; justify-content: space-between;">
      <?php previous_post_link( '%link', $prev_icon, true ); ?>
	  <?php next_post_link( '%link', $next_icon, true ); ?>
  </div>

  <?php

  }
endif;

function x_add_post_navigation() {
		if ( is_singular('post') ) {
  			echo '<div class="navigation-post">';
			x_navigation_within_category();
			echo '</div>';
		}
}
add_action('x_before_the_content_end', 'x_add_post_navigation');

Let us know how this goes!

[katriley]

Thanks!

I changed it to reference the stack integrity because that is what one I am using and it appears to work. However, is there a way to change it to say Previous and Next with the arrows rather than just the icons? Or instead? The arrows get kind of lost. Also can i insert a small gap before them to separate them from the content. They appear almost in line with the author box.

appreciate any help you can offer, thanks!

[jade]

Hey @katriley,

Please install and activate the child theme and login through FTP then edit the functions.php then add this code:

/ 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-s="&#xf053;"></i>';
    $right_icon = '<i class="x-icon-chevron-right" data-x-icon-s="&#xf054;"></i>';
  } else {
    $left_icon  = '<i class="x-icon-arrow-left" data-x-icon-s="&#xf060;"></i>';
    $right_icon = '<i class="x-icon-arrow-right" data-x-icon-s="&#xf061;"></i>';
  }

  $is_ltr    = ! is_rtl();
  $prev_post = get_adjacent_post( false, '', false );
  $next_post = get_adjacent_post( false, '', true );
  $prev_icon = ( $is_ltr ) ? __( 'Previous Post', '__x__' ) : __( 'Next Post', '__x__' );
  $next_icon = ( $is_ltr ) ? __( 'Next Post', '__x__' ): __( 'Previous Post', '__x__' );

  ?>

  <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;

Keep in mind with the lines:

  $prev_icon = ( $is_ltr ) ? __( 'Previous Post', '__x__' ) : __( 'Next Post', '__x__' );
  $next_icon = ( $is_ltr ) ? __( 'Next Post', '__x__' ): __( 'Previous Post', '__x__' );

them add this code in X > Theme Options > CSS:

.x-nav-articles {
    width: 15%;
}

Hope this helps.