As bloggers, it’s important to understand our readers’ needs.
This includes not just answering their questions but also making it easy for them to find the information. That’s why we should also focus on making our blog posts’ UX (user experience) great. Readers, especially those in a rush, will really appreciate the convenience.
One way to improve your blog’s UX is by adding a navigation feature, like previous and next links or buttons. If you’re using Gutenberg in WordPress, it’s actually pretty easy to set up, especially if you’re familiar with HTML IDs and fragment identifiers. In this post, I’ll show you how to create this feature.
Purpose of the Navigation Feature
Before we get started, what do I mean by a ‘next and previous navigation’ feature?
Basically, these are two links or buttons placed in each section of your blog posts. The ‘next’ link or button takes the reader to the next part of the post, while the ‘previous’ link or button does the opposite. They stay at the top of the screen for each section, letting the reader move forward or go back to a previous section whenever they want.
By ‘section(s),’ I mean the parts that make up a blog post.
For example, if my blog post has 10 headings, there are 10 sections. Each section includes one heading along with the text, images, and other elements under that heading, including the next and previous navigation feature. You can check out my previous blog posts to see exactly what I mean:
If you notice, the next and previous buttons are really useful for listicles and articles that follow a sequence or process.
This is especially helpful if a listicle has long explanations under each heading. If a reader isn’t interested in the section they’re reading, the buttons make it easy to skip to the next one. With the next and previous buttons, we save readers a lot of effort by letting them jump to the next part without scrolling endlessly.
How to Create a Next and Previous Navigation Feature?
There are different ways to create this navigation feature, but to keep it simple and easy to understand, I’ll show you the basics. We’ll make the previous and next buttons work and place them at the top of the screen for easy access for our readers.
Step 1 — Groupings
Let’s start by imagining we have a listicle blog post with 5 subtopics. Each subtopic will have its own H2 heading, followed by a paragraph that explains it. Group each heading and its text in a block together. This is important for the sticky next and previous navigation feature we’ll add later.
One thing to remember: any block with a sticky feature will only stay visible within its parent group block.
Step 2 — Enable Sticky
The second step is to add a Group block (or a Row block) under each heading. This Group block will hold the navigation buttons or links.
To make it stick to the top of the screen for each section, we need to set each group to be sticky. To do this, go to the settings of each group, open the Position panel, and change the dropdown from default to ‘sticky.’ Once that’s done, we can move on to the next step.
Step 3 — Previous & Next
The third step is to add a paragraph block inside each group block with the text “previous | next.”
You can change the text if you want, but make sure there are two separate pieces of text that we can turn into links, each with a different fragment identifier.
If you’re not familiar, fragment identifiers in HTML are used to link to specific parts of a webpage. They’re helpful for creating internal navigation. The format is “hashtag + HTML identifier,” like this: ‘#sample-fragment-identifier.’
Step 4 — HTML IDs
The fourth step is to assign an HTML identifier to each heading.
To keep it simple, we’ll give the first H2 heading the ID “1st,” the second one “2nd,” the third “3rd,” and so on.
To assign the HTML ID, go to the settings of each H2 heading and open the Advanced section. There, you’ll find the HTML Anchor text box, where you can enter the HTML identifier for each heading.
Step 5 — Links
The fifth step is to turn the “previous | next” text in each section of the blog post into links that will scroll the screen to the corresponding H2 heading, either before or after the section the reader is currently on. To do this, we’ll add the fragment identifiers we set for each H2 heading to these texts.
The rule is, the “previous” link should point to the H2 heading before the current group, and the “next” link should point to the H2 heading after the current group. For example, under the third group, the “previous” text should be turned into a link with the fragment identifier “#2nd,” and the “next” text should link to “#4th.”
Always remember to use the fragment identifier, not just the HTML ID. This tells the browser that you’re creating an internal link, so when the link is clicked, the screen will scroll to the section the link points to on the same page.
Step 6 — Test!
The sixth step is to check if the links are working properly. Preview the page and click the links to make sure the page scrolls to the correct H2 headings.
If you’d like, you can remove the “previous” link in the first group and the “next” link in the last group, since they don’t serve a purpose. However, you can also use them for something else, like scrolling the page to the top when the reader clicks the first “previous” link or scrolling to the conclusion when the last “next” link is clicked.
Designing the Navigation Feature
During testing, you might notice that while the “previous | next” stays at the top of the screen, it can sometimes be hard to read because of its transparent background, letting the main content text show through.
To fix this, we can add a background color to the Group block that holds the text. Simply select the group block, open its settings, and go to the style tab. There, you can adjust things like text size, color, padding, margin, and more.
I also recommend tweaking the padding to make the text look cleaner, so the corners don’t touch the edges of the group block.
If your blog post headings have a big top margin, the “previous | next” navigation bar won’t cover them. But if you’re using a theme like mine with small heading margins, that bar might overlap the heading.
You can fix this by increasing the default top margin of your headings in your theme settings. If you don’t want to change that, there’s an easy fix: just add a spacer or separator before the heading and place the HTML ID there instead of on the heading itself. That way, the heading shows up lower on the page, under the navigation bar when the navigation buttons are pressed.
Final Words
That’s it!
If you’re writing a long blog post, you might want to consider using a different layout. This is especially helpful if a reader only wants to find one specific piece of information and doesn’t want to scroll through multiple sections.
For more ideas, check out my discussion on designing an engaging blog post.
Love this? Pin it and share it with your friends!
