Limit Timber pagination number items

Question

Transparency: Wordpress newbie here. 👋🏻

I am working on a Wordpress Timber/Twig project and I've added some pagination based on the documentation here: https://timber.github.io/docs/guides/pagination/

However, my pagination is showing 1 through 9, then the ellipsis, then the last page. Ideally we'll only be showing the three nearest pages on either side making out total of pages being shown 7 at it's most.

At the moment the design is rendering as follows:

As you can see, this is a bit much, especially for smaller devices.

Answer 1

This is how mine looks:

I got something similar from the original Timber Starter Theme that adds up to this:

{% if posts.pagination.pages is not empty %}
    <nav class="pagination is-centered" role="navigation" aria-label="pagination">
        {% if pagination.pages|first and pagination.pages|first.current != true %}
                <a class="pagination-previous" href="{{ pagination.pages|first.link }}">First</a>
        {% else %}
                <a class="pagination-previous" disabled>{{ __('First', 'calmar-lite') }}</a>
        {% endif %}

        {% if pagination.prev %}
                <a class="pagination-previous" href="{{ pagination.prev.link }}">Previous</a>
        {% else %}
                <a class="pagination-previous" disabled>{{ __('Previous', 'calmar-lite') }}</a>
        {% endif %}

        <div class="pagination-list">
            {% for page in pagination.pages %}
                {% if page.link %}
                    <a href="{{ page.link }}" class="pagination-link {{ page.class }}">{{ page.title }}</a>
                {% else %}
                    <a class="pagination-link {% if 'current' in page.class %} is-current {% endif %} {{ page.class }}">{{ page.title }}</a>
                {% endif %}
            {% endfor %}
        </div>

        {% if pagination.next %}
                <a class="pagination-next" href="{{ pagination.next.link }}">
                    {{ __('Next', 'calmar-lite') }}
                </a>
        {% else %}
                <a class="pagination-next" disabled>
                    {{ __('Next', 'calmar-lite') }}
                </a>
        {% endif %}
        {% if pagination.pages|last and pagination.pages|last.current != true %}
                <a class="pagination-next" href="{{ pagination.pages|last.link }}">Last</a>
        {% else %}
                <a class="pagination-next" disabled>{{ __('Last', 'calmar-lite') }}</a>
        {% endif %}
    </nav>
{% endif %}

Oh and while we are on it, I recommend making a partial (separate TWIG file) for this, so you can reuse it, instead of repeating yourself (DRY).

Answer 2

After finding myself in this same situation, I decided to gave a detailed answer in case anyone stumbles here:

This is not documented, but digging through the source code and looking at old commits of the documentation itself I found that you can manually generate the pagination for a page with

Timber::get_pagination()

which is a wrapper for

Timber\Pagination::get_pagination()

Skimming through the source of the Pagination class you can see how Timber builds it behind the scenes. The main takeaways are that you can pass the same arguments used by paginate_links or a single integer as the overall "size" argument (for the total number of pages that get shown), as also stated in this issue.

So to answer the question, you can build your custom pagination passing the size parameter (or an array for finer control), store it in the context and use it as usual in the templates

$context['custom_pagination'] = Timber::get_pagination(5);

Answer 3

Working example with custom WP_Query:

$args = [
  'post_type' => 'post',
  'posts_per_page' => 4,
  'paged' => $paged
];
$context['items'] = new Timber\PostQuery($args);
$context['pagination'] = $context['items']->pagination(3);