DRY Pagination

By James Mathias · December 10, 2016 · Read in one minute.

First you’ll need a Template Partial. I like to name this par-paginate-links.

{paginate}
    {pagination_links page_padding='1'}
        <div class="pagination">
            <ul>
                {first_page}
                    <li class="pg-first"><a href="{pagination_url}"><span>first</span></a></li>
                {/first_page}
                {previous_page}
                    <li class="pg-prev"><a href="{pagination_url}"><span>prev</span></a></li>
                {/previous_page}
                {page}
                    <li><a href="{pagination_url}"{if current_page} class="act"{/if}>{pagination_page_number}</a></li>
                {/page}
                {next_page}
                    <li class="pg-next"><a href="{pagination_url}"><span>next</span></a></li>
                {/next_page}
                {last_page}
                    <li class="pg-last"><a href="{pagination_url}"><span>last</span></a></li>
                {/last_page}
            </ul>
        </div>
    {/pagination_links}
{/paginate}

This partial covers paginated links, you can adjust the output to your personal needs, but this is your basic “first, previous, 1, 2, 3, next, last” pattern.

Now that you have this, all you need to do is call it into the exp:channel:entries tags you want to paginate.

Something like this,

{exp:channel:entries channel='blog' limit='10'}
    HTML Output...
    {if no_results}
        {redirect='404'}
    {/if}
    {par-paginate-links}
{/exp:channel:entries}

And there you have, a clean, fast and simple way to make your websites more maintainable with ExpressionEngine.

James Mathias

Hopelessly in love and devoted to his wife of twenty-two years, their three sons, & daughter. For the last eighteen years James has dedicated himself to helping make the Internet better. Previously he…

Comments 0