WP-PageNavi WordPress Plugin Style Guide
Posted: Sun Dec 22, 2024 9:40 am
If you are not familiar with the WP-PageNavi WordPress plugin, it allows you to replace the normal previous/next navigation with a more advanced numbered pagination navigation.
wp page navigation
In this tutorial, we're going to go over how to:
Install WP-PageNavi and integrate it properly into your theme.
Two methods to disable and/or override the plugin's default styles.
An overview of HTML markup output by WP-PageNavi.
Finally, how to alter the look of your navigation page via CSS
Install the plugin
You have two options when installing the WP-PageNavi plugin.
Download it from WordPress.org , upload it to russian virtual mobile number your directory /wp-content/plugins/and activate it (the old fashioned way).
Depending on your host, you may also be able to install plugins automatically by searching for them on the “Add New” page under Plugins in your WordPress admin panel. Search for “pagenavi” and you should find it.
Okay, that should have been pretty easy. Now it's time to get your hands a little dirty in code for the integration part.
Integration of themes
In our theme integration, we never want any error to be displayed if WP-PageNavi is not active. Instead, we will make sure that it reverts to the old style of previous/next navigation. To do this, we will use a function_exists conditional check.
Let's say this is your normal WordPress previous/next navigation code:
1
2
3
4
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
We will change it to the following:
1
2
3
4
<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div><?php } ?>
This basically checks if WP-PageNavi is active and if it is, it displays the new page navigation code. If not, it falls back to the normal previous/next navigation.
Note: Depending on how your CSS is coded, you may want to put the part wp_pagenavi();inside the “navigation” div (or equivalent). Note WP-PageNavi spits out a new class called “wp-pagenavi” though, which we can use for styling separately.
Override plugin styles
By default, WP-PageNavi automatically inserts a CSS file called <head> pagenavi-css.cssfrom its plugins directory into the head of your site. We don’t want these default styles to interfere with our own custom styles, so we’re going to get rid of them completely, and there are two easy ways to do that.
Add a CSS file to your theme directory – This is probably the easiest way to override WP-PageNavi’s default styles. If you have a file called pagenavi-css.css in your theme directory, WP-PageNavi will use that instead of the default one in the plugin directory.
Add a code snippet to your functions. php file – The following code snippet we’ve taken from WP Recipes will completely disable the above behavior and will not include any plugin stylesheets (neither the default nor the overridden one in your theme directory).
1
2
3
4
5
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
}
Simply place that code in your theme's php file functions.and add the CSS styles to your regular theme's stylesheet (usually <head> style.css).
Note: Make sure the code is surrounded by parentheses as <?php ... ?>if your functions file is currently empty.
wp page navigation
In this tutorial, we're going to go over how to:
Install WP-PageNavi and integrate it properly into your theme.
Two methods to disable and/or override the plugin's default styles.
An overview of HTML markup output by WP-PageNavi.
Finally, how to alter the look of your navigation page via CSS
Install the plugin
You have two options when installing the WP-PageNavi plugin.
Download it from WordPress.org , upload it to russian virtual mobile number your directory /wp-content/plugins/and activate it (the old fashioned way).
Depending on your host, you may also be able to install plugins automatically by searching for them on the “Add New” page under Plugins in your WordPress admin panel. Search for “pagenavi” and you should find it.
Okay, that should have been pretty easy. Now it's time to get your hands a little dirty in code for the integration part.
Integration of themes
In our theme integration, we never want any error to be displayed if WP-PageNavi is not active. Instead, we will make sure that it reverts to the old style of previous/next navigation. To do this, we will use a function_exists conditional check.
Let's say this is your normal WordPress previous/next navigation code:
1
2
3
4
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
We will change it to the following:
1
2
3
4
<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div><?php } ?>
This basically checks if WP-PageNavi is active and if it is, it displays the new page navigation code. If not, it falls back to the normal previous/next navigation.
Note: Depending on how your CSS is coded, you may want to put the part wp_pagenavi();inside the “navigation” div (or equivalent). Note WP-PageNavi spits out a new class called “wp-pagenavi” though, which we can use for styling separately.
Override plugin styles
By default, WP-PageNavi automatically inserts a CSS file called <head> pagenavi-css.cssfrom its plugins directory into the head of your site. We don’t want these default styles to interfere with our own custom styles, so we’re going to get rid of them completely, and there are two easy ways to do that.
Add a CSS file to your theme directory – This is probably the easiest way to override WP-PageNavi’s default styles. If you have a file called pagenavi-css.css in your theme directory, WP-PageNavi will use that instead of the default one in the plugin directory.
Add a code snippet to your functions. php file – The following code snippet we’ve taken from WP Recipes will completely disable the above behavior and will not include any plugin stylesheets (neither the default nor the overridden one in your theme directory).
1
2
3
4
5
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
}
Simply place that code in your theme's php file functions.and add the CSS styles to your regular theme's stylesheet (usually <head> style.css).
Note: Make sure the code is surrounded by parentheses as <?php ... ?>if your functions file is currently empty.