W2D Website 2 Design Company Logo
Menu

How to Add Previous Next Links in Oxygen Builder

August 19, 2021

Adding Previous and Next Links on an Oxygen Single Post Template is Really Simple

If you’re building your blog with Oxygen Builder, one small detail can make a big difference in how readers move through your posts. Adding a Previous Next links in Oxygen Builder keeps people exploring your content instead of bouncing after one article.

It’s one of those small touches that makes your site feel more thoughtful and connected. And it only takes a few minutes to set up.


Why You’ll Want These Links

Think of Previous and Next links as a friendly way to guide your readers through your work. They keep people engaged and naturally improve how long visitors stay on your site, which is great for SEO. It’s a simple design choice that quietly improves the overall experience.


Step 1. Add a Code Block for the Previous Post Link

Inside your Oxygen single post template, drop in a Code Block where you want your navigation to appear. Most people place it right below the main post content.

Add this PHP snippet inside that Code Block:

<?php
if ( get_previous_post_link() ) {
    previous_post_link();
}
?>

This checks if there’s a previous post available and displays a link to it automatically.


Step 2. Add a Code Block for the Next Post Link

Now do the same thing for the next post. Add another Code Block and paste in this snippet:

<?php
if ( get_next_post_link() ) {
    next_post_link();
}
?>

That’s it. Your blog now has a clean way to move between posts.


Step 3. Make It Look Good With a Little CSS

By default, the links will look plain, but you can easily style them to fit your brand. Here’s a simple example to get you started:

.post-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
}

.post-navigation a {
  color: #0073e6;
  text-decoration: none;
  font-weight: 500;
}

.post-navigation a:hover {
  color: #005bb5;
  text-decoration: underline;
}

If you wrap your two code blocks inside a div with the class post-navigation, this CSS will spread your links out neatly. You can adjust the colors or add your own font styles to make it feel more like your brand.


A Few Personal Tips

When I add these links, I like to include small labels like “← Previous Post” or “Next Post →” so it’s immediately clear what they do.
Keep the design simple and easy to scan. Your goal is to help readers flow through your content without thinking about it.
And always test on mobile to make sure the layout still feels natural.


Final Thoughts

Adding Previous and Next links in Oxygen Builder is one of those quick wins that just makes your site better. It’s easy to do, doesn’t slow anything down, and adds that little bit of polish that separates a good blog from a great one.

If you care about design, storytelling, and creating a better experience for your readers, this is a small but meaningful upgrade that says you pay attention to detail.

Leave a Reply

Your email address will not be published. Required fields are marked *