How to reverse post navigation

Ok, so the CSS for this is pretty simple

.post-navigation .nav-next {
    float: left;
    text-align: left;
}
.post-navigation .nav-previous {
	float: right;
	text-align: right;
}

However, we need to modify the theme code since we have to force the links to change. Not sure what all you have in your child theme but you’ll want to make sure to copy over /wp-content/themes/zenzero/inc/template-tags.php into your child theme if you have not already. Look for the following sections of code in the template-tags.php file

previous_post_link( '<div class="nav-previous">%link</div>', '<i class="fa prevNext fa-lg fa-angle-left"></i> <div class="meta-nav" aria-hidden="true"><small>' . esc_html__( 'Previous Post', 'zenzero' ) . '</small> ' . '<span class="smallPart">%title</span></div><span class="screen-reader-text">' . esc_html__( 'Previous post link', 'zenzero' ) . '</span> ' );
next_post_link( '<div class="nav-next">%link</div>', '<div class="meta-nav" aria-hidden="true"><small>' . esc_html__( 'Next Post', 'zenzero' ) . '</small><span class="smallPart">%title</span></div> <i class="fa prevNext fa-lg fa-angle-right"></i> ' . '<span class="screen-reader-text">' . esc_html__( 'Next Post link', 'zenzero' ) . '</span> ' );

And replace it with this code

next_post_link( '<div class="nav-next">%link</div>', '<i class="fa prevNext fa-lg fa-angle-left"></i> <div class="meta-nav" aria-hidden="true"><small>' . esc_html__( 'Previous Post', 'zenzero' ) . '</small><span class="smallPart">%title</span></div> ' . '<span class="screen-reader-text">' . esc_html__( 'Next Post link', 'zenzero' ) . '</span> ' );
previous_post_link( '<div class="nav-previous">%link</div>', ' <div class="meta-nav" aria-hidden="true"><small>' . esc_html__( 'Next Post', 'zenzero' ) . '</small> ' . '<span class="smallPart">%title</span></div> <i class="fa prevNext fa-lg fa-angle-right"></i><span class="screen-reader-text">' . esc_html__( 'Previous post link', 'zenzero' ) . '</span> ' );

Save those changes in the templates-tags.php file and either add the CSS into the very bottom of the style.css file or into the Additional CSS area in the Appearance->Customize section and it should get you what you’re looking for I believe.

• This reply was modified 6 years ago by Jarret.

That worked beautifully. Thank you so much, Jarret.

The only thing now is to figure out how to replace the words Next Post and Previous Post and the direction of the little arrow. stories.slowdownnow.org.

• This reply was modified 6 years ago by bensontel2.
• This reply was modified 6 years ago by bensontel2.

Hmm the code I provided should have already done that but I see it isn’t displaying correctly on your site.

Are you sure you copied the code that I provided?

I did. But I’m capable of screwing up. Here is the complete file

<?php
/**
 * Custom template tags for this theme.
 *
 * Eventually, some of the functionality here could be replaced by core features.
 *
 * @package zenzero
 */

if ( ! function_exists( 'zenzero_paging_nav' ) ) :
/**
 * Display navigation to next/previous set of posts when applicable.
 */
function zenzero_paging_nav() {
	// Don't print empty markup if there's only one page.
	if ( $GLOBALS['wp_query']->max_num_pages < 2 ) {
		return;
	}
	?>
	<nav class="navigation paging-navigation">
		<h2 class="screen-reader-text"><?php esc_html_e( 'Posts navigation', 'zenzero' ); ?></h2>
		<div class="nav-links">

			<?php if ( get_next_posts_link() ) : ?>
			<div class="nav-previous"><?php next_posts_link( '<i class="fa fa-angle-left"></i>' ); ?></div>
			<?php endif; ?>

			<?php if ( get_previous_posts_link() ) : ?>
			<div class="nav-next"><?php previous_posts_link( '<i class="fa fa-angle-right"></i>' ); ?></div>
			<?php endif; ?>

		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
}
endif;

if ( ! function_exists( 'zenzero_post_nav' ) ) :
/**
 * Display navigation to next/previous post when applicable.
 */
