How To Create Sleek Page Navigation in WordPress Without Plugin

page navigation without plugin
This is tutorial about how to adding Page Navigation in your WordPress theme without any plugin.

Open functions.php, and add code below.

/* Adding Page Navigation ********************************************/

	function pagenavi( $p = 2 ) { // pages will be show before and after current page
	  if ( is_singular() ) return; // don't show in single page
	  global $wp_query, $paged;
	  $max_page = $wp_query->max_num_pages;
	  if ( $max_page == 1 ) return; // don't show when only one page
	  if ( empty( $paged ) ) $paged = 1;
	  // echo '<span class="pages">Page: ' . $paged . ' of ' . $max_page . ' </span> '; // pages
	  if ( $paged > $p + 1 ) p_link( 1, 'First' );
	  if ( $paged > $p + 2 ) echo '... ';
	  for( $i = $paged - $p; $i <= $paged + $p; $i++ ) { // Middle pages
	    if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
	  }
	  if ( $paged < $max_page - $p - 1 ) echo '... ';
	  if ( $paged < $max_page - $p ) p_link( $max_page, 'Last' );
	}
	function p_link( $i, $title = '' ) {
	  if ( $title == '' ) $title = "Page {$i}";
	  echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$i}</a> ";
	}

And then add <?php pagenavi(); ?> anywhere after the loop. Example:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>		
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<div class="entry"><?php the_content(); ?></div>
	</div> 
<?php endwhile; ?>	

<div id="pagenavi" class="clearfix">
	<?php pagenavi(); ?>
</div> <!-- end div #pagenavi -->

And here is the example of CSS code, add the code in the style.css.

/* ---------------------------------------------------------------------
Page Navigation
--------------------------------------------------------------------- */ 

#pagenavi { margin: 20px 10px; }
.page-numbers { margin-right: 5px; padding: 5px 10px; text-decoration: none; background: #eee; color: #555; border: 1px solid #ddd; }
.page-numbers:hover { background: #fff; color: #111; border: 1px solid #ddd; }
.current, .current:hover { color: #555; background: #fff; border: 1px solid #ddd; }

Source:
WordPress Forums

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>