The function

Paste this function code in your theme functions.php file:

if ( ! function_exists( 'post_pagination' ) ) :
   function post_pagination() {
     global $wp_query;
     $pager = 999999999; // need an unlikely integer
 
        echo paginate_links( array(
             'base' => str_replace( $pager, '%#%', esc_url( get_pagenum_link( $pager ) ) ),
             'format' => '?paged=%#%',
             'current' => max( 1, get_query_var('paged') ),
             'total' => $wp_query->max_num_pages
        ) );
   }
endif;

 

Template Code

<div class='pagination'>
<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 
query_posts(array(
    'post_type' => 'post', // You can add a custom post type if you like
    'paged' => $paged,
    'posts_per_page' => 4 // limit of posts
));

if ( have_posts() ) :  while ( have_posts() ) : the_post(); 
     // post content goes here...
   echo the_title();
 endwhile;
    post_pagination();
 else : 
// no posts found message goes here...
 endif;
 ?>
</div>

 

The CSS

The CSS Part of our pagination is rather simple. By default we would get an HTML output similar to this:

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}

.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}

.pagination a:hover{
color:#fff;
background: #3279BB;
}

.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}