Adjacent Posts Side Tabs in Oxygen

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

Code:

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

Code:

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%.

PHP & HTML: