How to: Style WP-Pagenavi

by | Tips & Tricks

Below is an extract from our ‘Tips & Tricks‘ page.

WP Pagenavi is an established and reputable plugin that turn the standard older entries/next entries into something far more eye-pleasing and useful. The default settings of Pagenavi are pretty good, but if you want to add your own styles to it to match your sites design then Pagenavi lends itself well to this

Below are a list of Pagenavis CSS selectors that you can use in your child style.css file

  • .wp-pagenavi a.page – Targets page numbers specifically
  • .wp-pagenavi a.first – Targets the “first” link specifically (not listed above)
  • .wp-pagenavi a.last – Targets the “last” link specifically
  • .wp-pagenavi span – Targets the current page number along with the extend part (the thing with three dots)
  • .wp-pagenavi span.current – Specifically targets the current page number
  • .wp-pagenavi span.extend – Specifically targets the extend (three dots thing)
  • .wp-pagenavi span.pages – Specifically targets page number display (i.e. Page 1 of 4)
  • .wp-pagenavi a.previouspostslink – Specifically targets the previous link
  • .wp-pagenavi a.nextpostslink – Specifically targets the next link

Example:

So here is what the default Divi page navigation looks like:

How to: Style WP-Pagenavi

And here is what it looks like using Pagenavi and the above CSS:

How to: Style WP-Pagenavi

Signup for the iConnik quarterly newsletter

Thanks. You have successfully signed up

Share This