WordPress Next Previous Article/post using CSS

Today, We want to share with you WordPress Next Previous Article/post using CSS without JavaScript.In this post we will show you Previous & Next Single Post Navigation Links In WordPress, hear for Create Cool Previous-Next Post Navigation Button for WordPress Blog – just using CSS without JavaScript we will give you demo and example for implement.In this post, we will learn about How to get link and title of next and previous post on single page with an example.

WordPress Next Previous Article/post using CSS without JavaScript

There are the Following The simple About Next And Previous Links in WordPress Posts Full Information With Example and source code.

As I will cover this Post with live Working example to develop How to add next and previous links to your WordPress site, so the wordpress next/previous post with thumbnail is used for this example is following below.

Read Also:  Fatal error : Maximum execution time of 300 seconds exceeded in phpmyadmin

5+ Next Previous Page WordPress Plugins 2020

  • 1. Next Post Fly Box For WordPress
  • 2. Advanced Post Navigator
  • 3. Swipeable – WordPress Plugin Next Previous Page
  • 4. CBX Next Previous Link
  • 5. Floating Links – Fancy Top Bottom & Next Previous Post Links

Step-1 : Simple CSS Source Code

Open your WordPress any theme’s style.css file as well copy and paste below source code:

/* side bar arrow */

.leftSideArrow a {
position: fixed;
z-index: 100;
left: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}

.leftSideArrow a:hover {
left: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}

.rightSideArrow a {
position: fixed;
z-index: 100;
right: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}

.rightSideArrow a:hover {
right: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}

.lightArrowBar a {
background: #090909;
color: #fff;
text-decoration: none;
font-size: 20px;
border-radius: 2px;
}

.leftSideArrow a, .rightSideArrow a {
position: fixed;
z-index: 100;
top: 70%;
padding: 0 6px
}
.leftSideArrow a {
left: -5px
}
.leftSideArrow a:hover {
left: 0
}
.rightSideArrow a {
right: -5px
}
.rightSideArrow a:hover {
right: 0
}

.lightArrowBar a:hover {
background: #b11f24
}
/* end side bar arrow */

Step-2 Add Code for functions File

Open your wordpress theme’s functions.php file and put below code at the end of file:

Read Also:  Add Session Array programming with php

function pakainfo_post_navigation(){
?>
<div class="lightArrowBar">
<div class="leftSideArrow"></div>
<div class="rightSideArrow"></div>
</div>
<!--?php <br ?--> }

add_action('wp_footer', 'pakainfo_post_navigation');

using Font-awesome fonts

If you are using in wordpress Font-awesome fonts like me on Pakainfo, try using this source code:

function pakainfo_post_navigation(){
?>
<div class="lightArrowBar">
<div class="leftSideArrow"></div>
<div class="rightSideArrow"></div>
</div>
<!--?php <br ?--> }
add_action('wp_footer', 'pakainfo_post_navigation');

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about next previous post wordpress plugin.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.