Adding Better WordPress Pagination With WP-PageNavi

By . in WordPress. Updated on .

Default WordPress pagination works, but it is not always the clearest way to help readers move through archives.

Simple Previous and Next links are fine on smaller sites. Once a blog has a deeper archive, numbered pagination usually makes navigation easier because readers can see where they are instead of clicking blindly through older posts.

One plugin that still does this well is WP-PageNavi, which is still maintained on WordPress.org and still provides the wp_pagenavi() template tag for replacing basic archive navigation, alongside other WordPress plugins that keep sites simple and useful.

Default WordPress Pagination

Image

A standard WordPress theme often shows only simple archive navigation. That is acceptable for lighter sites, but it gets less helpful as content grows. Once custom loops or archive logic get involved, customize your WordPress query becomes just as useful as styling the pagination itself.

WP-PageNavi Pagination

Image

WP-PageNavi replaces the plain previous/next pattern with a more structured numbered pagination layout.

Installing and Using WP-PageNavi

  1. Download WP-PageNavi from its official WordPress.org plugin page.
  2. Install and activate the plugin in WordPress.
  3. In the theme, locate the existing next_posts_link() and previous_posts_link() calls.
  4. Replace those calls with:
    <?php wp_pagenavi(); ?>
  1. For multipart pages, replace wp_link_pages() with:
    <?php wp_pagenavi( array( 'type' => 'multipart' ) ); ?>
  1. Configure the plugin under WP-Admin -> Settings -> PageNavi.

Most sites place pagination at the bottom of archive pages, though some themes also show it near the top.

Editing Pagination Styles

WP-PageNavi’s official documentation suggests two safer ways to customize the styling:

  • copy pagenavi-css.css from the plugin folder into your theme and edit it there, or
  • disable the bundled stylesheet and add the styles directly to your theme’s style.css

That is better than editing the plugin’s stylesheet directly and losing changes on update.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail