Many people prefer numbered page navigation compared to the older posts and newer posts link. Many themes already comes with page numbers navigation, and if they don’t come with any such feature, then they support WP Page Navi plugin which adds such numbered navigation to the website. In this post, we will be taking a look at two different plugins that can add numbered navigation to WordPress.
WP-PageNavi Plugin
This is one of the most popular plugin that offers advanced paging navigation interface to your website’s visitors. Firstly, install and activate WP-PageNavi.
If your theme supports this plugin, then you can automatically see page number navigation, but if your theme does not supports this plugin, then you would need to delve in coding. For the purpose of this tutorial, we will be using the default Twenty Twelve theme of WordPress.
Open functions.php and find these two lines:
<div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div> <div class="nav-next alignright"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>
Replace these two lines with the below code:
<?php wp_pagenavi(); ?>
That’s it. Now check out the home page of your website and you can see the numbered navigation.
You can configure this plugin from Settings > PageNavi.
This screenshot is just of a small portion of the configuration page. Get this plugin from below or install it via Plugins > Add New.
Simple Page Navigation with Page Numbers Plugin
This WordPress plugin is really very simple and easy to use. This plugin adds page numbers at the bottom for easy navigation, but it won’t remove the old previous and next links which your theme displays. If you would like to remove those links, then you will need to remove the code from the theme or use some CSS to hide the links.
All you need to do is to install and activate this plugin. This plugin does not comes with any settings/options panel. After activating, you can check out the front-end of your website and you will see numbered navigation.
If you would like to change the color or style of these buttons, then you can edit the simple-pagenavi.css file from the plugin. The plugin would have added more value if there were any options panel that allows users to change the color and style of the navigation. But since there are no options provided, you would need to edit CSS file manually.
So go ahead, use any one of these plugin and add numbered navigation to your WordPress website or blog.