top of page

The Essential Guide to Blogging

The Essential Guide to Blogging

Learn how to write, design and promote your posts. Get SEO tips, social media recommendations and more.

Wix Blog Updates

Learn about brand new features

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.



// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction

import wixData from 'wix-data';
import wixLocation from 'wix-location';

let prevPostUrl, nextPostUrl;

$w('#previous').onClick(() => {
    if (prevPostUrl) {
        wixLocation.to(prevPostUrl);
    }
});
$w('#previousPost').onClick(() => {
    if (prevPostUrl) {
        wixLocation.to(prevPostUrl);
    }
});
$w('#next').onClick(() => {
    if (nextPostUrl) {
        wixLocation.to(nextPostUrl);
    }
});
$w('#nextPost').onClick(() => {
    if (nextPostUrl) {
        wixLocation.to(nextPostUrl);
    }
});

$w.onReady(function () {
   wixLocation.onChange((location) => {
       init();
   })
   init();
});

async function init() {
    const post = await $w('#post1').getPost();
    const publishedDate = new Date(post.lastPublishedDate).toISOString();

    try {
        const [queryNext, queryPrevious] = await Promise.all([
            wixData.query('Blog/Posts')
                .gt('publishedDate', publishedDate)
                .ascending('publishedDate')
                .limit(1)
                .find(),
            wixData.query('Blog/Posts')
                .lt('publishedDate', publishedDate)
                .descending('publishedDate')
                .limit(1)
                .find()
        ]);
        if (queryPrevious.length === 0) {
            if (prevPostUrl !== null) {
                $w('#previousBox').hide();
                prevPostUrl = null;
            }
        } else {
            if (prevPostUrl === null) {
                $w('#previousBox').show();
            }
            $w('#previousPost').text = queryPrevious.items[0].title;
            prevPostUrl = queryPrevious.items[0].postPageUrl;
        }
        if (queryNext.length === 0) {
            if (nextPostUrl !== null) {
                $w('#nextBox').hide();
                nextPostUrl = null;
            }
        } else {
            if (nextPostUrl === null) {
                $w('#nextBox').show();
            }
            $w('#nextPost').text = queryNext.items[0].title;
            nextPostUrl = queryNext.items[0].postPageUrl;
        }
    } catch (e) {
        console.log('Error', e);
    }
}

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.

16 Comments


Unknown member
Feb 29

I agree with the others, this should be built into the Wix Editor and we should opt to use it or not. I followed all of the steps, and almost everything works. The buttons are not clicking to the previous or next. So, users cannot navigate to previous and next blog posts. How do I fix this, I don't have any error codes?

----------

Update 02-29-2024 I enlarged the navigation area and centered the main container in that space and the navigation buttons are working now. This code works for me. Thank you!


----------------


Update Again 02-29-2024

THIS CODE IS VERY BUGGY. If you make an update to a previous post, it doesn't display the correct previous or next post and…


Like

Unknown member
Feb 14

This feature needs to be built into the blog like it is with your competitors Squarespace and Wordpress. We shouldn't have to code this and then trouble shoot the code. Just opt to have it on our blog.

Like

Unknown member
Dec 27, 2023

Hi!

This is KIND OF working for me. I can navigate through about the last three posts on my blog back and forth, but then, instead of linking to the previous post, the "previous Post" button and title link to the SAME POST I'M ON.

(Example)

Post #10, today's post. "Previous Post" button links to yesterday's post. No "Next Post" Button shown (because there is no next post)

Click "Previous Post"

Post #9, yesterday's post. "Previous Post" button links to Post #8, "Next Post" Button links to post #10

Click "Previous Post"

Post #8, "Previous Post" Button links to Post #8, "Next Post" Button links to post #9

Click "Previous Post" Nothing happens, still on Post #8

Click "Next Post"


Like

Unknown member
Dec 26, 2023

Hi everybody!

In my experience, the code does not work properly as stated.

I think it is because both queries are ordering by publishedDate (original publication date of the post) but init function is getting lastPublishedDate (date of the last update of the post).


const post =await$w('#post1').getPost();

const publishedDate =new

Date(post.lastPublishedDate).toISOString();


I changed lastPublishedDate by publishedDate in the code above, and it is working perfectly in my blog.

Like

Hi - This code is still having some issues.


When I run the code, I get errors on lines 20 and 31. I check my input to your code and they are identical.

From the HOME page, when I click on the newest blog post or any other post, the 'next post' code points to the 2nd blog post ever posted on the site instead of the very first post. If I click on the post dated just before the 2nd to newest blog post, it will still point me to the second post on blog and there is nothing on the previous to point me to the newest post.


The same thing happens if I click on a post…


Like
bottom of page