• Subscribe to the RSS feed! RSS icon
  • Subscribe by Email
  • home
  • blog
  • dev
  • Recent Posts

    • Automatically upload screenshots in XFCE4
    • Zend Framework full page cache tips
    • No more Wordpress
    • Xdebug is full of awesome
    • Creating a chat bot with PHP and Dbus
    • A year in review: 2011
    • Notes on shell scripting
    • Listening to Dbus signals with PHP
    • Configuring 2 monitors with xrandr
    • A quick note on Dojo's data grids and dojox.data.HtmlStore
  • Recent Comments

    • Robert on Zend Framework full page cache tips
    • Stephen S. Musoke on Zend Framework full page cache tips
    • David on Zend Framework full page cache tips
    • Anon on A quick note on Dojo's data grids and dojox.data.HtmlStore
    • James on Communicating with Pidgin from PHP via D-Bus
    • Robert on A Zend Framework 2 EventManager use case
    • Jowee on A Zend Framework 2 EventManager use case
    • Jurian Sluiman on A Zend Framework 2 EventManager use case
    • Jurian Sluiman on A Zend Framework 2 EventManager use case
    • djozsef on Webkonf 2011 recap
  • Tags

    php, about, random, framework, zend, example, ubuntu, blog, site, zend framework, book, conference, me, python, wordpress, apache, introduction, lamp, linux, open source, review, script, setup, signals, ape, community, contributing, dbus, dojo, events, hack, mysql, netbeans, pidgin, plugin, pyqt, security, shell, svn, talk
  • Categories

    • Blablabla
    • Development
    • Free time
    • Places on the web
    • Programming
    • Software
    • Uncategorized
  • Archives

    • February, 2012
    • January, 2012
    • December, 2011
    • November, 2011
    • October, 2011
    • September, 2011
    • August, 2011
    • July, 2011
    • May, 2011
    • April, 2011
    • March, 2011
    • January, 2011
    • December, 2010
    • November, 2010
    • October, 2010
    • July, 2010
    • June, 2010
    • April, 2010
    • February, 2010
    • January, 2010
    • December, 2009
    • November, 2009
    • October, 2009
    • August, 2009
    • May, 2009
    • March, 2009
    • February, 2009
    • January, 2009
    • December, 2008
    • November, 2008
    • October, 2008
    • September, 2008

Wordpress paging navigation

by Robert Basic on October 6th, 2008

As I'm not a big fan of Wordpress plug—ins, and I wanted to use a normal page navigation, not just the default “Previous posts” and “Next posts”, I decided to play around a bit and create my own paging navigation, or pagination.

Preparation

An example of the navigation

An example of the navigation

