How to customize WP PageNavi, the best pagination plugin for WordPress blog

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Pagination is the system at the bottom of a WordPress blog that allows visitors to navigate across different entries/pages. Here is how the default pagination in WordPress looks like,

default wordpress pagination

When website owners are ready to spend on getting fancy WordPress theme for their blog, they would defintely like to have a better pagination than what’s provided by WordPress as default.

Many plugins are available for use but very few are worth using. WP PageNavi is probably the most used pagination plugin for WordPress with over 2.7 million downloads till date. Its authors issue regular updates according to the latest WordPress releases. Also, a number of new features are added with time.

The plugin shows numbered links to different pages. The WP PageNavi plugin is fully customizable to match the blog design. The number of pages to show can also be changed easily.

Add PageNavi to WordPress blog

1. Download the plugin, unzip it and upload to ‘Plugin’ folder of your WordPress installation.

2. Activate the plugin from your WP Dashboard under ‘Plugins’ section.

3. Now goto your WordPress theme and delete the following line of codes. In TwentyTen theme, the LOC are as follows,

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">
&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">
&rarr;</span>', 'twentyten' ) ); ?></div>

Paste the following instead,

<?php wp_pagenavi(); ?>

4. All done! Check your blog now and see WP PageNavi in action.

wp pagenavi plugin

5. To modify settings, go to WP-Admin -> Settings -> PageNavi.

Steps for Customization

By default, WP PageNavi includes a default CSS file. You can also do manual customization to match the plugin appearance according to your blog’s design.

Before we customize, lets see the HTML code when the plugin runs,

<div class='wp_pagenavi'>
<span class='pages'>1 of 100</a>
<span class='current'>1</span>
<a href='' class='page larger'>2</a>
<a href='' class='page larger'>3</a>
<a href='' class='page larger'>4</a>
<a href='' class='page larger'>5</a>
.
.
.
<a href='' class='page larger'></a>
</div>

1. In the first <span class='pages'></span> we show up the total number of pages in the blog, or in a particular tag or category.

2. Second <span class='current'></span> includes the page number that’s currently active. Since we’re on 1st page, its on 1. As we move to 2, 3, 4… page numbers, it’ll shift to those. The code would subsequently become <span class='current'>2</span>, <span class='current'>3</span>, <span class='current'>4</span> and so on.

3. Other page numbers are under simple anchor tag <a href='' class='page larger'></a>.

Now we manually style the code as follows (rounded radius and lighter-radius color),

<style>
.wp-pagenavi span, .wp-pagenavi a
{
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border:1px solid #F3FAFB;
}

.wp-pagenavi span:hover, .wp-pagenavi a:hover, .wp-pagenavi span.current
{
background:#f3fafb;
border:1px solid #F3FAFB;
}
</style>

wp pagenavi plugin in action

Its important to add the CSS code in the footer section [footer.php] to esnure it overrides the default CSS by WP PageNavi plugin.

blog comments powered by Disqus