Native linking to previous and next post or page using CMS

Community resources Product feedback
19

I solved this issue without manually assigning anything in the CMS. If the post order is changed or if posts are deleted, the buttons update automatically. A working version of this can be found here: http://www.hammerhouse.io/post/jonathanroy

How it works:
-A dynamic list containing your posts is added to the post template page.
-Webflow automatically adds the class ‘w–current’ to the current post.
-jQuery searches the dynamic list for that class and the posts that come before and after it.
-jQuery updates your next / previous button anchor tags.


Step A - Add the the post list:

  1. At the bottom of the post template page, add a Dynamic List containing all posts
  2. Assign the ID ‘post_list’

729×205 20.3 KB



Step B - Add dynamic links:
3) Add a Text Link element inside the Dynamic Item
4) Set the link to Current Post
5) Set the text to the post’s Name field

731×379 37.7 KB



Step C - Add ID’s to buttons:
6) Add ID ‘previous_button’ to previous post button
7) Add ID ‘next_button’ to next post button

813×341 41.5 KB



Step D - Paste the code:
8) In the post template page settings, add the following code inside the head tag section:
-CSS is included to hide the post list on the published page

881×587 68.4 KB


Code: 
<style>#post_list{display: none;}</style>

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () { 
    
    var next_href = $('#post_list .w--current').parent().next().find('a').attr('href');
    var previous_href = $('#post_list .w--current').parent().prev().find('a').attr('href');
    
    //if last post in list
    if(next_href == undefined) {
      next_href = $('#post_list').children().children().first().find('a').attr('href');
      $('#next_button').fadeOut(); //optional - remove if you want to loop to beginning
    }
    
    //if first post in list
    if(previous_href == undefined) {
      previous_href = $('#post_list').children().children().last().find('a').attr('href');
      $('#previous_button').fadeOut();  //optional - remove if you want to loop to end
    }
    
    //apply hrefs to next / previous buttons
    $('#next_button').attr('href', next_href);
    $('#previous_button').attr('href', previous_href);
    
  });
</script>
30 Likes