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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($27/month).

Already a member? Log in below or here.

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: