Add Numbered Pagination in WordPress without any Plugin

If your WordPress blog is having a decent number of articles, then it is a wise idea to display numbered pagination at the footer of your index as it helps in easy navigation of your archives. Of-course, the default WordPress pagination comes with ‘older posts’ and ‘newer posts’ but those look good if you’re having a blog with few articles but it doesn’t suit sites with large number of archives. If you’ve seen Google search results, you’ll get an idea how the numbered pagination comes handy.

In WordPress, there are several plugins (WP-PageNavi) that let you add pagination to your blog easily without any coding. But, do remember that the number of plugins you add, the more time it takes to load the page. So, its always a better idea to hard-code those things whenever possible. See my home page and you’ll know how it looks like.
WordPress Numbered Pagination

Add Numbered Pagination in WordPress Manually

  1. Go to your WP Dashboard > Appearance > Editor
  2. Open the ‘functions.php’ file from the right sidebar.
  3. Add the following lines of code to your functions.php file & publish.

    function pagination($pages = ”, $range = 4)
    $showitems = ($range * 2)+1;
    global $paged;
    if(empty($paged)) $paged = 1;
    if($pages == ”)
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    $pages = 1;
    if(1 != $pages)
    echo “<div class=\”pagination\”><span>Page “.$paged.” of “.$pages.”</span>”;
    if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo “<a href='”.get_pagenum_link(1).”‘>&laquo; First</a>”;
    if($paged > 1 && $showitems < $pages) echo “<a href='”.get_pagenum_link($paged – 1).”‘>&lsaquo; Previous</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).”\”>Next &rsaquo;</a>”;
    if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo “<a href='”.get_pagenum_link($pages).”‘>Last &raquo;</a>”;
    echo “</div>\n”;

  4. By default, it will not look good when you preview your blog. So, let’s add some styles to it. Open your style.css file and add the below lines at the bottom & publish.

    .pagination {
    padding:20px 0;
    .pagination span, .pagination a {
    margin: 2px 2px 2px 0;
    padding:6px 9px 5px 9px;
    background: #555;
    .pagination a:hover{
    background: #3279BB;
    .pagination .current{
    padding:6px 9px 5px 9px;
    background: #3279BB;

  5. Lastly, you need to call these functions in your theme (index.php or loop.php). Find ‘older posts’ or ‘older entries’ and replace those lines with the below code.

    <?php if (function_exists(“pagination”)) {
    } ?>

That’s it! You’ve now added a beautiful number pagination to your WordPress blog without any plugins.

Last Updated on by Radha Krishna under Wordpress, Wordpress Plugins Category 0 Comments


Share This Article

Get Free Email Alerts

Stay Updated with Useful Blogging Tips. Get Free Email Newsletter Updates..

And, Next Confirm Your Email Subcription


No Comment to “Add Numbered Pagination in WordPress without any Plugin”

  1. No Comment yet. Be the first to comment...
Leave your comment here:

CommentLuv badge

Unable to load the Are You a Human PlayThru™. Please contact the site owner to report the problem.

We Use & Recommend
[Bluehost - Review | Installation | Discount ] Bluehost Coupon
Free Email Alerts
Facebook Twitter Google Plus RSS Feed Email
Rate Us

Like US