How To Invert The Position Of “Next Post” & “Previous Post” Links?

Your tracing is correct ?? – Thanks for the hint by the way.

However, if you make the changes in your child theme they do not get activated. I copied the Nisarg/inc/template-tags.php file to my Nisarg-child/inc/ directory and made the changes, including changing the header to show I had been in there…never took effect. But once I copied my changed file back to Nisarg/inc/ – after making a copy of the original file of course – the changes work as described.

It is the nisarg post_navigation which is used now. So if you change it to this instead:

function nisarg_post_navigation() {
	// 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" role="navigation">
		<h2 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'nisarg' ); ?></h2>
		<div class="nav-links">
			<div class="row">
			
			<!-- Get Previous Post -->
			
			<?php
				$prev_post = get_previous_post();
				if (!empty( $prev_post )){
			?>
				<div class="col-md-6 prev-post">
				<a class="" href="<?php echo esc_url(get_permalink( $prev_post->ID )); ?>"><span class="next-prev-text"><i class="fa fa-angle-left"></i><?php _e('PREVIOUS ','nisarg'); ?>
</span><br><?php if(get_the_title( $prev_post->ID ) != ''){echo get_the_title( $prev_post->ID );} else { _e('Previous Post','nisarg'); }?></a>
				</div>
			<?php } 
			 else { 
				echo '<div class="col-md-6">';
				echo '<p> </p>';
				echo '</div>';
			} ?>
			
			
			<!-- Get Next Post -->
			
			<?php
				$next_post = get_next_post();
				if ( is_a( $next_post , 'WP_Post' ) ) { 
			?>
			<div class="col-md-6 next-post">
			<a class="" href="<?php echo esc_url(get_permalink( $next_post->ID )); ?>"><span class="next-prev-text">
 <?php _e(' NEXT','nisarg'); ?><i class="fa fa-angle-right"></i></span><br><?php if(get_the_title( $next_post->ID ) != ''){echo get_the_title( $next_post->ID );} else {  _e('Next Post','nisarg'); }?></a>
			</div>
			<?php } 
			 else { 
				echo '<div class="col-md-6">';
				echo '<p> </p>';
				echo '</div>';
			} ?>
			</div>
		</div><!-- .nav-links -->
	</nav><!-- .navigation-->
	<?php
}
endif;

it works as described. Attn: I also changed the arrow heads to point to the correct direction and so that they are placed in front of “Previous” and behind “Next”. This function is supposedly to be removed with WordPress 4.3, so I would suggest making the same changes to the posts-navigation function. (And make a backup – if the theme is updated, you will have to change this again, unless someone clever can figure out why it does not work in the child-theme.)

Good luck

Lille Ulven

As it so happens, I was able to successfully resolve this issue! I had literally spent the better part of 2-3 days combing through the code in Nisarg/inc/template-tags.php and trying different combinations of swapped “Next” and “Previous” code to obtain the desired results.

I was pulling my hair out due to the fact that NONE of my changes were making ANY impact whatsoever on the format of my website. I had purged my website cache in cPanel, disabled my caching plugin, and was clearing IE 11 browser history by using CTRL+R, but was still seeing no results.

I’m a fairly logical person and this defied all logic. As a last resort, I attempted some code revisions to the template-tags.php file within the parent Nisarg theme itself rather than my child theme, and voila! Code changes started resulting in dynamic changes on my website which enabled me to link code to given behavior and thus ferret out the required changes.

For sake of posterity and hopefully preventing others from pulling their hair out as I have mine, I’ve outlined the required code changes below:

1) Navigate to Niarg/inc/template-tags.php and download a local backup copy for safety

9) Locate the (‘Previous Post’,’nisarg’); statement on line 99 and replace “Previous” with “Next”

That’s it! Save your changes and you should now be seeing the “Next Post” label and article beneath your post on the right hand side, and “Previous Post” label and article on the left.

Optionally, you can copy and paste the below code snippet, which contains the above changes:

