WebMinimalist.com

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