# I'd like to make a 'page number' for the pagenation

**URL:** <https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500>\
**Category:** Questions\
**Tags:** v3\
**Created:** [June 4, 2021, 1:59pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500 "2021-06-04T13:59:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![dayoung\_jung](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dayoung_jung/32/10529_2.png) [@dayoung\_jung](https://forum.getkirby.com/u/dayoung_jung)\
**Post date:** [June 4, 2021, 1:59pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500/1 "2021-06-04T13:59:13Z")

</div>

Hello, I have a question.  
I have to use ‘Pagenation’.  
This is the link that I’m currently testing.  
[http://client.1-2-3-4-5.studio/dy/kr/dy-auto/public-disclosure](http://client.1-2-3-4-5.studio/dy/kr/dy-auto/public-disclosure)

As shown in the image below, I want the page number to be shown as a number of pages. For example, if it’s 3 pages, 1, 2, 3.  
However, there are only ‘previous page’ and ‘next page’ buttons now.

 ![스크린샷 2021-06-04 오후 10.48.32](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/4/4ba43accab8fed87425de489653f7d96d994d3a1.jpeg)

The second question is, I’d like to put a number on each item. There are 10 posts on one page, numbered from 1 to 10, but on the second page, it doesn’t start from 11, it starts from 1 again.

Can anyone give me a hand?  
Please give me some advice…!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [June 4, 2021, 2:10pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500/2 "2021-06-04T14:10:13Z")

</div>

Regarding your first question, you can use `$pagination->range()`: [Pagination | Kirby CMS](https://getkirby.com/docs/cookbook/templating/pagination#range-pagination-with-a-link-for-each-page)

Second question: How do you generate those numbers? Please provide your template code.

---

<div class="post-metadata">

**Author:** ![dayoung\_jung](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dayoung_jung/32/10529_2.png) [@dayoung\_jung](https://forum.getkirby.com/u/dayoung_jung)\
**Post date:** [June 4, 2021, 2:31pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500/3 "2021-06-04T14:31:07Z")

</div>

> [@texnixe](#):
>
> How do you generate those numbers? Please provide your template code.

First of all, thank you very much for the answer to the first question. I solved the problem! Thank you.

As for the second question, I don’t know what ‘template code’ means. I made the item number of the test link like this…!  
But this way, every page starts at number one.  
I want to know how to start with 11 from page 2.  
Is there a way to use it in Kirby?

//// HTML ////

```auto
< li>
< span class="number">< /span>
< span class="listsubject"><?= $item->urltexts() ?>< /span>
< span class="downloadpdf">< a href="<?= $item->pdffiles() ?>" target="_blank" download="">Download PDF</a>< /span>
< /li>

```

//// CSS ////

```auto
.number::before {
    counter-increment: numbering;
    content: counter(numbering);
    width: 25%;
    display: inline-block;
}

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [June 4, 2021, 2:41pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500/4 "2021-06-04T14:41:19Z")

</div>

Ok, the stylesheet cannot possibly know anything about the items on other pages, so this approach won’t work here. I’d do this with PHP:

What I wanted to see is the PHP code, in particular the foreach loop that shows me what you are looping through?

---

<div class="post-metadata">

**Author:** ![dayoung\_jung](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dayoung_jung/32/10529_2.png) [@dayoung\_jung](https://forum.getkirby.com/u/dayoung_jung)\
**Post date:** [June 4, 2021, 2:52pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500/5 "2021-06-04T14:52:03Z")

</div>

> [@texnixe](#):
>
> Ok, the stylesheets cannot possibly know anything about the items on other pages, so this approach won’t work here. I’d do this with PHP:
> 
> What I wanted to see is the PHP code, in particular the foreach loop that shows me what you are looping through?

I’m sorry… Should I show you like this?

```auto
		<ul id="listPage">
			<?php foreach ($list = $page->children()->paginate(10) as $item): ?>
		        <li>
		            <span class="number"></span>
		            <span class="listsubject"><?= $item->urltexts() ?></span>
		            <span class="downloadpdf"><a href="<?= $item->pdffiles() ?>" target="_blank" download>Download PDF</a></span>
		        </li>
		    <?php endforeach ?> 
		</ul>

```

 ![스크린샷 2021-06-04 오후 11.43.43](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/c/cdc66e33571a47347021fba924ca6775914ce847.jpeg)

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [June 4, 2021, 3:04pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500/6 "2021-06-04T15:04:52Z")

</div>

> [@dayoung\_jung](#):
>
> I’m sorry… Should I show you like this?

That’s what I wanted!

You can do it like this:

```auto
<?php $list = $page->children() ?>
<ul id="listPage">
    <?php foreach ($list->paginate(10) as $item) : ?>
        <li>
            <span class="number"><?= $list->indexOf($item) + 1 ?></span>
            <span class="listsubject"><?= $item->urltexts() ?></span>
            <span class="downloadpdf"><a href="<?= $item->pdffiles() ?>" target="_blank" download>Download PDF</a></span>
        </li>
    <?php endforeach ?>
</ul>

```

---

<div class="post-metadata">

**Author:** ![dayoung\_jung](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dayoung_jung/32/10529_2.png) [@dayoung\_jung](https://forum.getkirby.com/u/dayoung_jung)\
**Post date:** [June 4, 2021, 3:14pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500/7 "2021-06-04T15:14:32Z")

</div>

I tried other ways before posting here, but couldn’t find a solution. I’m just starting to learn Kirby, so it’s still difficult.  
Thank you so much for helping me solve both problems!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [June 4, 2021, 3:16pm UTC](https://forum.getkirby.com/t/id-like-to-make-a-page-number-for-the-pagenation/22500/8 "2021-06-04T15:16:17Z")

</div>

We are always here to help, welcome to Kirby!