CSS: Styling WordPress Previous-Next Post Navigation Links

Tutorial on how to style your post “Previous/Next” navigation links that can be found in “single.php” file. The navigation links includes featured post thumbnail along side it. The style is inspired by Asteria-Lite WordPress theme by Towfiqi. I’ve made some adjustment to it just to show how to use the style and apply it manually to your theme.

To make things easy for you to just copy and paste the codes, here’s the example tags for you to use. You can place it anywhere inside the single post template.

You are free to customize the CSS styling that suits your theme. You can use ASCII special characters, Font-Awesome icons, images, etc to replace the arrows inside the <i></i> html tag.

HTML+PHP

<div id="nav_nextprev" class="navigation">

<?php  $prevPost = get_previous_post(true); if($prevPost) { ?>

<div class="nav-box nav-prev"></div>

<?php  $nextPost = get_next_post(true); if($nextPost) { ?>

<div class="nav-box nav-next"></div>

</div>

CSS

/**
 * Add to your theme stylesheet
 */


#nav_nextprev {
    background: #fff;
    width: 100%;
    float: left;
    margin-top: 30px;
    border: 1px solid #eee;
}

#nav_nextprev a {
    text-decoration: none;
}

#nav_nextprev a:hover {
    text-decoration: underline;
}

.nav-prev {
    width: 46%;
    float: left;
    padding: 2%;
}

.nav-next {
    width: 46%;
    float: right;
    padding: 2%;
    text-align: right;
}

#nav_nextprev img {
    float: left;
    margin-right: 15px;
    width: 60px;
    height: 60px;
    border: none;
}

#nav_nextprev img {
    border: 1px solid #fff;
}

#nav_nextprev .nav-next img {
    float: right;
    margin-left: 15px;
    margin-right: 0;
}

.nav-prev, .nav-next {
    position: relative;
    min-height: 60px;
}

#nav_nextprev .nav-prev:hover a, #nav_nextprev .nav-next:hover a {
    color: #fff;
}

#nav_nextprev .nav-prev span, #nav_nextprev .nav-next span {
    color: #aaa;
    font-size: 13px;
}

#nav_nextprev .nav-prev:hover span, #nav_nextprev .nav-next:hover span {
    color: #fff;
}

.left_arrow, .right_arrow {
    font-size: 15px;
    color: #ccc;
    background: #f1f2f3;
    display: block;
    width: 45px;
    height: 25px;
    padding-top: 5px;
    position: absolute;
    text-align: center;
    bottom: 30px;
}

.left_arrow i, .right_arrow i {
    color: #ccc;
}

.left_arrow {
    right: 0;
    text-decoration: none;
}

.right_arrow {
    left: 0;
    text-decoration: none;
}

#nav_nextprev .nav-prev:hover .left_arrow, #nav_nextprev .nav-next:hover .right_arrow {
    background: #fff;
}

#nav_nextprev .nav-prev:hover .left_arrow i {
    color: #53a93f;
}

#nav_nextprev .nav-next:hover .right_arrow i {
    color: #D73D32;
}

.nav-next:hover {
    background-color: #D73D32;
}
.nav-prev:hover {
    background-color: #53a93f;
}

Result

Once you have this set up with the styling that you prefer,.you might have something that looks like this:

See Also:  Install A WordPress Blog

Leave a Reply

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

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Next Post

LeaGoo Smartphones - Practical, Affordable and Stylish

Fri Feb 27 , 2015
Staying true to its brand’s philosophy, “Practical, Affordable and Stylish” – LEAGOO, the fast-growing smartphone company unveils yet another value for money smart device packed with cutting-edge features to the Malaysian market. LEAGOO kick-started in Malaysia and has since proven to be well-liked among smartphone users. Increasingly, China-based smartphone manufacturers […]
leagoo smartphones practical affordable and stylish