function zenzero_post_nav() {
	// Don't print empty markup if there's nowhere to navigate.
	$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
	$next     = get_adjacent_post( false, '', false );

	if ( ! $next && ! $previous ) {
		return;
	}
	?>
	<nav class="navigation post-navigation">
		<h2 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'zenzero' ); ?></h2>
		<div class="nav-links">
			<?php
next_post_link( '<div class="nav-next">%link</div>', '<i class="fa prevNext fa-lg fa-angle-left"></i> <div class="meta-nav" aria-hidden="true"><small>' . esc_html__( 'Previous Post', 'zenzero' ) . '</small><span class="smallPart">%title</span></div> ' . '<span class="screen-reader-text">' . esc_html__( 'Next Post link', 'zenzero' ) . '</span> ' );
previous_post_link( '<div class="nav-previous">%link</div>', ' <div class="meta-nav" aria-hidden="true"><small>' . esc_html__( 'Next Post', 'zenzero' ) . '</small> ' . '<span class="smallPart">%title</span></div> <i class="fa prevNext fa-lg fa-angle-right"></i><span class="screen-reader-text">' . esc_html__( 'Previous post link', 'zenzero' ) . '</span> ' );				
			?>
		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
}
endif;

if ( ! function_exists( 'zenzero_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 */
function zenzero_posted_on() {
	$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
		$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
	}

	$time_string = sprintf( $time_string,
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( get_the_modified_date() )
	);
	
	$posted_on = '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>';
	$byline = '<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>';

	echo '<span class="posted-on"><i class="fa fa-clock-o spaceLeftRight" aria-hidden="true"></i>' . $posted_on . '</span><span class="byline"><i class="fa fa-user spaceLeftRight" aria-hidden="true"></i>' . $byline . '</span>'; // WPCS: XSS OK.
	
	if ( 'post' == get_post_type() ) {
		$categories_list = get_the_category_list( ' / ' );
		if ( $categories_list && zenzero_categorized_blog() ) {
			printf( '<span class="cat-links"><i class="fa fa-folder-open-o spaceLeftRight" aria-hidden="true"></i>' . $categories_list . '</span>'); // WPCS: XSS OK.
		}
	}
	
	if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) {
		echo '<span class="comments-link"><i class="fa fa-comments-o spaceLeftRight" aria-hidden="true"></i>';
		comments_popup_link( esc_html__( 'Leave a comment', 'zenzero' ), esc_html__( '1 Comment', 'zenzero' ), esc_html__( '% Comments', 'zenzero' ) );
		echo '</span>';
	}

}
endif;

if ( ! function_exists( 'zenzero_entry_footer' ) ) :
/**
 * Prints HTML with meta information for the categories, tags and comments.
 */
function zenzero_entry_footer() {
	// Hide category and tag text for pages.
	if ( 'post' == get_post_type() ) {
		$tags_list = get_the_tag_list( '', '' );
		if ( $tags_list ) {
			printf( '<span class="tags-links"><i class="fa fa-tags spaceRight" aria-hidden="true"></i>' . $tags_list . '</span>'); // WPCS: XSS OK.
		}
	}

	edit_post_link( esc_html__( 'Edit', 'zenzero' ), '<span class="edit-link"><i class="fa fa-wrench spaceRight" aria-hidden="true"></i>', '</span>' );
}
endif;

/**
 * Returns true if a blog has more than 1 category.
 *
 * @return bool
 */
function zenzero_categorized_blog() {
	$all_the_cool_cats = get_transient( 'zenzero_categories' );
	
	if ( false === $all_the_cool_cats ) {
		// Create an array of all the categories that are attached to posts.
		$categories = get_categories( array(
			'fields'     => 'ids',
			'hide_empty' => 1,
			// We only need to know if there is more than one category.
			'number'     => 2,
		) );

		// Count the number of categories that are attached to the posts.
		$all_the_cool_cats = count( $categories );

		set_transient( 'zenzero_categories', $all_the_cool_cats );
	}
	
	return $all_the_cool_cats > 1;
}