function nisarg_post_navigation() {
	// 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" role="navigation">
		<h2 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'nisarg' ); ?></h2>
		<div class="nav-links">
			<div class="row">
			<!-- Get Next Post -->
			
			<?php
				$next_post = get_previous_post();
				if ( is_a( $next_post , 'WP_Post' ) ) { 
			?>
			<div class="col-md-6 next-post">
			<a class="" href="<?php echo esc_url(get_permalink( $next_post->ID )); ?>"><span class="next-prev-text"><i class="fa fa-angle-left"></i>
 <?php _e(' PREVIOUS','nisarg'); ?></span><br><?php if(get_the_title( $next_post->ID ) != ''){echo get_the_title( $next_post->ID );} else {  _e('Previous Post','nisarg'); }?></a>
			</div>
			<?php } 
			 else { 
				echo '<div class="col-md-6">';
				echo '<p> </p>';
				echo '</div>';
			} ?>
			
			<!-- Get Previous Post -->
			
			<?php
				$prev_post = get_next_post();
				if (!empty( $prev_post )){
			?>
				<div class="col-md-6 prev-post">
				<a class="" href="<?php echo esc_url(get_permalink( $prev_post->ID )); ?>"><span class="next-prev-text"><?php _e('NEXT ','nisarg'); ?><i class="fa fa-angle-right"></i>
</span><br><?php if(get_the_title( $prev_post->ID ) != ''){echo get_the_title( $prev_post->ID );} else { _e('Next Post','nisarg'); }?></a>
				</div>
			<?php } 
			 else { 
				echo '<div class="col-md-6">';
				echo '<p> </p>';
				echo '</div>';
			} ?>
			
			</div>
		</div><!-- .nav-links -->
	</nav><!-- .navigation-->
	<?php
}

If you’re not seeing the changes as expected, be certain to purge your website cache in cPanel, disable or purge your WordPress plugin cache (if you have a caching plugin installed), and clear your browser cache for the specific page you’re attempting to view. This can be done in IE 11 and Mozilla Firefox by hitting CTRL+R.

For whatever reason, copying the inc folder containing the template-tags.php file into my child theme directory didn’t work to override the original template-tags.php file code. Nor did storing the corrected template-tags.php file directly within the top-level of my child theme directory.

The only way I was able to make this work was by editing the Nisarg parent theme template-tags.php file directly. For this reason, I recommend downloading and storing a copy of the original template-tags.php file locally. Also, be aware that should you update your Nisarg theme in future, this solution may need to be re-implemented.

If you have any questions about this code or this process, I’d be happy to help. You can reach me by email at [email protected]. Cheers!

• This reply was modified 6 years, 7 months ago by Mr. FFP. Reason: Edited to include code snippet
• This reply was modified 6 years, 7 months ago by Mr. FFP. Reason: Bolded manual code change steps

Oi – You beat me to the punch with your post, Lille!

Here I was thinking I had discovered a grand solution. After typing it all out for sake of others to reference and submitting, I saw your post from a few minutes prior detailing a similar fix!

Thank you for taking the time to engage with this issue. Between your pointers and mine we should have this issue permanently covered for the sake of any other poor souls struggling with this same issue ??

• This reply was modified 6 years, 7 months ago by Mr. FFP. Reason: Typo

Yeah, four minutes faster ??
Yes, we should have everybody covered now. Fun fact is that this code we have been changing is marked as “to be removed when WordPress 4.3 is released, we are at 4.9”, so I suspect the next update of the theme will remove that code anyway and we’ll have to look for a new solution. But until then we have covered it all.

Lille,

After review I actually like your solution better, as your code tweaks are more intuitive since they leave no statements which contain both “next” and “previous” references as did mine. This would have the potential to confuse upon a further visit to the code.

That said, for novice bloggers (and coders!) such as myself, figuring out which statements to move to change the direction of the arrows and add the required spaces between the arrows and the “Previous” and “Next” links was a bit difficult.

I’ve therefore pasted full nisarg_post_navigation function code snippets below to both work-arounds for sake of future reference:

Novice Method:

function nisarg_post_navigation() {
	// 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" role="navigation">
		<h2 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'nisarg' ); ?></h2>
		<div class="nav-links">
			<div class="row">
			<!-- Get Next Post -->
			
			<?php
				$next_post = get_previous_post();
				if ( is_a( $next_post , 'WP_Post' ) ) { 
			?>
			<div class="col-md-6 next-post">
			<a class="" href="<?php echo esc_url(get_permalink( $next_post->ID )); ?>"><span class="next-prev-text"><i class="fa fa-angle-left"></i>
 <?php _e(' PREVIOUS','nisarg'); ?></span><br><?php if(get_the_title( $next_post->ID ) != ''){echo get_the_title( $next_post->ID );} else {  _e('Previous Post','nisarg'); }?></a>
			</div>
			<?php } 
			 else { 
				echo '<div class="col-md-6">';
				echo '<p> </p>';
				echo '</div>';
			} ?>
			
			<!-- Get Previous Post -->
			
			<?php
				$prev_post = get_next_post();
				if (!empty( $prev_post )){
			?>
				<div class="col-md-6 prev-post">
				<a class="" href="<?php echo esc_url(get_permalink( $prev_post->ID )); ?>"><span class="next-prev-text"><?php _e('NEXT ','nisarg'); ?><i class="fa fa-angle-right"></i>
</span><br><?php if(get_the_title( $prev_post->ID ) != ''){echo get_the_title( $prev_post->ID );} else { _e('Next Post','nisarg'); }?></a>
				</div>
			<?php } 
			 else { 
				echo '<div class="col-md-6">';
				echo '<p> </p>';
				echo '</div>';
			} ?>
			
			</div>
		</div><!-- .nav-links -->
	</nav><!-- .navigation-->
	<?php
}

More Elegant Method:

function nisarg_post_navigation() {
	// 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" role="navigation">
		<h2 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'nisarg' ); ?></h2>
		<div class="nav-links">
			<div class="row">
			<!-- Get Previous Post -->
			
			<?php
				$prev_post = get_previous_post();
				if (!empty( $prev_post )){
			?>
				<div class="col-md-6 prev-post">
				<a class="" href="<?php echo esc_url(get_permalink( $prev_post->ID )); ?>"><span class="next-prev-text" ><i class="fa fa-angle-left"></i><?php _e(' PREVIOUS','nisarg'); ?></span><br><?php if(get_the_title( $prev_post->ID ) != ''){echo get_the_title( $prev_post->ID );} else { _e('Previous Post','nisarg'); }?></a>
				</div>
			<?php } 
			 else { 
				echo '<div class="col-md-6">';
				echo '<p> </p>';
				echo '</div>';
			} ?>
			
			<!-- Get Next Post -->
			
			<?php
				$next_post = get_next_post();
				if ( is_a( $next_post , 'WP_Post' ) ) { 
			?>
			<div class="col-md-6 next-post">
			<a class="" href="<?php echo esc_url(get_permalink( $next_post->ID )); ?>"><span class="next-prev-text"><?php _e('NEXT ','nisarg'); ?><i class="fa fa-angle-right"></i></span><br><?php if(get_the_title( $next_post->ID ) != ''){echo get_the_title( $next_post->ID );} else {  _e('Next Post','nisarg'); }?></a>
			</div>
			<?php } 
			 else { 
				echo '<div class="col-md-6">';
				echo '<p> </p>';
				echo '</div>';
			} ?>
			
			</div>
		</div><!-- .nav-links -->
	</nav><!-- .navigation-->
	<?php
}

• This reply was modified 6 years, 7 months ago by Mr. FFP. Reason: Edited for clarity
• This reply was modified 6 years, 7 months ago by Mr. FFP.

Thanks for the kind words, Mr.FFP – I suppose being a database developer by trade helps occasionally to figure things out. I haven’t had the time to read up on programming PHP, but making some small adjustments here and there is like changing apples and pears in a cake recipe in many cases.

no need to edit this function in the /inc/template-tags.php file the parent (nisarg) theme directly –

review https://codex.www.ads-software.com/Pluggable_Functions

as the function nisarg_posts_navigation() is pluggable, add your revised function code into functions.php of your child theme.

Thank you, Michael!
How would one recognize if a function is pluggable or not?

Have a great weekend.

Lille Ulven

Hi there,

As the writer of invert navigation buttons and a missing space I’m very interested in this topic. As soon as I has the time I will try the mentioned solutions.

I’ll let you know the results.

Have a nice day,
Peter.