0

How can I change the output display of my pagination? 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:

Pagination Screenshot - GOAL

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(
            'before_page_number' => '<div class="pagination"><span>Page '. $paged .' of ' . $term->max_num_pages . '</span></div>',
            '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 ),
            'prev_text' => __(''),
            'next_text' => __('')
        ) 
    );
?>

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!

  • Why don't you just use paginate_links()? You can add the "Page {x} of {y}" via custom code, and you can use mid_size and end_size to change/adjust the number of links displayed. – Sally CJ Oct 24 '18 at 14:40
  • @SallyCJ, hello and thank you for your response. I was not aware I could do that with the paginate_links() function. I'm still learning PHP and WordPress development. How would I go about adding the "Page {x} of {y}? – Peter Oct 24 '18 at 15:18
  • Hi Peter. I posted an answer. Check it out. :) – Sally CJ Oct 25 '18 at 1:02
1

I could see that you are trying to achieve the following output:

<div class="pagination">
  <span>Page {current} of {total pages}</span>
  {links here}
</div>

And you attempted it like so:

'before_page_number' => '<div class="pagination"><span>Page '. // wrapped for clarity
  $paged .' of ' . $term->max_num_pages . '</span></div>'

But that will actually add the markup before each and every page number in the generated links. (And the $term->max_num_pages is also a null because in that context, $term doesn't have a max_num_pages property.)

So here's how you could achieve the expected output:

$big = 999999999; // need an unlikely integer
$cur_page = max( 1, $paged );
$num_pages = ceil( $number_of_terms / $per_page );
$links = paginate_links(
    array(
        'base'    => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format'  => '/page/%#%',
        'current' => $cur_page,
        'total'   => $num_pages,
        'prev_text' => __(''),
        'next_text' => __('')
    )
);

// If there are links to paginate, display the pagination.
if ( $links ) {
    $before = '<span>Page '. $cur_page .' of ' . $num_pages . '</span>';
    echo '<div class="pagination">' . $before . ' ' . $links . '</div>';
}

See the paginate_links() reference for more details on that function, such as the mid_size and end_size parameters that control the number of pages/links to be displayed.

  • Thank you Sally. I will check this out tomorrow morning and get back to you. I appreciate the response! – Peter Oct 25 '18 at 2:43
  • This solution didn't end up working for me. I ended up solving for the pagination by declaring $totalterms and $totalpages variables and printf'ing them. I'll post the solution that worked for me. Thank you for your help. – Peter Oct 25 '18 at 13:57
  • Hi Peter. I'm not sure why the code doesn't work for you, but here's the full code I used (for testing). I did have the $cur_page and $max_num_pages which hold the current page and total number of pages respectively, and the $paged, $number_of_terms, and $per_page are defined earlier in your code. (I forgot to change the prev_text and next_text to '' in the answer, though that shouldn't cause the code to not working.) – Sally CJ Oct 25 '18 at 23:49
0

The following will loop through a custom taxonomy and pull all the associated terms.

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

    $per_page = 9;
    $totalterms   = wp_count_terms( 'series' ); 
    $totalpages   = ceil( $totalterms / $per_page );
    $paged_offset = ( $page > 0 ) ?  $per_page * ( $page - 1 ) : 1;

    $args = array(
        'orderby'       => 'ID', 
        'order'         => 'DSC',
        'hide_empty'    => true, 
        'exclude'       => array(), 
        'exclude_tree'  => array(), 
        'include'       => array(),
        'number'        => $per_page, 
        'fields'        => 'all', 
        'slug'          => '', 
        'parent'         => '',
        'hierarchical'  => true, 
        'child_of'      => 0, 
        'get'           => '', 
        'name__like'    => '',
        'pad_counts'    => false, 
        'offset'        => $paged_offset, 
        'search'        => '', 
        'cache_domain'  => 'core'
    );

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

    foreach($terms as $term){ ?>

        <div class="block_item article">
            <div class="block_item_overlay"></div>
            <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
    printf( '<div class="pagination"><span>Page '.$page.' of '.$totalpages.'</span>', 
        custom_page_navi( $totalpages, $page, 3, 0 ) 
    );

    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( $totalterms / $per_page ),
            'prev_next' => false
        ) 
    ); ?>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.