Add Previous and Next Post Links on Single Post Pages

From iThemes Codex
Jump to: navigation, search

If you want to show a Previous or Next Post link on a single post page, you can do so using a shortcode. Add the following code at the end of your functions.php file (but before the closing ?>, if any).


function my_previous_next_post() {
    // retrieve the value for next post link
    $next_string = "Next post →";
    next_post_link("%link", $next_string);
    $next_link = ob_get_clean(); 
    // retrieve the value for previous post link
    $previous_string = "← Previous post";
    previous_post_link("%link", $previous_string);
    $previous_link = ob_get_clean(); 
    // build output
    $return = PHP_EOL . '<div id="next-previous" class="navigation clearfix">' . PHP_EOL;

    // display previous link if any
    if ($previous_link) {
        $return .= '<div class="nav-previous alignleft">'. PHP_EOL;
        $return .= $previous_link. PHP_EOL;
        $return .= '</div>'. PHP_EOL;

    // display next link if any
    if ($next_link) {
        $return .= '<div class="nav-next alignright">'. PHP_EOL;
        $return .=  $next_link . PHP_EOL;
        $return .= '</div>'. PHP_EOL;

    $return .= '</div>';

    return $return;
add_shortcode('previous-next-post-links', 'my_previous_next_post');


Insert the shortcode [previous-next-post-links] in your LoopBuddy layout where you want the Previous and Next post links to appear.

Customize the Appearance

  • you may have to add some styling, using css you can target the classes used in this example
  • you can change the appearance of the links by changing the following lines in the code:
    $next_string = "Next post &rarr;";


    $previous_string = "&larr; Previous post";

← Back to LoopBuddy Codex Home