Next and Previous buttons are opposite

Is there anyway to replace Previous and Next with the Older option?

That’s called “click to scroll” navigation – you should be able to get it on your site by activating Jetpack’s Infinite Scroll module in your Jetpack settings.

Let me know how it goes.

Thanks Kathryn! I just enabled infinite scroll instead. I was having a little trouble with it earlier, but seemed to get it working nicely now.

Thanks again for your help!

Glad that did the trick! I’ll mark this as resolved.

If you’re using widgets at the bottom, it won’t let you enable infinite scrolling (because then you would never get to the footer / widgets!) I’m no coding expert, but I found a workaround…

Adjust your CSS stylesheet (style.css) to read as follows. This switches the alignment for the previous / next links:

.site-main .comment-navigation .nav-previous,
.site-main .paging-navigation .nav-previous,
.site-main .post-navigation .nav-previous {
	float: right;
	text-align: right;
}
.site-main .comment-navigation .nav-next,
.site-main .paging-navigation .nav-next,
.site-main .post-navigation .nav-next {
	float: left;
	text-align: left;
}

And then, adjust the template-tags.php file to read as follows. (You basically just swap out Previous to say Next, and Next to say Previous.)

<div class="nav-links">

			<?php if ( get_next_posts_link( '', $max_num_pages ) ) : ?>
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Next', 'illustratr' ), $max_num_pages ); ?></div>
			<?php endif; ?>

			<?php if ( get_previous_posts_link( '', $max_num_pages ) ) : ?>
			<div class="nav-next"><?php previous_posts_link( __( 'Previous <span class="meta-nav">&rarr;</span>', 'illustratr' ), $max_num_pages ); ?></div>
			<?php endif; ?>

		</div><!-- .nav-links -->

Hope that helps someone!

gkeillor –

If you’re using widgets at the bottom, it won’t let you enable infinite scrolling (because then you would never get to the footer / widgets!) I’m no coding expert, but I found a workaround…

Just to reassure everyone, Jetpack Infinite scroll should know how to handle scrolling, even when there are footer widgets. ?? No theme edits should be required.

You can learn more here, in the section titled Footer:

https://jetpack.me/support/infinite-scroll/

If you did encounter an issue with Infinite Scroll preventing footer widgets from being accessed in Illustratr, feel free to start a new thread and I’ll be glad to take a deeper look.

I also wanted to make sure that you didn’t make these changes by editing the theme files directly. If you did that, your tweaks will be overwritten every time you update the theme, so just a heads-up! The best way to make changes to a theme is to use a child theme, so your tweaks won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:

https://codex.www.ads-software.com/Child_Themes
https://op111.net/53/

Kathryn, thanks so much for the information! As I said, I’m pretty new to this — I will create and modify a child theme instead.

The solution I posted worked for me, but just as an FYI for why I resorted to that in the first place — when I enabled Infinite scroll in Jetpack settings and clicked “configure,” I was taken to my Reading settings page, where I saw the following message:

“To Infinity and Beyond: We’ve changed this option to a click-to-scroll version for you since you have footer widgets in Appearance → Widgets, or your theme uses click-to-scroll as the default behavior.”

So basically, I guess, nothing changed when I enabled infinite scroll, haha. I still saw the previous / next buttons at the bottom (in the wrong places).

As I said, the code workaround I cobbled together is good enough for me, so I’m not going to start a new thread — just an FYI!

Thanks again. ??

Glad you’re all set!