HostOnNet Blog

How to add Bootstrap Pager in WordPress

Looking for Linux Server Admin or WordPress Expert? We can help.

Hi, I’m almost finished our blog modification,bootstrap conversion etc.

Now we need previous and next links on blog to provide simple and quick navigation to the user instead of the complex pagination.

I have created previous and next button with Bootstrap class .pager.

Edit theme/loop.php and findout the below code

<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
</div>

Replace with

<ul class="pager">
  <li class="previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></li>
  <li class="next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></li>
</ul>

bootstrap-pager

About Sibi Antony

Bootstrap and Android LOVER. I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in Bootstrap, Wordpress

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.