How to move the "Previous and Next" link to the top of the "Single Blog Post"

How to move the “Previous and Next” link to the top of the “Single Blog Post”

Are you looking to improve the user experience on your WordPress blog by relocating the “Previous” and “Next” navigation links to the top of your single blog post? With a simple snippet of code, you can effortlessly achieve this.

In this document, we’ll guide you through the process of how to move the “Previous and Next” link to the top of the “Single Blog Post” with a simple code snippet.

"Previous and Next" link to the top of the "Single Blog Post"

How to move the “Previous and Next” link to the top of the “Single Blog Post”

Here’s a quick and easy guide to get you started.

  • Log in to your WordPress admin panel using your credentials.
  • In the WordPress dashboard, go to “Appearance” and select “Theme File Editor.”
  • In the Theme Editor, you should see a list of theme files on the right. Locate and select the `functions.php` file from the list.
  • Inside the `functions.php` file, you can add the following code snippet:
add_action('astra_entry_before', 'move_single_post_navigation' );

function move_single_post_navigation() {
    astra_single_post_navigation_markup();
}
  • After adding the code snippet, click the “Update File” button to save your changes.

This code will hook into the astra_entry_before action, which allows you to add content before the single post content.

Alongside this code, it’s necessary to disable the post navigation for individual blog posts. To accomplish this, follow these steps in the customizer:

  • Navigate to Blog > Single Post.
  • Activate the “Disable Post Navigation” toggle.

Together, this code and customization will seamlessly move the “Previous and Next” link to the top of the “Single Blog Post”.

"Previous and Next" link to the top of the "Single Blog Post"

Note: We have documentation or an article for you that will assist you in better understanding it. Here’s the link: https://optimization.bsf.io/docs/add-custom-php-code/.

Now, go to one of your single blog post pages on your WordPress site and refresh the page. You should now see the “Previous” and “Next” navigation links displayed at the top of your blog post content, providing a more convenient reading experience for your website visitors.

"Previous and Next" link to the top of the "Single Blog Post"

That’s it! You’ve successfully moved the “Previous” and “Next” navigation links to the top of your single blog post using a simple code snippet.

Note: Remember to make any changes to your theme’s files with caution, and always keep a backup of your site in case anything goes wrong. If you have any questions or need further assistance, leave a comment below.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page

Take the First Step Toward Success Now.

You’re backed by an amazing team and a risk-free money-back guarantee!

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

This field is required.

REWIND

YEAR IN REVIEW

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form