# Pagination in Tab Panel?

**URL:** <https://forum.pinegrow.com/t/pagination-in-tab-panel/2427>\
**Category:** Pinegrow WP\
**Created:** [November 21, 2018, 4:59am UTC](https://forum.pinegrow.com/t/pagination-in-tab-panel/2427 "2018-11-21T04:59:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rane\_mstsage](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rane_mstsage/32/1328_2.png) [@rane\_mstsage](https://forum.pinegrow.com/u/rane_mstsage)\
**Post date:** [November 21, 2018, 4:59am UTC](https://forum.pinegrow.com/t/pagination-in-tab-panel/2427/1 "2018-11-21T04:59:21Z")

</div>

I am working on my site, I have created a loop inside tabpanels so that on the front page users can select, Like Latest, videos, and more. the loops work fine. However I would either like to add pagination or ajax with a load more button. Is there an easy way? I started this with the Starter Theme 2.

To see what i got so far, [https://www.mstsage.com](https://www.mstsage.com)

---

<div class="post-metadata">

**Author:** ![rane\_mstsage](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rane_mstsage/32/1328_2.png) [@rane\_mstsage](https://forum.pinegrow.com/u/rane_mstsage)\
**Post date:** [November 22, 2018, 6:45pm UTC](https://forum.pinegrow.com/t/pagination-in-tab-panel/2427/2 "2018-11-22T18:45:49Z")

</div>

Current Workaround I found was to use Ajax Load More, and add a do\_shortcode underneath each with the correct loop settings.

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [November 23, 2018, 4:24pm UTC](https://forum.pinegrow.com/t/pagination-in-tab-panel/2427/3 "2018-11-23T16:24:31Z")

</div>

Visited your site, Kenneth (rane\_mstage)… really nice layout and organization of content, especially liked the brilliant, crisp images. I also like the way you did the tabpanels. You mentioned “created a loop inside tabpanels.” Could you please explain how you did this is and what coding you used. Is this a feature of Starter Theme 2? (I’m assuming you didn’t use iFrames)?

I’ve been using iFrames with Javascript & CSS to have selected tabs open related panels – an alternative method would be nice to learn.

---

<div class="post-metadata">

**Author:** ![rane\_mstsage](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rane_mstsage/32/1328_2.png) [@rane\_mstsage](https://forum.pinegrow.com/u/rane_mstsage)\
**Post date:** [November 23, 2018, 7:34pm UTC](https://forum.pinegrow.com/t/pagination-in-tab-panel/2427/4 "2018-11-23T19:34:22Z")

</div>

Thank you, so the way I did the loop, was I created a div inside the panel, the div contains the loop. Then I used the article tag to make the loop content (though I did use some custom functions for the Date). My biggest complaint right now with Bootstrap 4, is I can’t create a break in content and put another tab panel linked together. It was possible in Bootstrap 3, but bootstrap 4 lost that feature.

---

<div class="post-metadata">

**Author:** ![rane\_mstsage](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rane_mstsage/32/1328_2.png) [@rane\_mstsage](https://forum.pinegrow.com/u/rane_mstsage)\
**Post date:** [November 23, 2018, 7:42pm UTC](https://forum.pinegrow.com/t/pagination-in-tab-panel/2427/5 "2018-11-23T19:42:24Z")

</div>

Also, I want to clarify the base theme is the Starter Theme 2, though I am still customizing it to my liking. I am looking into adding a Gutenberg stylesheet so that the styles match up, as well as archive pages that match my front-page.