Jump to content

Pagination Order for Five Template (for webcomic use)

Recommended Posts

Hello! After spending days trying to work this out on my own, I am here to ask for help.

I recently launched a new webcomic series and I am hitting a wall with how the pagination is behaving.

When you land on my page, you land on the most recent post (Page 3 currently). The navigation button is on the bottom right of the page and reads "Next", when it should read "Previous" to take the reader back through posts. When you land on Page 2, for example, the Next and Previous buttons appear correct, but the Next goes back chronologically and the Previous moves forward chronologically. The order of things is backwards for chronological reading.

What I need is this: I want the Next and Previous buttons function in a way that follows chronological order by post date. Previous moves backwards, and Next moves forward.

A few points:

  • This is the Five template
  • I have tried several CSS pagination codes from other posts, but none take effect at all. Even code to simply change the text for the Next and Previous buttons. None of the code aimed at the pagination seems to work on this template.
  • I currently have no Code Injections
  • I have one small custom CSS code block to move the header logo into place.

I am really at my wits end with this. I am not a coder. I have learned all of this by trial and error and the backwards pagination is driving me mad.

Any help is greatly appreciated.

Screen Shot 2022-11-01 at 10.42.04 PM.png

Link to comment
  • Replies 4
  • Views 473
  • Created
  • Last Reply

Top Posters In This Topic

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {  
		$("li.prev").html(function() { 
          return $(this).html().replace("Older", "New older custom");  
    });
    $("li.prev").html(function() { 
          return $(this).html().replace("Newer", "New newer custom");  
    });
	});
</script>

Maybe this will do the trick? Paste into header code injection (sitewide or blog page). They changed pagination from a span element to a list element. You can change "New Older Custom" and "New Newer Custom" to your own text inside the quotes. 

 

Edited from @tuanphan answer here: 

 

Edited by ReformDesign
spelling
Link to comment
On 11/2/2022 at 10:45 AM, d20monkey said:

I gave it a shot and there was no change. In fact, just as before with other attempts, it didn't even change the text on the Next and Previous.

Still stumped.

I am a few days in and with no other suggestions here or anything else I am finding working, I am at a loss. I'll make one more call for help, just in case.

Link to comment
10 hours ago, d20monkey said:

I am a few days in and with no other suggestions here or anything else I am finding working, I am at a loss. I'll make one more call for help, just in case.

Can you share your site with the protected password so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.