First, I wrote on a piece of paper which links I need: first page, last page, next page, previous page and the links with the page numbers. Next, I needed to see what functions are already in Wordpress, to reuse as much as I can. After a little searching, I found that the functions for the default navigation are located in the link-template.php file, under the wp-includes folder. There are the functions for the next and previous pages, and the function that creates the URL. Furthermore, I wanted a sliding pagination (like Yahoo has on it's search page), 'cause it's easy to use and looks cool.

The function

So, let's take a look at the code. I called the function simply get_pagination; it's quite self—describing. I put it in the link-template.php file, that way, all functions for navigation are in one place.

/**
* A pagination function
* @param integer $range: The range of the slider, works best with even numbers
* Used WP functions:
* get_pagenum_link($i) - creates the link, e.g. http://site.com/page/4
* previous_posts_link(' « '); - returns the Previous page link
* next_posts_link(' » '); - returns the Next page link
*/
function get_pagination($range = 4){
  // $paged - number of the current page
  global $paged, $wp_query;
  // How much pages do we have?
  if ( !$max_page ) {
    $max_page = $wp_query->max_num_pages;
  }
  // We need the pagination only if there are more than 1 page
  if($max_page > 1){
    if(!$paged){
      $paged = 1;
    }
    // On the first page, don't put the First page link
    if($paged != 1){
      echo "<a href=" . get_pagenum_link(1) . "> First </a>";
    }
    // To the previous page
    previous_posts_link(' « ');
    // We need the sliding effect only if there are more pages than is the sliding range
    if($max_page > $range){
      // When closer to the beginning
      if($paged < $range){
        for($i = 1; $i <= ($range + 1); $i++){
          echo "<a href='" . get_pagenum_link($i) ."'";
          if($i==$paged) echo "class='current'";
          echo ">$i</a>";
        }
      }
      // When closer to the end
      elseif($paged >= ($max_page - ceil(($range/2)))){
        for($i = $max_page - $range; $i <= $max_page; $i++){
          echo "<a href='" . get_pagenum_link($i) ."'";
          if($i==$paged) echo "class='current'";
          echo ">$i</a>";
        }
      }
      // Somewhere in the middle
      elseif($paged >= $range && $paged < ($max_page - ceil(($range/2)))){
        for($i = ($paged - ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++){
          echo "<a href='" . get_pagenum_link($i) ."'";
          if($i==$paged) echo "class='current'";
          echo ">$i</a>";
        }
      }
    }
    // Less pages than the range, no sliding effect needed
    else{
      for($i = 1; $i <= $max_page; $i++){
        echo "<a href='" . get_pagenum_link($i) ."'";
        if($i==$paged) echo "class='current'";
        echo ">$i</a>";
      }
    }
    // Next page
    next_posts_link(' » ');
    // On the last page, don't put the Last page link
    if($paged != $max_page){
      echo " <a href=" . get_pagenum_link($max_page) . "> Last </a>";
    }
  }
}

The “range” is the range of the sliding effect, i.e. how many numbers are shown besides the current number: if the range is 4, and the current page is 5, then the numbers 3, 4, 5, 6 and 7 are visible.

Usage

It's quite simple to use it: where the pagination is needed, just call the get_pagination() function, and it will show up. Add some CSS style to it, and your good to go.

Hope someone will find this useful :)

Tags: example, navigation, php, wordpress.
Categories: Development, Programming, Software.
Comments: 13 comments.

Comments: 13

  • Nikos

  • October 21st, 2008
This is very helpful... But how can I call the get_pagination() ? Where exactly should I put it? Can you please be more specific? Im still new in the code of wordpress... Thank you for the helpful code
  • Nikos

  • October 21st, 2008
Oh... and how exactly I will add the .css to it? Thanx again
  • Robert

  • October 21st, 2008
Hi Nikos! Call the get_pagination() in your template file, for example in index.php of your template. All I do is this: <pre name="code" class="php"> &lt;div class="pagination"&gt; &lt;?php get_pagination() ?&gt; &lt;/div&gt; </pre> Put the css styling where you want it, like in the css file of your template: <pre name="code" class="css"> .navigation { display: block; text-align: center; margin-top: 10px; margin-bottom: 60px; font-size:80%; } .navigation a{ text-align:center; padding:5px 10px; margin:0 2px 0 2px; border:1px solid #6C7388; } .navigation a:hover{ background:#6C7388; } </pre> Hope this helps :)
  • eylultoprak

  • November 1st, 2008
Wooww.. Thanx again =)
  • Aktar

  • November 23rd, 2008
Hi Robert, where is class="pagination" ?
  • Nick

  • March 24th, 2009
This was very useful. Thank you very much!
  • Bobby

  • April 1st, 2009
Huge help! Thanks so much!
  • Varun Sikka

  • April 29th, 2009
Thanks a lot for this. Its a huge help. It is amazing piece of code. Thanks a ton once again...
  • Hellas

  • May 2nd, 2009
Hello. Excellent idea, but it has xhtml validation errors. I xhtml validated your script and you can download it here http://www.sulumitsretsambew.org/wordpress-seo-paging-navigation/ Thanks one more time for this great piece of code.
  • luz

  • July 14th, 2009
excellent, congrats for the plugin! I have a question, how can I style the selected number, so users can know in wich page they are?
  • Shane

  • July 31st, 2009
Nice work.
  • adhie

  • November 4th, 2009
@luz add .current{ background:#65ea00; } to ur css style. @Aktar change class=”pagination” to class=”navigation” Thank you for the helpful code
  • Domen

  • December 17th, 2009
Great stuff. Works like a charm!

Leave a Reply

Robert Basic © 2008 — 2012
Design & graphics by: Livia Radvanski
Coded by: Robert Basic
Home page last updated on November 30th, 2009.
Frameworks used: Zend Framework, Dojo, 960 Grid System