Change Blog List Pagination Older & Newer to custom text

Site URL: https://thewanderertraveljournal.co.uk/destinations

Help any one? Wanting to change the older and newer blog list paginations to custom text for a client. Also, any one know how I can increase the spacing between the bottom blog list posts and the older/newer wording?

Thanks in advance.

Hi. Add to Settings > Advanced > Code Injection > Header

<style>
nav.BlogList-pagination {
    margin-top: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {  
		$("span.BlogList-pagination-link-label").html(function() { 
          return $(this).html().replace("Older", "New older custom");  
    });
    $("span.BlogList-pagination-link-label").html(function() { 
          return $(this).html().replace("Newer", "New newer custom");  
    });
	});
</script>

Worked a treat, thank so much. 😄

That would be great, thank you. You are very kind.

On 5/5/2021 at 3:48 PM, miss-sammiedesigns said:

That would be great, thank you. You are very kind.

Add to Design > Custom CSS

/* Mobile issues */
@media screen and (max-width:640px) {
/* center image */
footer.Footer .slide {
    float: none !important;
    margin: 0 auto;
}
/* remove footer vertical lines */
footer.Footer .code-block {
    display: none;
}
}

Hello I would also like to achieve this with the older-posts pagination wording in 7.1. Can you assist with code to update the older posts and newer posts wording to Next Page and Previous Page. 

As a side question can this pagination be removed?

On 2/8/2022 at 10:36 AM, danal said:

Hello I would also like to achieve this with the older-posts pagination wording in 7.1. Can you assist with code to update the older posts and newer posts wording to Next Page and Previous Page. 

As a side question can this pagination be removed?

Add to Design > Custom CSS

h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}

To remove, add this to Design > Custom CSS

h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: none !important;
}

On 5/1/2021 at 9:35 AM, tuanphan said:

Hi. Add to Settings > Advanced > Code Injection > Header

<style>
nav.BlogList-pagination {
    margin-top: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {  
		$("span.BlogList-pagination-link-label").html(function() { 
          return $(this).html().replace("Older", "New older custom");  
    });
    $("span.BlogList-pagination-link-label").html(function() { 
          return $(this).html().replace("Newer", "New newer custom");  
    });
	});
</script>

 

Hi Tuanphan - thanks for this. We have the same problem, but the script only works on the first page load. When we then use the pagination to forward or backward a page, it does again show the original labels. Hitting f5 remedies that, but it should work on the first load. Any pointers on how that could be achieved?

Thanks a lot in advance!

1 hour ago, k_18 said:

the script only works on the first page load. When we then use the pagination to forward or backward a page, it does again show the original labels.

This is because you are using a Brine-family template on Squarespace 7.0, and when Ajax Loading is enabled (as it currently is) the code injected in your header will only load on the initial site load, or a refresh. It won't load when other pages load.

To resolve this, you'll need to disable Ajax Page Loading in Site Styles or rewrite the code to work with this. For more details, see my guide entitled Why does Squarespace code only work on refresh?

Did this help? Please give feedback by clicking an icon below  ⬇️ 

Thanks a lot, Paul, that did it!

Hello.

I used the above code to change the pagination wording on a site, but I'd also like to try add this to the top of the blog page - so where the "More" links are at the bottom of the page, I'd like to be able to display these at the top of the page too so that people don't have to scroll all the way to the bottom to find more posts.

Thi is the link - https://www.foundregional.com.au/found-food-drink

Thanks.

Hi,

Move this

under this dropdown?

Yes, that's the one! 

My client wants the pagination option at the bottom and the top of the page so that people don't have to scroll down to get to the next page.

On 6/9/2023 at 2:19 PM, KyahDigital said:

Yes, that's the one! 

My client wants the pagination option at the bottom and the top of the page so that people don't have to scroll down to get to the next page.

Add this code to Settings > Advanced > Code Injection > Footer (or Settings > Developer Tools > Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.blog-basic-grid .blog-list-pagination').insertAfter('div#block-yui_3_17_2_2_1662605728287_11102');
})
</script>
<style>
  .blog-list-pagination {
    margin-top: -20px;
}
</style>

On 6/11/2023 at 5:18 PM, tuanphan said:

Add this code to Settings > Advanced > Code Injection > Footer (or Settings > Developer Tools > Code Injection > Footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.blog-basic-grid .blog-list-pagination').insertAfter('div#block-yui_3_17_2_2_1662605728287_11102');
})
</script>
<style>
  .blog-list-pagination {
    margin-top: -20px;
}
</style>

 

Thank you - it's added it to the top, but it doesn't look right:

Any suggestion for a fix?

Also - the client uses blogs for a number of different pages/sections on their site, so is there a way to make this a universal change for anywhere that's using a blog? Or do I need to add the code for each one and pull out the individual blocks in the code?

Thanks!

On 6/14/2023 at 1:14 PM, KyahDigital said:

Thank you - it's added it to the top, but it doesn't look right:

Any suggestion for a fix?

Also - the client uses blogs for a number of different pages/sections on their site, so is there a way to make this a universal change for anywhere that's using a blog? Or do I need to add the code for each one and pull out the individual blocks in the code?

Thanks!

That code should run on all pages.

You mean remove left More text or?

Hi I'm trying to remove the numbered pagination at the bottom of the Blog list page on a 7.1 site. How do I do that?

On 2/19/2024 at 9:21 AM, JasonArend said:

Hi I'm trying to remove the numbered pagination at the bottom of the Blog list page on a 7.1 site. How do I do that?

You can use this code to Custom CSS box

.item-pagination[data-collection-type^="blog"] {
	display: none !important;
}