How to add Next/Previous buttons to your post

Ever wanted to make navigation between your posts easier for your readers? What about showing the titles of the following posts, so readers stay clicking, stay engaged?

In this article, find out how to add Next/Previous buttons to your post.

The Final Product

How to Add Next/Previous buttons

1 First, head to your Post Page.

2. Turn on Dev Mode. You can find the button to turn on Dev Mode in the top left part of the Editor. This will let you access the code panel:

3. Now click on the Add (+) button in the left sidebar. From here, go to Box and add a Themed Box. Click on the box, then Design > Customize Design > Fill Color & Opacity and adjust the slider to 0% opacity. This is an optional step but it will help you if you need to move the buttons around the page.

4. Center the box. Add 2 more smaller boxes inside on each side of the main box. Make sure that smaller boxes are attached to the bigger one. These boxes will hold the Next/Previous post buttons, as well as their titles. Set the box background to 0% opacity (look into 3 step).

5. In each small box, go back to the Add (+) button and add a button and a text element from the Add panel. These will be your buttons for Next/Previous posts and titles. Note that if you have long titles and set text to bigger font, they will take up much more space on your screen.

It should look something like this at first:

6. Now customize the design of the text and buttons to match your blog’s look and feel. You can also edit the text of these buttons to say “Next” and “Previous”, or “Next post” and “Previous post”. Here’s one example:

7. Next, you’ll need to rename smaller boxes, buttons and text elements to corresponding names in the code. You can rename these elements by clicking on them and editing their names in the code panel below. Look for the field “ID” in the bottom right and type in the new name. Rename the left smaller box to “#previousBox” and the right smaller box to “#nextBox”. Then rename the left Button to “#previous” and the right button to “#next”. Finally, rename the left text element to “#previousPost” and the right text element to ”#nextPost”. It’s important that the names of the elements correspond with the names in the code.

8. In the main part of the code panel, paste in the code you see below and check if there are any errors. The code panel will show a red underline in the code in case there are any errors. If you don’t see any, your code’s perfect. Then, go to Preview mode (Preview button in top right), and check if there are any error messages at the bottom of the page in the Developer Console. If you see any errors at all, make sure to take a closer look at the words inside the single quotation marks $w(‘ ‘). They should match the names of the elements in the Editor.

Place the big box anywhere on the Post page, where you want the Previous/Next buttons to appear. Keep in mind that these buttons will appear on all of your posts, so choose their place accordingly.

Note - the Next/Previous post buttons will only work on the live site, so publish your site to test them out.

import wixData from 'wix-data';
import wixLocation from 'wix-location';
let posts = [];
$w.onReady(function () {
   wixLocation.onChange((location) => {
       init();
   })
   init();
});
function getCurrentPostIndex(url) {
   let index;
   posts.forEach((post, i) => {
       if (post.postPageUrl === url) {
           index = i;
       }
   });
   return index;
}
function init() {
   console.log('init');
   let currentPostUrl;
   let currentPostIndex;
   wixData.query('Blog/Posts')
       .ascending('publishedDate')
       .find()
       .then((results) => {
           posts = results.items;
       }).then(() => {
           currentPostUrl = `/${wixLocation.path.join('/')}`;
           currentPostIndex = getCurrentPostIndex(currentPostUrl) || 0;
           console.log(currentPostIndex);
           if (currentPostIndex === 0) {
               $w('#previousBox').hide();
           } else {
               $w('#previousBox').show();
               const prevPostTitle = posts[currentPostIndex - 1].title;
               $w('#previousPost').text = prevPostTitle;
           }
           if (currentPostIndex === posts.length - 1) {
               $w('#nextBox').hide();
           } else {
               $w('#nextBox').show();
               const nextPostTitle = posts[(currentPostIndex || 0) + 1].title;
               $w('#nextPost').text = nextPostTitle;
           }
       })
   $w('#previous').onClick(() => {
       wixLocation.to(posts[currentPostIndex - 1].postPageUrl);
   });
   $w('#previousPost').onClick(() => {
       wixLocation.to(posts[currentPostIndex - 1].postPageUrl);
   });
   $w('#next').onClick(() => {
       wixLocation.to(posts[currentPostIndex + 1].postPageUrl);
   });
   $w('#nextPost').onClick(() => {
       wixLocation.to(posts[currentPostIndex + 1].postPageUrl);
   });
}

9. (Optional) You could also pin the big box that holds all the buttons and texts to the bottom of your screen to make it always visible to your Blog visitors, even when they scroll down your posts. To pin the big box, right-click the box and click Pin to screen. Finally, select a position on the grid under the Set position.

So there you have it - your own awesome Next/Previous posts buttons that stand out from the crowd!

Want to play around with more customization and just a little bit of code? Check out Velo by Wix.