Get the Official WPSaviour App Now!


Guide to Styling the WP-PageNavi WordPress Plugin

In case you’re not accustomed to the WP-PageNavi WordPress plugin, it permits you to change regular earlier/subsequent navigation with a extra superior, numbered paging navigation. This can be a function I’ve included on a quantity themes I’ve developed, together with RS16, Blogwave, RS17, and Vibrant Spot.

RS16 PageNavi

On this tutorial, I’m going to go over methods to:

  • Set up WP-PageNavi and correctly combine it in your theme.
  • Two strategies to disable and/or override default plugin kinds.
  • An outline of the HTML markup output by WP-PageNavi
  • Lastly, methods to alter the look of your web page navigation by way of CSS

Set up the Plugin

You’ve gotten two choices relating to putting in the WP-PageNavi plugin.

  • Obtain it from, add it to your /wp-content/plugins/ listing, and activate (aka, the quaint method).
  • Relying in your host, it’s also possible to mechanically set up plugins by looking out them in “Add New” web page below Plugins in your WordPress admin panel. Simply seek for “pagenavi” and it is best to discover it.

Okay, that ought to’ve been fairly straightforward. Now it’s time to get your arms just a little soiled in code for the combination half.

Theme Integration

In our theme integration, we by no means need any errors to be displayed if the WP-PageNavi isn’t lively. As a substitute, we’ll be certain it falls again on the outdated earlier/next-style navigation. To do that, we’ll use a function_exists conditional test.

Let’s say that is your regular earlier/subsequent WordPress navigation code:

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>

We are going to change it to the next:

<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div><?php } ?>

This principally checks to see if WP-PageNavi is lively and whether it is, it shows the brand new web page navigation code. If not, it gracefully falls again to the traditional earlier/subsequent navigation.

Please Notice: Relying on how your CSS is coded, chances are you’ll wish to put the wp_pagenavi(); half contained in the “navigation” (or equal) div. Take into account WP-PageNavi spits out a brand new class known as “wp-pagenavi” although which we are able to use to fashion individually.

Override Plugin Kinds

By default, WP-PageNavi mechanically inserts a CSS file known as pagenavi-css.css from its plugin listing into the header of your web site. We don’t need these default kinds to intervene with our personal cool custom-made kinds, so we’ll fully eliminate them, and there are two easy methods to just do that.

  • Add a CSS file to your theme listing – That is in all probability the best approach to override the default WP-PageNavi kinds. When you have a file known as pagenavi-css.css in your theme listing, WP-PageNavi will use this as an alternative of the default one within the plugin listing.
  • Add a snippet to your features.php file – The next code snippet I picked up from WP Recipes will fully disable the above habits and never embrace any stylesheet from the plugin (both the default one or an override in your theme listing).
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

perform my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );

Simply plop that code in your theme’s features.php file and add the CSS kinds to your common theme’s stylesheet (normally fashion.css).

Notice: Be sure the code is surrounded by brackets like <?php ... ?> in case your features file is presently empty.

WP-PageNavi HTML Markup and CSS Selectors

Right here’s what the WP-PageNavi markup appears to be like like. Within the following instance, there are 4 pages, presently on web page two.

<div class="wp-pagenavi">
	<a href="" >Earlier</a><a href="" class="web page" title="1">1</a>
	<span class="present">2</span>
	<a href="" class="web page" title="3">3</a>
	<a href="" >Subsequent</a></div>
	<span class="prolong">...</span>
	<a href="" class="final" title="Final &raquo;">Final &raquo;</a>

We will use the next CSS selectors to focus on the above HTML markup:

  • .wp-pagenavi – Applies to the whole div, helpful for CSS clears, padding/margin, font sizes and kinds (daring, italic, and so on.)
  • .wp-pagenavi a – Targets all hyperlinks contained in the web page navigation, together with web page numbers and former/subsequent.
  • .wp-pagenavi a.web page – Targets web page numbers particularly
  • .wp-pagenavi a.first – Targets the “first” hyperlink particularly (not listed above)
  • .wp-pagenavi – Targets the “final” hyperlink particularly
  • .wp-pagenavi span – Targets the present web page quantity together with the prolong half (the factor with three dots)
  • .wp-pagenavi span.present – Particularly targets the present web page quantity
  • .wp-pagenavi span.prolong – Particularly targets the prolong (three dots factor)
  • .wp-pagenavi span.pages – Particularly targets web page quantity show (i.e. Web page 1 of 4)

