telekommander
2/4/2016 - 9:18 PM

Foundation 6 Pagination HTML for WordPress Timber+Twig

Foundation 6 Pagination HTML for WordPress Timber+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 %}
<?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();
{# In your base or content template, where the pagination should appear #}
{% include 'pagination.twig' %}

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

References: