TXP Tips

Pagination google style

Using pagination for your article lists is made simple thanks to the ob1_googlenav plugin.

Textpattern comes with its own pagination tags – newer and older – while these tags work just fine, the goal here is to create a Google style navigation list.

1. First, download the plugin and install in the usual way.

Once the plugin is activated, we can place some code in our page template.

Call the plugin from your page

<txp:if_section name="articles">
<txp:article form="article_list" limit="20" />
<txp:ob1_pagination firsttext="First page" previoustext="Previous page" nexttext="Next page" lasttext="Last page" ulclass="pagination" liselected="active" />
</txp:if_section>

The above code is placed in your page template, after the txp:article call. What this does is create a pagination link after the first 20 articles.

Note: In the plugin help file there is an error in the example, which uses the old ob1_googlenav tag. This needs to be ob1_pagination as in my example above.

The plugin attributes are self-explanatory, and documented in the plugin help file.

Some CSS to style the pagination links

ul.pagination {margin: 1em 0; padding: 0.5em; text-align: center; background: #eee;}
ul.pagination li {display: inline; font-size: 0.625em; padding: 0.5em;}
ul.pagination li.active {background: #fff; border: 1px solid #eee;}

Use similar styles to achieve the effect you want.

Thanks to Craig Valadez of struc1.com for suggesting this tip.