How can I chance the output display of my pagination?

Pagination Screenshot - GOAL

I have been trying for the past few hours to format the output of my pagination links (1,2,3, etc.) to resemble the below:

I have been unable to modify the code to get it even close to this. Could someone please point me in the right direction of what I need to be doing?

Here is my code:

<?php
    if ( get_query_var( 'paged' ) ) {
        $paged = get_query_var('paged');
    }elseif( get_query_var( 'page' ) ) {
        $paged = get_query_var( 'page' );
    }else{
        $paged = 1;
    }

    $per_page = 3;
    $number_of_terms = wp_count_terms( 'series' ); // This counts the total number terms in the taxonomy with a function)
    $paged_offset = ($paged - 1) * $per_page;

    $args = array(
        'orderby'           => 'ID',
        'order'             => 'DESC',
        'hide_empty'        => 0,
        'number'            => $per_page,
        'offset'            => $paged_offset
    );  

    $terms = get_terms('series', $args);  

    foreach($terms as $term){ ?>

        <div class="block_item article">
            <div  class="article_image" style="background: url('<?php the_field('series_artwork', $term); ?>'); background-size: cover; background-position: 50%;"></div>
            <h4 class="section_label"><?php the_field('date', $term); ?></h4>
            <div class="block_item_content">
                <h3><?php echo $term->name; ?></h3>
                <p><?php echo $term->description; ?></p>
                <a href="<?php echo get_term_link($term->slug, 'series'); ?>" class="button_styling">
                    Read More
                </a>
            </div>
        </div>

    <?php } 

    $big = 999999999; // need an unlikely integer
    echo paginate_links( 
        array(
            'base'    => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
            'format'  => '/page/%#%',
            'current' => max( 1, get_query_var('paged') ),
            'total'   => ceil( $number_of_terms / $per_page )
        ) 
    );
?>

If you can get it to work with my existing function (something I have been trying to do) then bonus points to you!

functions.php

// numbered pagination
function pagination($pages = '', $range = 4)
{  
 $showitems = ($range * 2)+1;  

 global $paged;
 if(empty($paged)) $paged = 1;

 if($pages == '')
 {
     global $wp_query;
     $pages = $wp_query->max_num_pages;
     if(!$pages)
     {
         $pages = 1;
     }
 }   

 if(1 != $pages)
 {
     echo "<div class="pagination"><span>Page ".$paged." of ".$pages."</span>";
     if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
     if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

     for ($i=1; $i <= $pages; $i++)
     {
         if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
         {
             echo ($paged == $i)? "<span class="current">".$i."</span>":"<a href='".get_pagenum_link($i)."' class="inactive">".$i."</a>";
         }
     }

     if ($paged < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($paged + 1)."">Next &rsaquo;</a>";  
     if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
     echo "</div>n";
 }
}

Function Call

<?php if (function_exists("pagination")) {
     pagination($terms->max_num_pages);
} ?>

Thank you for any help that can be provided!

Read more here:: How can I chance the output display of my pagination?

Leave a Reply

Your email address will not be published. Required fields are marked *