Thông thường các theme wordpress đều chỉ có link “Older posts” và “Newer posts” ở cuối trang khiến chúng ta gặp nhiều rắc rồi khi mà lượng bài viết của chúng ta có nhiều. 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ẽ 😉

Bạn mở file function.php ra và thêm đoạn code sau:

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";
     }
}

Tiếp theo trang trí cho số trang bằng đoạn css sau đặt trong 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;
}

Cuối cùng là bạn tìm đến các file index.php, archive.php, search.php hoặc bất cứ trang nào có Older posts để thay thế nó bằng đoạn mã sau:

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

Bài viết tham khảo tại sgwordpress.com, được chỉnh sửa tại cachhoc.net