Usually wordpress theme are only link "Older posts" and "Newer posts" at the bottom of the page makes us more trouble when the amount of articles we have many. Bài viết này mình sẽ hướng dẫn các bạn cách Thay thế Older posts bằng số trang như hình vẽ 😉

You open function.php file and add the following code:

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;
         if(!$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";
     }
}

Next decorate the page number in the following paragraphs set in the css file style.css

/* page-nav*/

.pagination {
    clear:both;
    padding:20px 0;
    position:relative;
    font-size:11px;
    line-height:13px;
}

.pagination span, .pagination a {
    background: none repeat scroll 0 0 #2ea2cc;
    color: #fff;
    display: block;
    float: left;
    font-size: 14px;
    margin: 2px 5px 2px 0;
    min-width: 15px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    width: auto;
}

.pagination a:hover{
    color:#fff;
    background: #333;
}

.pagination .current{
    padding:15px;
    background: #333;
    color:#fff;
}

Finally you come to the index.php file, archive.php, search.php or any page with Older posts to replace it with the following code:

<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

Reference Articles in sgwordpress.com, revised in cachhoc.net