Foundation 6 Pagination HTML for WordPress Timber+Twig

README.md

Adding Foundation 6 friendly pagination HTML to a Timber-based WordPress template.

References:

• http://foundation.zurb.com/sites/docs/pagination.html
• https://github.com/jarednova/timber/wiki/Pagination

base.twig

{# In your base or content template, where the pagination should appear #}
{% include 'pagination.twig' %}

index.php

<?php 
// This being the index, or archive, etc, where posts are loaded. 

// ... snip ...

// You already have these in place:
$context = Timber::get_context();
$context['posts'] = Timber::get_posts();

// Add this: 
$context['pagination'] = Timber::get_pagination();

pagination.twig

{% if pagination %}
<ul class="pagination" role="navigation" aria-label="Pagination">
    {% if pagination.prev %}
        <li class="pagination-previous"><a href="{{ pagination.prev.link }}" aria-label="Previous page">Previous <span class="show-for-sr">page</span></a></li>
    {% else %}
        <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
    {% endif %}

    {% for page in pagination.pages %}
        {# If *not* current page (page.link == falsy): #}
        {% if page.link %}
            <li><a href="{{ page.link }}" class="{{ page.class }}" aria-label="Page {{ page.title }}">{{ page.title }}</a></li>
        {% else %}
            <li class="current"><span class="show-for-sr">You're on page</span> {{ page.title }}</li>
        {% endif %}
    {% endfor %}

    {% if pagination.next %}
        <li class="pagination-next"><a href="{{ pagination.next.link }}" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
    {% else %}
        <li class="pagination-next disabled">Next <span class="show-for-sr">page</span></li>
    {% endif %}
</ul>
{% endif %}

Note sure how I feel about the if pagination being in or outside of the partial. Outside might make more sense, for someone looking at the base/page template and wondering why it isn't showing up.