Post Navigation as buttons

Blog Archive:

Single Post:

jQuery(function($){
   $('.inactive-button').click(function(e){
     e.preventDefault();
   });
});
<?php

/**
 *  Post Navigation
 *
 */
function ea_post_navigation() {

    $navigation = '';

    // Archive Nav
	if( ! is_singular() ) {

        // Don't print empty markup if there's only one page.
        if ( $GLOBALS['wp_query']->max_num_pages > 1 ) {
            $args = array(
                'prev_text'          => 'Next Page',
                'next_text'          => 'Previous Page',
                'screen_reader_text' => __( 'Posts navigation' ),
            );

            $next_link = get_previous_posts_link( $args['next_text'] );
            if( empty( $next_link ) )
                $next_link = ea_inactive_link( $args['next_text'] );
            $navigation .= '<div class="nav-previous">' . $next_link . '</div>';

            $prev_link = get_next_posts_link( $args['prev_text'] );
            if( empty( $prev_link ) )
                $prev_link = ea_inactive_link( $args['prev_text'] );
            $navigation .= '<div class="nav-next">' . $prev_link . '</div>';

            $navigation = _navigation_markup( $navigation, 'posts-navigation', $args['screen_reader_text'] );
        }

    // Single Post Nav
    } elseif( is_singular( 'post' ) ) {

        $args = array(
            'prev_text' => 'Next Post',
            'next_text' => 'Previous Post',
            'in_same_term' => false,
            'excluded_terms' => false,
            'taxonomy' => 'category',
        );

        $next = get_next_post_link(
            '<div class="nav-next">%link</div>',
            $args['next_text'],
            $args['in_same_term'],
            $args['excluded_terms'],
            $args['taxonomy']
        );
        if( empty( $next ) )
            $next = '<div class="nav-next">' . ea_inactive_link( $args['next_text'] ) . '</div>';

        $all = '<div class="nav-all"><a class="button" href="' . get_permalink( get_option( 'page_for_posts' ) ) . '">All Posts</a></div>';

        $previous = get_previous_post_link(
            '<div class="nav-previous">%link</div>',
            $args['prev_text'],
            $args['in_same_term'],
            $args['excluded_terms'],
            $args['taxonomy']
        );
        if( empty( $previous ) )
            $previous = '<div class="nav-previous">' . ea_inactive_link( $args['prev_text'] ) . '</div>';

        $navigation = _navigation_markup( $next . $all . $previous, 'post-navigation', 'Post Navigation' );
    }

    echo $navigation;

}
add_action( 'tha_content_while_after', 'ea_post_navigation' );

/**
 * Inactive Link
 *
 */
function ea_inactive_link( $text ) {
    return '<a href="#" class="button button-inactive">' . $text . '</a>';
}

/**
 * Posts Navigation as Buttons
 * @author Bill Erickson
 * @link http://www.billerickson.net/code/previous-next-links-as-button
 *
 * @param string $attr, link attributes
 * @return string
 */
function be_pagination_posts_nav( $attr ) {
	$attr .= ' class="button"';
	return $attr;
}
add_filter( 'previous_posts_link_attributes', 'be_pagination_posts_nav' );
add_filter( 'next_posts_link_attributes', 'be_pagination_posts_nav' );

/**
 * Post Navigation as Buttons
 *
 */
function be_pagination_post_nav( $output ) {
    return str_replace( '<a ', '<a class="button" ', $output );
}
add_filter( 'previous_post_link', 'be_pagination_post_nav' );
add_filter( 'next_post_link', 'be_pagination_post_nav' );

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk