snippets / pagination.php
A reusable pagination partial with simple controls.
<?php
$next_text = __( 'Next' , 'stardust' );
$prev_text = __( 'Prev', 'stardust' );
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$next_posts_link = get_next_posts_link( $next_text ) ?? false;
$prev_posts_link = get_previous_posts_link ( $prev_text ) ?? false;
?>
<nav class="pagination" aria-label="Pagination">
<div class="pagination__wrapper">
<?php if ( $paged === 1 ) : ?>
<span><?php echo get_next_posts_link( __( 'View more', 'stardust' ) ); ?></span>
<?php else : ?>
<?php if ( ! empty( $prev_posts_link ) ) : ?>
<span class="pagination__label">
<?php echo wp_kses_post( $prev_posts_link ); ?>
</span>
<?php else : ?>
<span class="pagination__label pagination__label--disabled">
<?php esc_html( $prev_text ); ?>
</span>
<?php endif; ?>
<?php if ( ! empty( $paged ) ) : ?>
<span class="pagination__label pagination__label--current" aria-current="page">
<?php esc_html_e( "Page {$paged}", 'stardust' ); ?>
</span>
<?php endif; ?>
<?php if ( ! empty( $next_posts_link ) ) : ?>
<span class="pagination__label">
<?php echo wp_kses_post( $next_posts_link ); ?>
</span>
<?php else : ?>
<span class="pagination__label pagination__label--disabled">
<?php esc_html( $next_text ); ?>
</span>
<?php endif; ?>
<?php endif; ?>
</div>
</nav>Context
Table of Contents
I recently needed a simplified pagination navigation for a WordPress site and ended up with this. Maybe I haven’t looked into it much, but the pagination solutions I’ve found in the past usually involved a plugin.
This is a plug and play type of thing which is always nice to have.
Usage
First, I’d drop the code snippet into a file called pagination.php inside of my template-parts folder. Then on any template where I’m using the loop, I can just drop this in with the following:
<?php get_template_part( 'template-parts/pagination' ); ?>Explanation
$next_text = __( 'Next' , 'stardust' );
$prev_text = __( 'Prev', 'stardust' );
$paged = get_query_var('paged') ?? 1;
$next_posts_link = get_next_posts_link( $next_text ) ?? false;
$prev_posts_link = get_previous_posts_link ( $prev_text ) ?? false;First we need to setup our variables for the partial. I defined the text for the previous and next pages. Next, I’m setting $paged to the value of get_query_var('paged'). If that value isn’t set, set the variable to 1. This informs our partial of what page we’re on.
Finally, I’m setting $next_posts_link to the value of get_next_posts_link( $next_text). This function finds out whether that link exists and returns it, otherwise we set the value to false. We repeat this step with $prev_posts_link with the corresponding function.
<?php if ( $paged === 1 ) : ?>
<span><?php echo get_next_posts_link( __( 'View more', 'stardust' ) ); ?></span>
<?php else : ?>This piece checks if we’re on the first page, and outputs a “View More” link if we are.
<?php if ( ! empty( $prev_posts_link ) ) : ?>
<span class="pagination__label">
<?php echo wp_kses_post( $prev_posts_link ); ?>
</span>
<?php else : ?>
<span class="pagination__label pagination__label--disabled">
<?php esc_html( $prev_text ); ?>
</span>
<?php endif; ?>A Quick Note About empty()
Here I’m using the empty() function from PHP to check whether the variable is set. According to the docs:
Determine whether a variable is considered to be empty. A variable is considered empty if it does not exist or if its value equals
false.
Since we set the variable to false if the value of get_next_posts_link( $next_text ) doesn’t exist, we can be confident this check will always work. If it does exist, we escape the output with the wp_kses_post() function. If not, we still output the $prev_text just without the link.
<?php if ( ! empty( $paged ) ) : ?>
<span class="pagination__label pagination__label--current" aria-current="page">
<?php esc_html_e( "Page {$paged}", 'stardust' ); ?>
</span>
<?php endif; ?>This next check is probably a bit much because this whole part of the template shouldn’t be showing if $paged is empty. But here we’re still checking if that variable isn’t empty, then we output the page number.
<?php if ( ! empty( $next_posts_link ) ) : ?>
<span class="pagination__label">
<?php echo wp_kses_post( $next_posts_link ); ?>
</span>
<?php else : ?>
<span class="pagination__label pagination__label--disabled">
<?php esc_html( $next_text ); ?>
</span>
<?php endif; ?>Finally this is the same check we did with the previous posts links. If there’s a link, we output it. If not, we output a label without the link.