This members-only tutorial improves upon the earlier one and provides the steps to display links to previous and next posts (image and title) as sticky tabs along the edges of the browser that slide open on hover in Oxygen.

From 1200px and below, the adjacent post navigation will appear below the post.

From 768px and below, the adjacent posts will appear one below the other.

We are going to load and use Dashicons for the arrows.

For posts that do not have a featured image, we shall show a default placeholder image.

Step 1

Let's add a custom image size for the adjacent post's featured images.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes


add_image_size( 'adjacent_thumbnail', 320, 100, true );

Set the snippet to run everywhere. Save changes and activate.

Regenerate thumbnails.

Add another snippet to load Dashcions.

Title: Load Dashicons


wp_enqueue_style( 'dashicons' );

Set the snippet to run everywhere. Save changes and activate.

Step 2

Edit the Template for single blog posts with Oxygen editor.

Add a Section below all other Sections and a Code Block inside it.

Set the width of Code Block div to 100%.


This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: