Displaying Pagination in posts in new theme - wordpress

Question

I am developing Custom Theme and I want to display pagination in blog page.
Here's the wp_query:
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'posts_per_page' => 2,
'paged' => $paged
);
$the_query = new WP_Query( $args );
while ($the_query -> have_posts()) : $the_query -> the_post();
?>
The Code to display Title and Excerpt: and endwhile loop
<div class="titleline"><h2><?php the_title(); ?></h2></div>
<li><?php the_excerpt(__('(more…)')); ?></li>
<?php
endwhile;
wp_reset_postdata();
?>
And the Pagination Starts Here:
<div class="alignleft"><?php previous_posts_link('« Previous') ?></div>
<div class="alignright"><?php next_posts_link('More »') ?></div>
Am I missing anything here? Any suggestion will be appreciated..

Answer 1

Put this code in your template file
<?php
global $query_string;
query_posts($query_string . "post_type=post&post_status=publish&posts_per_page=2");
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h4><?php the_title(); ?></h4>
<h5>Posted By : <?php the_author(); ?> | Date : <?php echo the_date('d-m-y'); ?></h5>
<p><?php the_excerpt(); ?></p>
<?php endwhile;
endif; ?>
<?php pagination_numeric_posts_nav(); ?>
<?php wp_reset_query(); ?>
And put this function in functions.php file of theme
function pagination_numeric_posts_nav() {
if( is_singular() )
return;
global $wp_query;
/** Stop execution if there's only 1 page */
if( $wp_query->max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $wp_query->max_num_pages );
/** Add current page to the array */
if ( $paged >= 1 )
$links[] = $paged;
/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}
echo '<div class=""><ul class="pagination">' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s>%s</li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
if ( ! in_array( 2, $links ) )
echo '<li>…</li>';
}
/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="active"' : '';
printf( '<li%s>%s</li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}
/** Link to last page, plus ellipses if necessary */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $max - 1, $links ) )
echo '<li>…</li>' . "\n";
$class = $paged == $max ? ' class="active"' : '';
printf( '<li%s>%s</li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
echo '</ul></div>' . "\n";
}
add this css in your style.css file
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
color: #fff;
text-decoration:none;
}
.navigation li {
display: inline;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
background-color: #6FB7E9;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}
.navigation li a:hover,
.navigation li.active a {
background-color: #3C8DC5;
}
And check your reading setting
Change query_posts parameter if your blog page is not your static front page
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page'=>2,'paged'=>$paged);
query_posts($args);