Adding Pagination To Your WordPress Blog Page without using a Plugin

You can add pagination to your WordPress blog home page without using a page navigation plugin. Simply add the following piece of PHP code to where you want to show the pagination (preferably in your “index.php” file near the footer).

The HTML Code

Paste the following code to where you want to show the pagination

<div class="my_page_navi">
<?php
global $wp_query;
$total = $wp_query->max_num_pages;
if($total > 1) {
if ( !$current_page = get_query_var('paged') ){$current_page = 1;}
$perm_structure = get_option('permalink_structure');
$format = empty($perm_structure) ? '&page=%#%' : 'page/%#%/';
$paginate_return_data = paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => $format,
'current' => $current_page,
'total' => $total,
'mid_size' => 4,
'type' => 'plain'
));
echo $paginate_return_data;
}
?>
</div>

The “type” plain parameter will create a simple plain pagination. You can specify type “array” to get all the pagination links so you can display them how you want to.

The CSS Code

Now, all you need to do is add some CSS to your theme’s CSS file (style.css) to make the pagination look prettier. Add the following CSS code to your theme’s CSS file (customize it to suit your needs):

.my_page_navi {margin: 5px 0;display: block;margin:10px 0px;}
.my_page_navi .page-numbers{padding: 3px;border: 1px solid #9E9E9E;background: #EDEDED;margin:0px;font-size:12px;text-decoration: none;font-weight:bold;}
.my_page_navi a{color: #0071bb;text-decoration: none;position: relative;}
This entry was posted in Cheat Sheets, Wordpress Design Tutorials, WordPress Theme and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>