Lightning Rank - Private Blog Network

  • Home
  • Done 4 You PBN Service
  • Use My Premium PBN
  • Other Services
    • Amazon Associate Audit
    • Editorial Links
    • Buy Expired Domains
  • Contact
    • Affiliates

Add Numbered WordPress Page Navigation To WordPress Without Using Plugins

November 20, 2015 By Jon Gillham Leave a Comment

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.

Filed Under: Wordpress Tutorials Tagged With: page navigation, wordpress hack, wordpress page navigation, wordpress tutorial, wp pagenavi

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Services

[wp_cycle]

Recent Posts

  • What It takes to get to #1 in Google
  • Private Blog Network Building Service in 2016 – Is It Still Worth The Risk?
  • UpThemes Scale Back On Theme Options Within Their WordPress Themes
  • Create A WordPress Login Form Shortcode For Your Blog
  • WooThemes Back Online After Malicious Hack & Further DDoS Attack

Our Team

Jon Gillham

Father, Husband and mechanical engineer. Jon has the easy job he builds and tests systems that Kelley, Hmd and their teams execute!
Ahmed Ali

Ahmed is the man that makes sure everything runs smoothly. A true jack of all trades he makes sure each site is built to our high standards!

Quick Contact

Checking...

Ouch! There was a server error.
Retry »

Sending message...

Copyright © 2021 . Experts at Harnessing the Power of Expired Domains to Help You Outrank Your Competition