Guides
Tutorials
Pop Tags

Pagination

Use <pop:paginate> to show a paginated listing. It works with <pop:entries> and <pop:categories> by default, but we’ll see later how it can be used with any tag that takes the limit and skip options as long as there’s a way of calculating the total items.

Paginating Entries

The simplest example of paginating entries looks like this:

<pop:paginate per_page="10">

<pop:entries>
<a href="<pop:permalink/>"><pop:title/></a>
</pop:entries>

<pop:pagination/>

</pop:paginate>

This will give a list of entries paginated with 10 entries per page. The <pop:pagination/> tag will output standard markup for a pagination control, but as always with Webpop you can open up the tag and take complete control over how to mark up the pagination.

Here’s a more complex example:

<pop:paginate per_page="10">

 
<pop:entries from="/blog" wrap="ul" break="li">
     
<h2><a href="<pop:permalink/>"><pop:title/></a></h2>
 
</pop:entries>

<!-- Opens up pagination tag -->

 
<pop:pagination>

     
<!-- Provides access to the following tags: -->

     Page
<pop:page_number/> of <pop:total_pages/>
     First page:
<pop:first><a href="<pop:permalink/>"><pop:number/></a></pop:first>
     Last page:
<pop:last><a href="<pop:permalink/>"><pop:number/></a></pop:last>

     Previous page:
<pop:previous><a href="<pop:permalink/>"><pop:number/></a></pop:previous>
     Next page:
<pop:next><a href="<pop:permalink/>"><pop:number/></a></pop:next>

     
<pop:pages wrap="ul" break="li">
        <a href="
<pop:permalink/>" class="<pop:current>current</pop:current>"><pop:number/></a>
     
</pop:pages>

 
</pop:pagination>

</pop:paginate>

Pagination can also be used with tags defined by extensions as long as the extension tag that generates the list supports the skip and limit options and as long as the extension provides a way to get the total number of list items.

Here’s a rough example based on a “blog” extension that fetches a feed of blog entries from an external blog. It exposes <pop:blog:feed_entries> to get the list of entries, and <pop:blog:total_entries> to get the number of total entries:

<pop:paginate per_page="10" tag="feed_entries" total="<pop:blog:total_entries/>">
   
<pop:blog:feed_entries><a href="<pop:permalink/>"><pop:title/></a></pop:blog:feed_entries>

<pop:pagination/>

</pop:paginate>
Continue to Search »