0

How to Add WordPress Pagination without a Plugin


Add the following function in your theme function.php

[code language=”css”]

function sandy_pagination($pages = ”, $range = 2)
{
$showitems = ($range * 2)+1;

global $paged;
if(empty($paged)) $paged = 1;

if($pages == ”)
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}

if(1 != $pages)
{
echo "<div class=’pagination’>";?>

<?php //previous_post(‘%’,’&laquo;’, ‘no’); ?>

<?php previous_posts_link( __( ‘&laquo;’, ‘twentythirteen’ ) ); ?>

<?php
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href=’".get_pagenum_link(1)."’>&laquo;</a>";
if($paged > 1 && $showitems < $pages) echo "<a href=’".get_pagenum_link($paged – 1)."’>&lsaquo;</a>";

for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=’current’>".$i."</span>":"<a href=’".get_pagenum_link($i)."’ class=’inactive’ >".$i."</a>";
}
}

if ($paged < $pages && $showitems < $pages) echo "<a href=’".get_pagenum_link($paged + 1)."’>&rsaquo;</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href=’".get_pagenum_link($pages)."’>&raquo;</a>";?>
<?php //next_post(‘%’,’&raquo;’, ‘no’); ?>
<?php next_posts_link( __( ‘&raquo;’, ‘twentythirteen’ ) ); ?>
<?php
echo "</div>n";
}
}

[/code]

Add the following code in your theme style.css

[code language=”css”]
/*Css for pagination on blog page */

.pagination {
float:left;

width:100%;
margin-top:50px;
border-top:1px solid #d6d6d6;
border-bottom:1px solid #d6d6d6;
border-radius:0px;
font-size:11px;
line-height:13px;
display:block;
text-align:center;

}

.pagination span, .pagination .inactive {
display:inline-block;
/* float:left */;
/* margin: 2px 2px 2px 0; */
padding:17px 20px 17px 20px;
border-left:1px solid #d6d6d6;
border-right:1px solid #d6d6d6;
text-decoration:none;
width:auto;
font-family: ‘Century-Gothic-Bold’;
font-size:17px;
color:#3279BB;

}

.pagination span, .pagination a {
display:inline-block;
/* float:left */;
/* margin: 2px 2px 2px 0; */
padding:17px 20px 17px 20px;

text-decoration:none;
width:auto;
font-family: ‘Century-Gothic-Bold’;
font-size:17px;
color:#3279BB;

}

.pagination .inactive:hover{
color:#fff;
background: #2e2e2d;
border-left:1px solid #2e2e2d;
border-right:1px solid #2e2e2d;
}

.pagination a:hover{
color:#fff;
background: #2e2e2d;

}

.pagination .current{
padding:17px 20px 17px 20px;

color:#fff;
background:#2e2e2d;
}

[/code]

Call the function after your loop

[code]
sandy_pagination()
[/code]

You can set the limit of the post
Wp-admin->Settings->Reading->Blog pages show at most

Sandeep Kumar

Sandeep kumar is a web developer and a professinal blogger. He works for latest technologies and write articles what he learn. In ICodeHub he share web languages tutorials and other programming tips and tricks. if you need some help or have some suggestion then mail him at sandeep92pal@gmail.com without any hesitation. He believes in learning and sharing.