Hướng dẫn phân trang trong WordPress

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package ws247
 */
get_header();
?>
	<div id="primary" class="content-area">
		<main id="main" class="site-main">
		<?php if ( have_posts() ) : ?>
			<header class="page-header">
				<?php
				the_archive_title( '<h1 class="page-title">', '</h1>' );
				the_archive_description( '<div class="archive-description">', '</div>' );
				?>
			</header><!-- .page-header -->
			<?php
			/* Start the Loop */
			while ( have_posts() ) :
				the_post();
				/*
				 * Include the Post-Type-specific template for the content.
				 * If you want to override this in a child theme, then include a file
				 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
				 */
				get_template_part( 'template-parts/content', get_post_type() );
			endwhile;
			the_posts_navigation();
		else :
			get_template_part( 'template-parts/content', 'none' );
		endif;
		?>
		</main><!-- #main -->
	</div><!-- #primary -->
<?php
get_footer();

function get_the_posts_navigation( $args = array() ) {
    $navigation = '';
 
    // Don't print empty markup if there's only one page.
    if ( $GLOBALS['wp_query']->max_num_pages > 1 ) {
        $args = wp_parse_args(
            $args,
            array(
                'prev_text'          => __( 'Older posts' ),
                'next_text'          => __( 'Newer posts' ),
                'screen_reader_text' => __( 'Posts navigation' ),
            )
        );
 
        $next_link = get_previous_posts_link( $args['next_text'] );
        $prev_link = get_next_posts_link( $args['prev_text'] );
 
        if ( $prev_link ) {
            $navigation .= '<div class="nav-previous">' . $prev_link . '</div>';
        }
 
        if ( $next_link ) {
            $navigation .= '<div class="nav-next">' . $next_link . '</div>';
        }
 
        $navigation = _navigation_markup( $navigation, 'posts-navigation', $args['screen_reader_text'] );
    }
 
    return $navigation;
}

function giniit_pagination() {
    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="pagination"><ul class="list-unstyled">' . "\n";
    /** Previous Post Link */
    if ( get_previous_posts_link() )
      printf( '<li>%s</li>' . "\n", get_previous_posts_link( __( '<i class="fa fa-chevron-left" aria-hidden="true"></i>', 'giniit' ) ) );
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></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><a href="%s">%s</a></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><a href="%s">%s</a></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( __( '<i class="fa fa-chevron-right" aria-hidden="true"></i>', 'giniit' ) ) );
    echo '</ul></div>' . "\n";
}

.pagination {
	text-align: center;
	padding: 15px 0 45px;
}
.list-unstyled {
	padding-left: 0;
	list-style: none;
}
.pagination ul li {
	display: inline-block;
}
.pagination ul li:not(:last-child){
	margin-right: 5px;
}
.pagination ul li a {
	background: #f8f8f8;
	display: block;
	color: #555;
	cursor: pointer;
	font-size: 15px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.pagination ul li.active a,.pagination ul li:hover a {
	background: #EB2B2D;
	color: #FEFEFE!important;
}

<?php giniit_pagination() ?>

<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$query = new WP_Query( array(
	'post_type' => 'post',
	'posts_per_page' => 6,
	'paged' => $paged
) );
if ( $query->have_posts() ) :
	while ( $query->have_posts() ) : $query->the_post(); 
		get_template_part( 'template-parts/content', get_post_type() ); 
	endwhile; 
	?>
	<div class="giniit-pagination">
		<ul class="pagination">
			<?php 
			echo paginate_links( array(
				'base'         => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
				'total'        => $query->max_num_pages,
				'current'      => max( 1, get_query_var( 'paged' ) ),
				'format'       => '?paged=%#%',
				'show_all'     => false,
				'type'         => 'post',
				'end_size'     => 2,
				'mid_size'     => 1,
				'prev_next'    => true,
				'prev_text'    => sprintf( '<i></i> %1$s', __( '«', 'giniit' ) ),
				'next_text'    => sprintf( '%1$s <i></i>', __( '»', 'giniit' ) ),
				'add_args'     => false,
				'add_fragment' => '',
			) );
			?>
		</ul>
	</div> 
	<?php
endif;
?>

.giniit-pagination {
margin-top: 30px;
text-align: right; 
}
.giniit-pagination ul span,.giniit-pagination ul a{
display: inline-block; 
font-size: 14px;
color: #666666;
text-align: center;
border: 1px solid #ccc;
padding: 10px 10px;
transition: all .3s;
}
.giniit-pagination ul a:hover,.giniit-pagination ul span {
color: #fff;
background-color: #ae1c3f; 
}