Add Numbered WordPress Page Navigation To WordPress Without Using Plugins

Numbered page navigation is not a feature that comes as standard with WordPress which instead uses its standard blog page navigation style of ← Older posts | Newer posts → in certain themes. If your current WordPress theme does not support numbered page navigation (Lots of them now do) one solution that has been around for a while to easily achieve this function is to install a plugin like WP-Pagenavi.

What if your building a WordPress theme for release to the public though and want numbered page navigation without requiring the user to download and install any additional plugins? This tutorial will show you how to achieve numbered page navigation in your existing WordPress theme or a WordPress theme you are planning on releasing to the public without using a plugin by adding some code to your themes functions.php file.

Important

If you are going to add this code to an existing wordpress theme that already has a copy of WP-Pagenavi installed and activated please deactivate this plugin before continuing the tutorial, otherwise when you install the code below into your themes functions.php file you will most probably get a WordPress error of a blank white page.

Step 1: functions.php

The code block below is the main function that will add page navigation functionality to your WordPress theme, we have named the function wp_pagenavi() so that the code can easily be added to themes that have that call present within them having previously used the WP-Pagenavi plugin.

Open your themes functions.php, copy and paste the code below into it at the very bottom and save the file.

//---------------------------- [ Pagenavi Function ] ------------------------------//

function wp_pagenavi() {
  global $wp_query, $wp_rewrite;
  $pages = '';
  $max = $wp_query->max_num_pages;
  if (!$current = get_query_var('paged')) $current = 1;
  $args['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
  $args['total'] = $max;
  $args['current'] = $current;

  $total = 1;
  $args['mid_size'] = 3;
  $args['end_size'] = 1;
  $args['prev_text'] = '«';
  $args['next_text'] = '»';

  if ($max > 1) echo '</pre>
<div class="wp-pagenavi">';
 if ($total == 1 && $max > 1) $pages = '<span class="pages">Page ' . $current . ' of ' . $max . '</span>';
 echo $pages . paginate_links($args);
 if ($max > 1) echo '</div>
<pre>';
}

Step 2: Adding Functionality to Pages and Categories

If your theme does not already call the wp_pagenavi() function in its post loop you will have to add it. This function depending on the theme author can be placed in various places we have listed some files to check below.

• index.php
• default-loop.php
• *****-loop.php
• category.php
• tag.php

The files above should be a good starting point to look for the post loop.

Search within your theme files for any instances of posts_nav_link() it will probably look similar to the line of code below.

<?php posts_nav_link('∞','«« Previous Posts','Older Posts »»'); ?>

Replace all instances of that line of code contained within your theme by copying and pasting the code below into your theme instead.

<?php if(function_exists('wp_pagenavi')) { ?>
<?php wp_pagenavi(); ?>
<?php } else { ?>
<div class="navigation"><p><?php posts_nav_link('∞','«« Previous Posts','Older Posts »»'); ?></p></div>
<?php } ?>

This code block above will do two things.

1.) It will check for the function wp_pagenavi() (including the plugin version) and display numbered page navigation.

2.) If no wp_pagenavi function or plugin is found it will display the default ← Older posts | Newer posts → WordPress page navigation style instead.

NOTE: You cannot have both the WP-Pagenavi plugin and the supplied function.php code active at the same time in a single theme as we explained at the beginning of the tutorial otherwise you will receive an error. You can also easily rename all instances of the wp_pagenavi() function to anything you wish if required.

Step 3: Style With CSS

The next step is to style you page navigation with some CSS. The css below covers both the default navigation links and your new numbered wp-pagenavi navigation links.

/*-------------------------------- [ Page Navigation ] --------------------------------*/

.wp-pagenavi {
  clear:both;
  margin: 20px 0 30px 0;
  padding-top:10px;
}

.wp-pagenavi span.pages {
  border:none;
  margin-right:5px;
  padding:10px;
  background:#2b2b2b;
  color:white;
  border:1px solid black;
  text-decoration:none;
  border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
  -moz-border-radius: 3px; /* Firefox up to version 3.6 */
  -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

.wp-pagenavi a.page,
.wp-pagenavi .page-numbers,
.wp-pagenavi span.extend,
.wp-pagenavi a.first,
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.last {
  border:none;
  margin-right:0px;
  padding:10px;
  background:#2b2b2b;
  color:white;
  border:1px solid black;
  text-decoration:none;
  border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
  -moz-border-radius: 3px; /* Firefox up to version 3.6 */
  -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

.wp-pagenavi span.current,
.wp-pagenavi a:hover {
  border:none;
  margin-right:0;
  padding:10px;
  background:#fcfcfa;
  color:black;
  border:1px solid #454545;
  text-decoration:none;
  border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
  -moz-border-radius: 3px; /* Firefox up to version 3.6 */
  -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

.navigation {
  padding-top:10px;
}

.navigation a {
  padding:10px;
  background:#454545;
  text-decoration:none;
  color:white;
  border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
  -moz-border-radius: 3px; /* Firefox up to version 3.6 */
  -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

.navigation a:hover {
  padding:10px;
  background:#093f6c;
  text-decoration:none;
  color:white;
  border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
  -moz-border-radius: 3px; /* Firefox up to version 3.6 */
  -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}

You should now have numbered page navigation in your WordPress theme without having used any plugins to achieve the functionality, finally simply tweak the supplied css to suit your themes colour scheme and you should be finished. You can see this technique working live on the WPShock site.

As always if you found this article useful please consider sharing it to your social profiles and any improvements or questions you have leave a comment.