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 a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk