Dhaval Prajapati
Dhaval Prajapati

Web Developer

Freelancer

Blogger

Web Designer

Full Stack Developer

Dhaval Prajapati

Web Developer

Freelancer

Blogger

Web Designer

Full Stack Developer

Blog Post

WordPress Pagination Without Plugin

August 31, 2020 wordpress | jQuery
Creativity Is More Than

looking for a way to create manual pagination without plugin? While there’s probably a plugin for this, we have created a quick code snippet that you can use to create a classic paging navigation and control the output of your content in WordPress.

  • This code to your theme’s functions.php
function pagination($prev = '«', $next = '»') {
    global $wp_query, $wp_rewrite;
    $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
    $pagination = array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '',
        'total' => $wp_query->max_num_pages,
        'current' => $current,
        'prev_text' => __($prev),
        'next_text' => __($next),
        'type' => 'plain'
);
    if( $wp_rewrite->using_permalinks() )
        $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
 
    if( !empty($wp_query->query_vars['s']) )
        $pagination['add_args'] = array( 's' => get_query_var( 's' ) );
 
    echo paginate_links( $pagination );
};
  • Optionally, use this code for the $pagination array to display a different look:
$pagination = array(
  'base' => @add_query_arg('paged','%#%'),
  'format' => '',
  'total' => $wp_query->max_num_pages,
  'current' => $current,
  'prev_text' => __('« Previous'),
  'next_text' => __('Next »'),
  'end_size' => 1,
  'mid_size' => 2,
  'show_all' => true,
  'type' => 'list'
);

  • Next you can add the pagination using the pagination(). function. You can add it somewhere outside the loop, but inside the if( have_post() ) statement of your template file.
<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        // post goes here
    <?php endwhile; ?>
 
    <div class="pagination"><?php pagination('»', '«'); ?></div>
 
<?php endif; ?>
  • WordPress also enables you to add custom CSS classes that you can use to manage the look of your new navigation. See this CSS example to figure out how to style it:
.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers  { font-size: 14px; color: #3888ff; }
Taggs:
Open chat
Contact

Notice: Undefined property: WP_Error::$term_id in /var/www/html/wp-content/themes/mytheme/footer.php on line 78