Posted inTechnology / JavaScript / jQuery / php / Programming / wordpress

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.

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:

function pakainfo_post_navigation(){
?>
} 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(){
?>
} 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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype