0

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: enter image description here

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

0

This is how mine looks: enter image description here

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).

  • Thanks for this. We actually had this resolved last week. Also, I have got it in a partial ;). Big fan of partials! – Jay Sep 10 at 8:59
  • Partials are pretty nice :D I kind of tend to not create them however...for some bad reason i guess... – frizzant Sep 10 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.