How To Pagination In WordPress

How To Pagination In WordPress

In this article we will show you how to add numeric pagination in your WordPress theme without plugin.

Step 1: Copy and paste this code in your theme’s function.php

You can read paginate_links to custom.

function hiwptut_pagination() {
	global $wp_query;
	$big = 999999999;
	echo paginate_links( array(
		'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
		'format' => '?paged=%#%',
		'prev_next'    => true,
		'prev_text'    => __('«'),
        'next_text'    => __('»'),
		'current' => max( 1, get_query_var('paged') ),
		'total' => $wp_query->max_num_pages )
	);
}

Step 2 : Add this in your templates

<div class="lists-blog clearfix">
	<div class="blogposts-wrapper clearfix"> 
		<?php  
			if (have_posts()) : while (have_posts()) : the_post(); 
				get_template_part( 'content', get_post_format() ); 
			endwhile;
		?>
	</div>				 
	<?php  else: ?>
		<h2 class="noposts"><?php _e('Sorry, no posts to display!', 'hiwptut'); ?></h2>
</div>
<?php endif;?>
<?php wp_reset_query();?>
<div class="pagination clearfix">
	<?php hiwptut_pagination();   ?>
</div>

Step 3: Copy and paste this in your theme’s styles.css

.pagination .current, .pagination a:hover {
    color: white;
    background: #161615!important;
    text-decoration: none;
}
.pagination .current, .pagination a, .page-numbers.dots {
    font-size: 0.875em;
    font-weight: 300;
    line-height: 35px;
    height: 35px;
    width: 35px;
    text-align: center;
    margin-right: 7px;
    display: block;
    float: left;
    color: white;
    background: #06AFE4;
}
.pagination .current, .pagination a:hover {
    color: white;
    background: #161615!important;
    text-decoration: none;
}

Result like this:
Capturef

Comments

comments

Share