Changing pagination list class

5 comments

1. paginate_links() doesn’t offer a parameter and there are no hooks – see source – available to change the class(es). Which means you can do it like you have done it or you create your own pagination function based on paginate_links().

2. I was also searching for the same solution to use it with bootstrap pagination links,

   the below code is working 100% in my theme.

   function bittersweet_pagination() {
   
   global $wp_query;
   
   if ( $wp_query->max_num_pages <= 1 ) return; 
   
   $big = 999999999; // need an unlikely integer
   
   $pages = paginate_links( array(
           'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
           'format' => '?paged=%#%',
           'current' => max( 1, get_query_var('paged') ),
           'total' => $wp_query->max_num_pages,
           'type'  => 'array',
       ) );
       if( is_array( $pages ) ) {
           $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
           echo '<div class="pagination-wrap"><ul class="pagination">';
           foreach ( $pages as $page ) {
                   echo "<li>$page</li>";
           }
          echo '</ul></div>';
           }
   }
   

   use the function to call in index.php e.g; <?php bittersweet_pagination(); ?> or any other file. I also overwrite some bootstrap styling it might help you.

   .pagination-wrap {
       clear: both;
       display: block;
       overflow: hidden;
       text-align: center;
   }
   .pagination-wrap .pagination {
       margin-bottom: 0;
       margin-top: 0;
   }
   .pagination-wrap .pagination > li:first-child > a, 
   .pagination-wrap .pagination > li:first-child > span {
       border-bottom-left-radius: 0px;
       border-top-left-radius: 0px;
   }
   .pagination-wrap .pagination > li:last-child > a, 
   .pagination-wrap .pagination > li:last-child > span {
       border-bottom-right-radius: 0px;
       border-top-right-radius: 0px;
   }
   .pagination-wrap .pagination > li > a,
   .pagination-wrap .pagination > li > span {
       background-color: #4FBEBA;
       border: 1px solid #1BA5A0;
       padding: 10px 15px;
       font-weight: bold;
       color: #FFFFFF;
   }
   .pagination-wrap .pagination > li > a:hover, 
   .pagination-wrap .pagination > li > span:hover, 
   .pagination-wrap .pagination > li > a:focus, 
   .pagination-wrap .pagination > li > span:focus {
       background-color: #1BA5A0;
       border-color: #189690;
   }
   .pagination-wrap .pagination .current {
       background-color: #1BA5A0;
       border-color: #189690;
   }
   .pagination-wrap .pagination .current:hover,
   .pagination-wrap .pagination .current span:hover {
       background-color: #189690;
       border-color: #148781;
   }
   

3. for this you need to use type parameter

   $links = paginate_links( array(
       'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
       'format' => '?paged=%#%',
       'current' => max( 1, get_query_var('paged') ),
       'total' => $posts_array->max_num_pages,
       'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
       'next_text'          => __( 'Next page', 'twentyfifteen' ),
       'type' => 'list'
   ) );
      echo $links
   

4. Another option not noted here is to copy the styles over to the WordPress pagination classes, instead of changing the class assigned to the element.

   If you are using Bootstrap and bundling everything with sass, then you can apply the styles easily using the @extend directive.

   ul.page-numbers {
       @extend .pagination;
       > li {
           > a, > span {
               &.page-numbers {
                   @extend .page-link
                   &:focus, :hover {
                       /* Additional hover/focus styles here */
                   }
               }
           }
       }
   }
   

   This may be pertinent to some situations, but I feel the code in the original question is the best solution for most applications.

5. If you want to just string replace your way to the bootstrap promised land then heres something that may help you.

   function bootstrap_pagination()
   {
       global $wp_query;
       $big = 999999999;
       $listString = paginate_links(array(
           'base' => str_replace($big, '%#%', get_pagenum_link($big)),
           'format' => '?paged=%#%',
           'current' => max(1, get_query_var('paged')),
           'total' => $wp_query->max_num_pages,
           'prev_text'    => __('← Previous'),
           'next_text'    => __('Next  →'),
           'type'  => 'list',
   
       ));
       
       $listString = str_replace("<ul class='page-numbers'>", '<ul class="pagination">', $listString);
       $listString = str_replace('page-numbers', 'page-link', $listString);
       $listString = str_replace('<li>', '<li class="page-item">', $listString);
       $listString = str_replace(
           '<li class="page-item"><span aria-current="page" class="page-link current">',
           '<li class="page-item active"><span aria-current="page" class="page-link">',
           $listString
       );
   
   
       echo $listString;
   
   }
   

Comments are closed.