How to Change “Older Posts / Newer Posts” Label in Squarespace
If you’ve ever scrolled to the bottom of your Squarespace blog list, you’ve probably seen the default “Older Posts” and “Newer Posts” links. Functional? Yes. Exciting? Not so much. Luckily, with just a little CSS, you can customize that text and make it perfectly match your brand voice and unique site style.
In this tutorial, you’ll learn how to replace the default pagination text for that list of blog posts. Watch the video below to see the step-by-step process, then grab the code right here on this page to add it to your own site.
Pro tip: in the video, I was able to reach my site wide CSS from my pages menu by clicking on custom code at the bottom of the pages menu, and then selecting custom CSS. If that option isn’t available for you, press the / key on your keyboard to open the program search and look for CSS so you can navigate their directly.
How This Code Works
Font size: 0; – This hides the original “Older Posts” and “Newer Posts” text so it doesn’t show up on the page.
Custom text with
::after– The new labels are added after the hidden text. You can change what’s inside the quotation marks to say anything you like.Font size & line height – Adjust these values to balance the text with your site’s typography and the arrow icons. Try different numbers until it feels right for your design.
Mobile adjustment – By default, long text might wrap onto multiple lines. The media query stacks the links vertically on screens under 640px wide, giving the pagination a cleaner look on mobile.
Your Turn
Copy and paste the code into your Custom CSS panel in Squarespace, then tweak the text and sizes to fit your site. Remember: the magic is in the customization! Play around with the values until the design feels uniquely yours.
Most importantly, have fun with your Squarespace website ✨
Want to customize your blog post pagination? We can do that with CSS too! Check out this tutorial for more info:
/* custom blog list pagination from insidethesquare.co*/
.next-label, .prev-label{
font-size:0
}
.next-label:after{
font-size:1.25rem;
content:"Explore More Tutorials";
line-height:2.2rem
}
.prev-label:after{
font-size:1.25rem;
content:"See Previous List";
line-height:2.2rem
}
@media only screen and (max-width: 640px){
.blog-list-pagination {
flex-direction:column!important
}
}