Tutorials for Oxygen Builder

Previous / Next Tutorial

Previous / Next

Often when setting up a blog, or even a portfolio, you want to offer users the option to go to the previous blog article or to the next one.

How do you create something like that in Oxygen? Well, that is relatively easy to do and we will show you how to set it up step by step.

There are two options you can show your visitors. One is having them see the title of the previous or next post. The other is just showing them something like ← Previous or Next →.

We will go through both. Let's start with the first example.

Way 1

Assuming yo have set up a template in Oxygen that contains the elements for every single blogpost, go there and follow along.

In Oxygen Builder add a section to the top of your template if you want the Previous / Next option in that location. It's the most common location to have it.

Inside that Section drop a Culumns element and set it to two colums. Place in the first column a Code Block.
After you have done that, you will see on the left hand side the Primary tab
and there you will find {...} PHP & HTML. If you click on that it opens a window and you need to delete eveything inside it.

Now place there the following code:

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

Now click in the column on the right and in the Primary tab under Layout Child Elements set it to Stack Child Elements Horizontally and under Horizontal Item Alignment set the aligment to Right.
Then place a Code Block inside that column.

Again in the Primary tab click on PHP & HTML and remove whatever is inside it. Now place there the following code:

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

That's all. If you safe your work and go to your blogarticle in the front-end, you will see the name of the previous and / or next article at the top.

Way 2

Do you just want a ← Previous and Next → option you can do that as well. Follow all the steps above but instead of using the code:

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

Use the following code inside the Code Block on the left:

<?php previous_post_link( '%link', '&#8592; Previous' ); ?>

You can change the ← which is created by using

&#8592;

to something else if you want to. It's just a simple UTF-8 symbol. Here is a list of all the symbols.

In the Code Block on the right you again follow all the steps above and instead of using the code:

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

Use the following code:

<?php next_post_link( '%link', 'Next &#8594;' ); ?>

That's all you need to do. Now your vistors can easily move from one post to the next or previous.

Want To Talk About Oxygen?

On our new forum you can discuss anything related to Oxygen. From the Oxygen Builder itself to the different Oxygen plugins, WordPress and so on.
To The Forum
In accordance with the GDPR you can contact us here.
Copyright © 2020 - 2021
We are not affiliated with Oxygen or endorsed by Soflyy.
Terms & ConditionsPrivacy PolicyCookies
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram