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.

ADVERTISEMENT
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 replies on “Add Pagination to your WordPress Blog without Plugin!”

  1. 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.

Comments are closed.