Plugin Review: WP-PageNavi

When you click the All Articles link in our menu, you'll see the WP-PageNavi plug-in in action (displayed at the top and bottom of the post excerpt blocks). By default, most themes simply display links for Older Entries and Newer Entries at the bottom of these type pages.

WP-PageNavi provides an excellent technique for user-friendly navigation with a list of the page numbers for posts. This enables the visitor to navigate their way through your blog with relative ease (not having to click through post after post to get to the article they're looking for).

With nearly 1.5 million downloads and a 4-star plus rating, you can rest assured that this plugin is well tested in many blogs. You install just like any standard plugin. And, you can customize some features and text from the Dashboard (Settings -> PageNavi).

Plus, you can customize the CSS for the component. To do this, you simply copy the plugin's pagenavi-css.css file into your theme's folder and implement your style preferences.

The basic CSS file actually offers very little in the way of styling … and very little explanation. This may be the reason it doesn't have a full 5-star rating by downloaders.

Below is our own customized style sheet which maxes out the possibilities with this quite useful addition to any blog. Modifying this example, you should be able to get it to look just the way you want it.

Code: CSScustomized pagenavi-css.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

/*
Customized style for WP-PageNavi plugin
http://wordpress.org/extend/plugins/wp-pagenavi/
*/
 
.wp-pagenavi
{
    clear: both;
    font-size: 12px;
    font-variant: small-caps;
}
 
.wp-pagenavi a, .wp-pagenavi span
{
    text-decoration: none;
    padding: 3px 5px;
    margin: 2px;
    color: #143855;
    background: #F0F0F0;
    border: 1px solid #E0E0E0;
 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
 
    /*-moz-box-shadow: 1px 1px 2px #808080;*/
    /*-webkit-box-shadow: 1px 1px 2px #808080;*/
    /*box-shadow: 1px 1px 2px #808080;*/
}
 
.wp-pagenavi span
{
    color: #404040;
}
 
.wp-pagenavi a:hover, .wp-pagenavi span.current
{
    color: #FFFFFF;
    text-decoration: none;
    background: #143855;
}
 
.wp-pagenavi span.current
{
    font-weight: bold;
    font-size: 14px;
    color: #404040;
    background: #F0F0F0;
    border: 1px solid #B0B0B0;
}

Finally, you can visit the author's (Lester Chan) own blog here.

Print PDF

Share This Article: “Plugin Review: WP-PageNavi”

(Also Available: Press CTRL+D to Bookmark this Page)