2.3 Change Pagination Titles


Pagination


Because we are using a blog for our lessons there are built-in parameters that are specific to a blog - like the pagination titles at the bottom of each blog post - that we don’t necessarily want:

 
 

You can of course keep it this way and not much harm would be done but call me the fussy German, I like things to be neat and tidy! In this case I really wanted the pagination titles to be relevant to the fact that this is a course, rather than a blog. So I researched this a bit and found a piece of code that changes my wording as follows:

 
 

As you can see I am replacing Newer Post with Previous Lesson which may seem the ‘wrong way around’. I did this because to me the natural flow is left to right and it makes more sense that I would go right for my next lesson. We will be talking about the order of blog posts and how it affects our lessons in 2.5 Lesson Order.


Good to know


Not every template has the previous/next pagination, some only show the post titles, in which case you can skip this.


Step-by-Step


Step 1

Go to > Settings > Advanced > Code Injection > Header


Step 2

Copy the following code and enter it into the Header section and save:

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Step 3

I only have the code that works in Bedford or Brine templates, feel free to try either one if you have a different template. I don’t know the code for other templates if that doesn’t work. In that case I would suggest to either leave it as it is or hide the pagination.

Page Header Injection.png
  • Go to > Page Settings > Advanced > Page Header Code Injection

  • ONLY copy the code beginning with <script> and ending with </script> below the template names that include your template:

/* Bedford, Anya, Hayden */
<script>
  $(document).ready(function() {
      var text = $('.pagination').html();
      text = text.replace('Older Post', 'Next Lesson');
      text = text.replace('Newer Post', 'Previous Lesson');
      $('.pagination').html(text);
});
</script>

/*Brine, Aria, Basil, Burke, Cacao, Clay, Ethan,
Fairfield, Feed, Foster, Greenwich, Hatch, Heights,
Hunter, Hyde, Jaunt, Juke, Keene, Maple, Margot,
Marta, Mentor, Mercer, Miller, Mojave, Moksha,
Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny,
Sonora, Thorne, Wav, West*/ 
<script>
  Y.use('node', 'node-load', function(Y) {
  Y.on('domready', function() {
  Y.all('.BlogItem-pagination-link--prev .BlogItem-pagination-link-label').setHTML('Previous Lesson');
  Y.all('.BlogItem-pagination-link--next .BlogItem-pagination-link-label').setHTML('Next Lesson');
});
});
</script>

Step 4

  • In the code that you copied above you can replace ‘Previous Lesson’ or ‘Next Lesson’ with any text you like that makes sense for your own course.

  • If you prefer to have your 'Next Lesson' on the left and 'Previous Lesson' on the right simply swap these phrases in the code above.

Here is what the code looks like for my Bedford template:

Page Header Injection 2.png