Notice: The earlier and subsequent hyperlinks by default, don’t have any CSS class on them. If you would like them to fully differentiated from the web page numbers and first/final hyperlinks, these might want to reset any kinds added to the .wp-pagenavi a selector. If that made no sense, check out the next (actually simplified) instance.

For instance: Let’s say you needed the the earlier and subsequent hyperlinks to be daring, however each different hyperlink to have a traditional weight. You would want to do the next:

.wp-pagenavi a { font-weight: daring; } /* Earlier and Subsequent hyperlinks solely */
.wp-pagenavi a.web page,
.wp-pagenavi a.first,
.wp-pagenavi { font-weight: regular; } /* Different hyperlinks */

I mixed web page quantity hyperlinks, the primary hyperlink, and the final hyperlink into one rule for instance functions. After all, you may separate them and add extra particular kinds to every one.

This might be a lot simpler if there was a category added to earlier/subsequent hyperlinks by default, however there’s not. It’s not an enormous deal as you may simply reset them anyway.

Necessary Replace: Due to an replace from scribu within the feedback, it seems the latest model of WP-PageNavi does have earlier/subsequent courses on them (thanks partially to Yoast).

You should utilize .wp-pagenavi a.previouspostslink and .wp-pagenavi a.nextpostslink to pick out earlier and subsequent hyperlinks, respectively.

So just about the whole lot above up till the unordered record of selectors isn’t related anymore, however I’ll hold it simply because it may very well be a helpful lesson in overriding CSS in another conditions. The beneath CSS instance will nonetheless apply as I didn’t use these selectors anyway.

A CSS Instance

Right here’s an instance of a PageNavi styling which I constructed off of the Blogwave theme.

Blogwave Updated PageNavi

Right here’s the code I used to get this look, multi-single-line CSS is non-obligatory:

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; shade: #03719c; text-decoration: none;
	border: 3px stable #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
.wp-pagenavi a:hover, .wp-pagenavi span.present {
	background: #03719c;
	shade: #fff;
	border: 3px stable #AFAFAF;
.wp-pagenavi span.present { font-weight: daring; }

And right here’s what all of it means:

First Rule
The .wp-pagenavi a, .wp-pagenavi span selects all anchor and span parts (just about the whole lot) contained in the .wp-pagenavi div.

  • The primary line of the rule units a padding of 5px so it received’t be crammed up towards the sunshine grey border (outlined beneath). It additionally units a constant margin of 10px to the fitting of every factor so there may be equal spacing between every.
  • The second line units a font measurement of 15px, makes the textual content shade blue, and makes certain hyperlinks don’t have any underline.
  • The third line units a stable 3px grey border on the whole lot. The border-radius code makes the corners rounded.

Second Rule
The .wp-pagenavi a:hover, .wp-pagenavi span.present selects the hyperlink hover impact in addition to the present web page quantity, respectively.

  • The primary line units a darkish blue background shade.
  • The second line makes the textual content white.
  • The third line provides a barely darker border.

Third Rule
This selects the present web page quantity (once more) with out affecting the hyperlink hover impact as nicely (just like the second rule). This simply makes the present web page quantity a daring font weight.

The rationale I didn’t embrace it with the hyperlink hover impact is as a result of it has an uneven impact going from regular to daring font weight.

Notice: Relying on how your CSS is coded, you might have to make use of extra particular selectors. For instance, if there are kinds for #content material a and your WP-PageNavi is contained in the content material div, you might have to rewrite your PageNavi CSS as #content material .wp-pagenavi a and override another less-specific kinds.

Download The WPSaviour App Now

Related posts
Beginner’s GuideBlogShowcase

7 Best Shopify Alternatives in 2020 (Cheaper and More Powerful)

Beginner’s GuideBest WordPress PluginsBlog

14 Best AI Chatbots Software for Your Website (Comparison)

Beginner’s GuideBlogTips

Magento vs WooCommerce – Which one is Better? (Comparison)

Beginner’s GuideBlogTips

12 Best Calculator Plugins for Your WordPress Site

Sign up for our Newsletter and
stay informed

Leave a Reply

Your email address will not be published.

Fear Of Missing Out?

Sign up with your email address to receive WordPress tips and updates
Terms and Conditions apply
Click Me