Pagination function
Create a file named pagination.php in yout child theme and include it in your functions.php
<?php // numbered pagination function pagination($pages = '', $range = 4) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $the_query; $pages = $the_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class=\"archive-pagination pagination\">"; echo "<ul>"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'> <span class='double-chevron-wrapper'> <i class='fas fa-chevron-left first'></i> <i class='fas fa-chevron-left second'></i> </span> </a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'> <i class='fas fa-chevron-left prev'></i></a>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<li><span class=\"current\">".$i."</span></li>":"<li><a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a></li>"; } } if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\"><i class='fas fa-chevron-right next'></i></a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'> <span class='double-chevron-wrapper'> <i class='fas fa-chevron-right first'></i> <i class='fas fa-chevron-right second'></i> </span> </a>"; echo "</ul>\n"; echo "</div>\n"; echo "<div class='all_pages'><small>Current page: ".$paged." All pages ".$pages."</small></div>"; } }
?>
Create the WordPress Loop
Add the name of your terms
Set the posts_per_page value in the args
<?php wp_reset_postdata(); $terms_name = 'YOUR_TERMS_NAME'; $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'post_type' => 'YOUR_POST_TYPE', 'posts_per_page' => 2, 'paged' => $paged, 'tax_query' => array( array( 'taxonomy' => 'YOUR_TAXONOMY', 'field' => 'slug', 'terms' => $terms_name ), ), ); $the_query = new WP_Query( $args ); ?> <!--YOUT CUSTOM CONTENT--> <h2><?php the_title(); ?></h2> <?php echo pagination($the_query->max_num_pages); ?>
Add some line of CSS
.archive-pagination.pagination li { margin-left: 0 !important; margin-right: 10px !important; } .current { padding: 0.9rem 1.2rem; background: #124e84; color: white; }
Leave a Reply