Using the 'Pagenation', how do I add a class to the selected page number?

Kirby 3 Solved ✅
1

Hello, I’m using the ‘Pagenation’ function with the help of the last time. Thank you!
But I have a question.
After selecting the page number, I’d like to add a class to the selected page number. I want to change the color of the page number of the page I’m looking at. But I don’t know how to add a class. Can you give me a hand?

<?php $pagination = $list->pagination() ?>
			<nav class="numberset">
			  <ul>

			    <?php if ($pagination->hasPrevPage()): ?>
			    <li>
			      <a href="<?= $pagination->prevPageURL() ?>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.84 9.17"><polygon points="0 4.58 6.84 0 6.84 9.17 0 4.58"/></svg></a>
			    </li>
			    <?php else: ?>
			    <li>
			      <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.84 9.17"><polygon points="0 4.58 6.84 0 6.84 9.17 0 4.58"/></svg></span>
			    </li>
			    <?php endif ?>

			    <?php foreach ($pagination->range(10) as $r): ?>
			    <li>
			      <a<?= $pagination->page() === $r ? ' aria-current="page"' : '' ?> href="<?= $pagination->pageURL($r) ?>">
			        <?= $r ?>
			      </a>
			    </li>
			    <?php endforeach ?>

			    <?php if ($pagination->hasNextPage()): ?>
			    <li>
			      <a href="<?= $pagination->nextPageURL() ?>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.84 9.17"><polygon points="6.84 4.58 0 9.17 0 0 6.84 4.58"/></svg></a>
			    </li>
			    <?php else: ?>
			    <li>
			      <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.84 9.17"><polygon points="6.84 4.58 0 9.17 0 0 6.84 4.58"/></svg></span>
			    </li>
			    <?php endif ?>

			  </ul>
			</nav>
2

This already checks if the current pagination page is the same as the range number ($r), so you can use the same logic to add a class.

Alternatively, and without any additional code, you can use the aria-current attribute for styling purposes instead of adding a class name.

1 Like
3

Oh, I didn’t know. Applied successfully. Thank you!