In two steps learn to build a WordPress Post Pagination without plugin.
WordPress only comes bundled with the “next page” and “previous page” links to navigate between different blog overview pages. For better user experience I would recommend to remove those links and replace them with a pagination like most people are using in their wordPress templates. I’ve been focusing a lot of my efforts on better way of implementing Twitter’s Bootstrap with WordPress themes.
Why should you use them?
- Because they are easier to navigate and the user instantly knows how many posts and pages are available. Its simply good user experience.
- Using a plugin for this task may be an overkill since you really only need to add a few lines of PHP and CSS to your theme.
Step 1 : The function
You just want to copy/paste the function into your theme feel free to do so, a more detailed description can be found bellow:
[code]function Meul Tech _get_bootstrap_paginate_links() {
ob_start();
?>
<div class="pages clearfix">
<?php global $wp_query; $current = max( 1, absint( get_query_var( ‘paged’ ) ) ); $pagination = paginate_links( array( ‘base’ => str_replace( PHP_INT_MAX, ‘%#%’, esc_url( get_pagenum_link( PHP_INT_MAX ) ) ),
‘format’ => ‘?paged=%#%’,
‘current’ => $current,
‘total’ => $wp_query->max_num_pages,
‘type’ => ‘array’,
‘prev_text’ => ‘<<‘, ‘next_text’ => ‘>>’,
) ); ?>
<?php if ( ! empty( $pagination ) ) : ?>
<ul class="pagination">
<?php foreach ( $pagination as $key => $page_link ) : ?>
<li class="paginated_link<?php if ( strpos( $page_link, ‘current’ ) !== false ) { echo ‘ active’; } ?>"><?php echo $page_link ?></li>
<?php endforeach ?>
</ul>
<?php endif ?>
</div>
<?php
$links = ob_get_clean();
return apply_filters( ‘Meul Tech _bootstap_paginate_links’, $links );
}
function Meul Tech _bootstap_paginate_links() {
echo Meul Tech _bootstap_paginate_links();
}[/code]
Step 2 : Pagination File
Now Call Function Meul Tech _bootstap_paginate_links() To display Pagination links. Mostly we will apply pagination in category.php or archive.php file.
[code]<?php Meul Tech _bootstap_paginate_links(); ?>[/code]
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. WordPress Training in Mumbai .
2. Web Designing Training in Mumbai.
3. Bootstrap Training Course in Mumbai.
4. UI / UX Training.