Introduction

A floating next/previous post navigation bar in WordPress is a feature of the user interface that makes it simple for users to move between various blog entries or pages.

In order to navigate between posts without having to return to the main blog page or utilize the normal  navigation, users can often navigate to the next or previous post using buttons or links with image thumbnail in this navigation bar.

The “floating” aspect refers to the behavior of the navigation bar as the user scrolls down the page. Instead of being fixed at the top or bottom of the page, a floating navigation bar stays visible as the user scrolls, ensuring easy access to the next and previous post links without requiring the user to scroll back to the top or bottom of the page. This enhances the user experience by providing convenient and seamless navigation throughout the website. Additionally, a floating navigation bar adds a touch of elegance and modernity to the overall design. It allows users to effortlessly explore different sections of the website and encourages them to stay longer, increasing engagement and reducing bounce rates.

So, in this article, we will teach you how to make floating next previous post navigation bar in WordPress without using plugins. 

Step 1. Add post /page navigation bar in detail page.

Add following code at the end in single.php file. If there is a call for footer function such as get_footer() then below code should be placed just before get_footer().

$nextPost = get_previous_post();
if(!empty($nextPost) && ($nextPost->ID != get_the_ID())):
    ?>
    <div class="left-float-post">
        <div class="media">
            <img class="mr-2" src="<?php echo esc_url(get_the_post_thumbnail_url($nextPost->ID,'thumbnail'));?>">
            <span class="post-arrow navi-left"><i class="fa fa-forward"></i></span>
            <div class="float-post-navigation media-body ml-2">
                <h3 class="mt-0 mb-1"><a href="<?php echo esc_url(get_permalink($nextPost->ID));?>"><?php echo get_post($nextPost->ID)->post_title;?></a></h3>
                <p><?php echo esc_html(get_the_date('',$nextPost->ID));?></p>
            </div>
        </div>
    </div>
    <?php endif;
$prevPost = get_next_post();
if(!empty($prevPost) && ($prevPost->ID != get_the_ID())):?>
    <div class="right-float-post">
        <div class="media">
            <div class="float-post-navigation media-body mr-2">
                <h3 class="mt-0 mb-1"><a href="<?php echo esc_url(get_permalink($prevPost->ID));?>"><?php echo get_post($prevPost->ID)->post_title;?></a></h3>
                <p><?php echo esc_html(get_the_date('',$prevPost->ID));?></p>
            </div>
            <span class="post-arrow navi-right"><i class="fa fa-backward"></i></span>
            <img class="ml-2" src="<?php echo esc_url(get_the_post_thumbnail_url($prevPost->ID,'thumbnail'));?>">
      
        </div>
    </div>
    <?php 
endif;

Step 2. Add css that affect such floating bar only

/*Next and previous post*/

.left-float-post {
  position: fixed;
  bottom: 0px;
  left: 5px;
  width: auto;
  animation: fade-in-up 0.25s ease forwards;
  z-index: 9999;
  background: #FFF;
  margin-bottom: 190px;
  padding: 5px 5px 5px 5px;
  border-radius: 15px;
  border-top-style: outset;
  animation-name: left_post;
  animation-duration: 8s;
}

.left-float-post img {
  width: 125px;
}

@keyframes left_post {
  0% {
    left: -300px;
  }

  25% {
    left: 0px;
  }
}

.left-float-post h3 {
  font-size: 14px !important;
}

.left-float-post p {
  font-size: 12px !important;
}

.right-float-post {
  position: fixed;
  bottom: 0px;
  right: 5px;
  width: auto;
  animation: fade-in-up 0.25s ease forwards;
  z-index: 9999;
  background: #FFF;
  margin-bottom: 190px;
  padding: 5px 5px 5px 5px;
  border-radius: 15px;
  border-top-style: outset;
  animation-name: right_post;
  animation-duration: 8s;
}

.right-float-post img {
  width: 125px;
}


@keyframes right_post {
  0% {
    right: -300px;
  }

  25% {
    right: 0px;
  }
}

.right-float-post h3 {
  font-size: 14px !important;
}

.right-float-post p {
  font-size: 12px !important;
}

.post-close {
  display: block;
  float: right;
  cursor: pointer;
  padding-right: 10px;
}

.post-arrow {
  display: block;
  cursor: pointer;
}
.float-post-navigation {
  display: none;
}
/* end */

Step 3. Add jQuery to hide such navigation block

Add jQuery to hide such a floating bar so that upon button pressing on the navigation block, the post title will hide, displaying only the image.

// toggle post title at floating next previous post bar 

jQuery('.post-arrow.navi-left').on('click', function () {
    jQuery(this).next().toggleClass('d-block');
})
jQuery('.post-arrow.navi-right').on('click', function () {
    jQuery(this).prev().toggleClass('d-block');
})

Below is the example from Context Blog Pro WordPress theme

This feature is available in many of our premium themes. Hence this code is truly and efficiently works.

Floating next previous post navigation bar

Conclusion:-

If you are able to implement above codes in your theme, you will definitely make floating next previous post navigation bar in WordPress without using any plugins. If need support then you can contact us. We will here to support you. Meanwhile you can see some of our cool free themes here.

Leave a Reply

Share via
Copy link