Add Pagination to your WordPress Blog without Plugin!

Previously I gave you guys a tutorial about how to add a featured post section to your WordPress Blog.
This time I’ll be giving you yet another tutorial in which you can add a pagination to your WordPress blog without any plugin.
If you want to see a live demo click here

Steps

1. Configuring functions.php.

Add the following code to the theme file functions.php at the end unless you know where to add the code.

function dw_paginate() {
        global $paged;
        $on_page = intval($paged);
        $no_prev = false;
        $no_next = false;
        if ($on_page == 0) {
            $on_page = 1;
        }
        global $wp_the_query;
        $max_pages = $wp_the_query->max_num_pages;
        $start_pos = $on_page - 2;
        if ($start_pos <=  0) {
            $amt_from_zero = ($start_pos * $start_pos) + 1;
            $start_pos = 1;
        }
        $end_pos = $on_page + 2;
        if ($end_pos >= $max_pages) {
            $amt_from_end = $end_pos - $max_pages;
            $end_pos = $max_pages;
        }
        if (isset( $amt_from_zero ) && isset( $amt_from_end )) {        }
        elseif(isset( $amt_from_zero )) {
            $end_pos = $end_pos + $amt_from_zero;
            if ($end_pos >= $max_pages) {
                $end_pos = $max_pages;
            }
        }
        elseif(isset( $amt_from_end )) {
            $start_pos = $start_pos - $amt_from_end;
            if ($start_pos <=  0) {
                $start_pos = 1;
            }
        }
        if (($on_page - 1) <= 0) $no_prev = true;
        if (($on_page + 1) > $max_pages) $no_next = true;
        $links_to_print = ($end_pos - $start_pos) + 1;
        echo '

' . "n";
    }


Now the code is added. So next up is to design how it looks.

2. Styling the output.

The following is the screenshot how it will be looking for the CSS code I’m going to give you. Basically the colour scheme was made as to suit Deepak’s blog MobileGyaan as I designed the current theme for his blog 😀 .
Pagination Style

#pagination{clear:both;padding:15px;text-align:center;font-size:12px;font-weight:bold;color:#999;margin:10px auto 10px auto;}
#pagination li{margin:0 1px 0 1px;display:inline;list-style-type:none;}
#pagination li a{padding:5px 7px 5px 7px;color:#3399CC;border:1px solid #CCC;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#pagination li a:hover{text-decoration:none;padding:5px 7px 5px 7px;color:#0066cc;border:1px solid #0066CC;background:#Daf2fc;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#pagination .active a{background:#3399CC;color:#FFF;border:1px solid #0364ae;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#pagination .extreme a{border:0;color:#3399CC;font-size:14px;}
#pagination .extreme a:hover{border:0;color:#3399CC;font-size:14px;background:#FFF;}
#pagination .active a:hover{background:#3399CC;color:#FFF;border:1px solid #0364ae;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#pagination .inactive{color:#CCC;padding:5px 7px 5px 7px;border:1px solid #EEE;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}


 

3. Usage

The function that we are going to use to display the page numbers instead of Next or Previous entries is
Function
This can be used in theme files such as

  • home.php (if exists)
  • index.php
  • archives.php
  • category.php (if exists)

Now everything is complete. If you have any queries regarding this trick use the comment form below. 🙂

6 Comments

Jagmeet Singh November 16, 2009

hi
dis function is showing only maximum 5 pages at a time like

but i want to show 10 pages

how can i show 10 pages …

Jagmeet Singh November 16, 2009

hi

dis function is showing only maximum 5 pages at a time like:
1 2 3 4 5
but i want to show 10 pages:
1 2 3 4 5 6 7 10
how can i show 10 pages…!!

Gautam March 9, 2010

Actually one can do anything without a plugin by adding the plugin’s code in the core or functions.php file of the theme (talking of WordPress/bbPress) and css/js in appropiate files, if required. Plugins were made for easy usage, enabling/disabling and upgrade for bug fixes or new enhancements.

jigen shah April 13, 2010

hi there,
can any one plz tell me how to add pagination to a blogspot blog???

karan israni October 11, 2010

I am not able to download the code to put in functions.php
The link is not working. Please help!