Pro Posts Navigation at bottom of post

Support
#1

Hi, I’m using Pro and really enjoying it. Having converted from an old X licence, I’m still sort-of using the Ethos Stack where I can, noting that it only supports previous/next post at the top of a post.

Since I’m writing stories on my website, I’d like to change the post navigation to the bottom of the post, and in addition to the chevrons, have “Next Chapter” and “Previous Chapter”. I’d also like to make it so that these only link to posts in the same category. Can I get some support with this on code to add to my Child Theme?

Many thanks.

#2

Hi There,

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

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> Previous Post';
    $right_icon = 'Next Post <i class="x-icon-arrow-right" data-x-icon="&#xf061;"></i>';
  }

  $is_ltr    = ! is_rtl();
  $prev_post = get_adjacent_post( false, '', false );
  $next_post = get_adjacent_post( false, '', 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

}
add_action( 'x_after_the_content_end', 'x_print_nav', 999 );
function x_print_nav(){
	if(is_singular( 'post' )){
		x_entry_navigation();
	}
}

Hope it helps :slight_smile:

#3

Great, thank you! The arrows are now appearing at both the top and bottom of the post, which is exactly what I wanted.

However, I think the title of ‘Next Post’/‘Previous Post’ doesn’t seem to be showing up. And ideally, I wanted the next/previous only to link to posts in the same category. Would you be able to help with this? Link to example post for you to see:

#4

Hi there,

It’s because of this part, your stack is ethos but you set your text to non-ethos

  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> Previous Post';
    $right_icon = 'Next Post <i class="x-icon-arrow-right" data-x-icon="&#xf061;"></i>';
  }

Should be like this,

if ( $stack == 'ethos' ) {
    $left_icon  = '<i class="x-icon-arrow-left" data-x-icon="&#xf060;"></i> Previous Post';
    $right_icon = 'Next Post <i class="x-icon-arrow-right" data-x-icon="&#xf061;"></i>';
  } else {
    $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>';
  }

About post of the same category, please change this

  $prev_post = get_adjacent_post( false, '', false );
  $next_post = get_adjacent_post( false, '', true );

to this

  $prev_post = get_adjacent_post( true, '', false );
  $next_post = get_adjacent_post( true, '', true );

Thanks!

#5

Thank you so much for your help, I really appreciate it! I implemented that and it worked beautifully - I noticed that the links for Previous Post were just going to Next Post and vice versa, but was able to just switch around the true and false values above to fix that. So thank you so much, I think that’s fixed the in-category navigation perfectly!

The only thing now is that ‘Previous Post’ and ‘Next Post’ is showing when you don’t hover over the arrow, and disappearing when you do hover. I’m afraid I don’t know enough code to switch that around.

#6

Hello @EricaC,

Please add following CSS in X > Launch > Options > CSS to fix hover and active state of next and previous links:

.x-nav-articles .prev:hover, .x-nav-articles .next:hover {
    border-color: #272727;
    color: #272727;
}

.x-nav-articles a {
    margin: 10px;
}

.x-nav-articles a {
    font-size: 15px;
}

.x-nav-articles {width: 130px;}

Let us know how it goes.

Thanks.

#7

Thanks - I’ve given it a try but it doesn’t seem to be working (http://www.ericachanwrites.com/ninja-warrior-australia-means-people-colour/).

Alternatively, is it possible to space the arrows a little further apart and just have ‘Next Post’ and ‘Previous Post’ showing in smaller font permanently underneath them?

#8

Hi,

Please change the code that reads

if ( $stack == 'ethos' ) {
    $left_icon  = '<i class="x-icon-arrow-left" data-x-icon="&#xf060;"></i> Previous Post';
    $right_icon = 'Next Post <i class="x-icon-arrow-right" data-x-icon="&#xf061;"></i>';
  } else {
    $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>';
  }

to this

if ( $stack == 'ethos' ) {
    $left_icon  = '<i class="x-icon-arrow-left" data-x-icon="&#xf060;"></i> <span>Previous Post</span>';
    $right_icon = '<i class="x-icon-arrow-right" data-x-icon="&#xf061;"></i> <span>Next Post</span>';
  } else {
    $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>';
  }

After that, add this in Custom css

body .entry-header .x-nav-articles a {
    line-height: 13px;
    font-size: 12px;
    border:0;
    padding:0;
}

body .entry-header .x-nav-articles a >i {
    padding: 10px 10px;
    border: 1px solid #000;
    margin-bottom: 8px;
    font-size:15px;
}

body .entry-header .x-nav-articles a:hover {
    color:#fff !important;
}

Hope that helps

#9

Thank you! It’s looking great! Only thing now is that the changes seem to have only applied to the arrows on the top, not the arrows on the bottom. Let me know how to get it to apply to both, and I promise I’ll be out of your hair!

Thanks for all of your help on this, really appreciate it.

#10

Hi there,

Please remove the .entry-header from the CSS, like this

body .x-nav-articles a {
    line-height: 13px;
    font-size: 12px;
    border:0;
    padding:0;
}

body .x-nav-articles a >i {
    padding: 10px 10px;
    border: 1px solid #000;
    margin-bottom: 8px;
    font-size:15px;
}

body .x-nav-articles a:hover {
    color:#fff !important;
}

That should do it :slight_smile: Cheers!

#11

Wonderful, thanks so much for your help! Really appreciate you going above and beyond and the several permutations of code. Thank you!

#12

Hi Erica,

In behalf of every staff, you’re always welcome. It is really our pleasure to help everyone.

Cheers!