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:

EXAMPLE
PREVIOUS-LINK «

EXAMPLE
NEXT-LINK »

Related articles

• Mobile Commerce Optimization Best Practices: From Landing Page to Checkout (paltip.com)
• From Designer to Developer: A Brief Guide (shutterstock.com)
• Office Closed Today due to weather, but we’re available in Chat and Tickets (paltip.com)
• We’re hiring 14 people in product management, support, sales, engineering and recruitment! (paltip.com)
• 10 Professional Development Tips to Boost Your SEO Career (moz.com)