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";
echo '
' . "n";
echo $no_prev ? '
- ' . '«' . '
' : '
- ' . '«' . '
';
for ($i = $start_pos; $i <= $end_pos; $i++) {
if ($i == $on_page) {
echo '
- ';
} else {
echo '
- ';
}
echo '' . $i . '
';
}
echo $no_next ? '
- ' . '»' . '
' : '
- ' . '»' . '
';
echo '
' . "n";
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{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
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. 🙂