/**
 * Flush out the transients used in zenzero_categorized_blog.
 */
function zenzero_category_transient_flusher() {
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}
	// Like, beat it. Dig?
	delete_transient( 'zenzero_categories' );
}
add_action( 'edit_category', 'zenzero_category_transient_flusher' );
add_action( 'save_post',     'zenzero_category_transient_flusher' );

• This reply was modified 6 years ago by bensontel2.

How do you have your posts ordered in your admin area? Is One the oldest post and then Two was published after that and then Three is the most recently published post?

Yes. And I’m using Simple Custom Post Order plugin by Colorlib.

I think this might be what you’re looking for

next_post_link( '<div class="nav-next">%link</div>', '<div class="meta-nav" aria-hidden="true"><small>' . esc_html__( 'Next Post', 'zenzero' ) . '</small><span class="smallPart">%title</span></div> <i class="fa prevNext fa-lg fa-angle-right"></i>  ' . '<span class="screen-reader-text">' . esc_html__( 'Next Post link', 'zenzero' ) . '</span> ' );
				previous_post_link( '<div class="nav-previous">%link</div>', '<i class="fa prevNext fa-lg fa-angle-left"></i> <div class="meta-nav" aria-hidden="true"><small>' . esc_html__( 'Previous Post', 'zenzero' ) . '</small> ' . '<span class="smallPart">%title</span></div><span class="screen-reader-text">' . esc_html__( 'Previous post link', 'zenzero' ) . '</span> ' );

Very much appreciate your trying. No luck yet. Another option is to hide the words Next Post and Previous Post and the angle left and right icons because the One Two and Three are in the right place. If the user clicks on those at the bottom of the screen they will advance to the next post. If you have other suggestions I’m happy to try them out.

If you want to remove the Next/Previous Post wording and the arrows try this

next_post_link( '<div class="nav-next">%link</div>', '<div class="meta-nav" aria-hidden="true"><small>' . esc_html__( '', 'zenzero' ) . '</small><span class="smallPart">%title</span></div>' . '<span class="screen-reader-text">' . esc_html__( 'Next Post link', 'zenzero' ) . '</span> ' );
				previous_post_link( '<div class="nav-previous">%link</div>', '<div class="meta-nav" aria-hidden="true"><small>' . esc_html__( '', 'zenzero' ) . '</small> ' . '<span class="smallPart">%title</span></div><span class="screen-reader-text">' . esc_html__( 'Previous post link', 'zenzero' ) . '</span> ' );

Well after the initial changes even removing that section doesn’t seem to make a difference. And I cleared the browser cache. I’m out of my depth here, but I looked at the index.php file and see this note. Is this why the changes are not showing up?

<?php
					/* Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					 */
					get_template_part( 'content', get_post_format() );
				?>

That shouldn’t effect it, what exactly do you mean by ‘Well after the initial changes even removing that section doesn’t seem to make a difference.’? If you remove the code I mentioned, does it at least remove the navigation from the site or does it remain? If it remains, there is a problem elsewhere.

The first change where you switched the left and right links worked like a dream. But other changes to the template-tags.php don’t seem to take effect.

I can’t find where the words Next Post and Previous Post are coded. I do think they are formatted by the .meta-nav class selector. The post tiles themselves show up correctly. I tried setting the .meta-nav to display:none; in additional CSS. But that affected the whole navigation section.

• This reply was modified 6 years ago by bensontel2.

They are coded in the esc_html__( ‘Previous Post’, ‘zenzero’ ) and esc_html__( ‘Next Post’, ‘zenzero’ ) parts in the template-tags.php file

If the changes you are making aren’t updating, you may need to speak with your host to see why the file isn’t being updated on the server properly.

I now think the rest of the puzzle might come from a CSS solution. i class in when inspecting that element.
<i class="fa prevNext fa-lg fa-angle-left"></i>
I get this by inspecting the (new) right element which points backward and says previous instead of Next, but the title below it (Two) is in the correct position and links correctly to the next post.

• This reply was modified 6 years ago by bensontel2.