Page Pagination Using Query Builder

[jcongerton]

Hi All

I was looking at putting pagination on a standard page using the looper provider (query builder). As I understand, this it is not possible to use the std pagination X Theme provides unless you are on an archive or single layout.

With this issue in mind, and with a little help from AI, I have managed to build a function and shortcode to achieve what I required for my site. I thought i would share here. I know some of you hardened coders will be rolling your eyes at the use of AI, but I’m in the process of learning PHP as I come from a Cold Fusion background. So if there are some bits in this that need to be changed please chip in.

Ok for the function, will be best if you use a child theme for this and add this code to functions.php.

    // Pagination for custom post types

    function custom_looper_pagination($atts) {

        $atts = shortcode_atts(array(
  'post_type' => 'post',
    'per_page'  => 2,

        ), $atts, 'looper_pagination');

        $paged = get_query_var('paged') ? intval(get_query_var('paged')) : 1;

        $args = array(

            'post_type'      => sanitize_key($atts['post_type']),

            'posts_per_page' => intval($atts['per_page']),

            'paged'          => $paged,

        );

        $query = new WP_Query($args);

        $total_pages = $query->max_num_pages;

        wp_reset_postdata();

        if ($total_pages <= 1) return '';

        $output = '<ul class="page-numbers">';

        for ($i = 1; $i <= $total_pages; $i++) {

            // Use get_pagenum_link() to generate permalink-friendly URLs

            $url = get_pagenum_link($i);

            $class = 'page-numbers';

            if ($i === $paged) {

                $class .= ' current';

            }

            $output .= '<li><a class="' . esc_attr($class) . '" href="' . esc_url($url) . '">' . $i . '</a></li>';

        }

        $output .= '</ul>';

        return $output;

    }

    add_shortcode('looper_pagination', 'custom_looper_pagination');

The shortcode on the page to go directly under you post listings (can be in another section)

[looper_pagination post_type=“your post type” per_page=“10”]

The post type here must match the query builder post type as well as the query builder page count.

You can also style the pagination by adding the following code to your page css in cornerstone.

/* style the custom pagination */
.page-numbers {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
}

.page-numbers li a {
  display: block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #0073aa;
  transition: background-color 0.3s, color 0.3s;
}

.page-numbers li a:hover {
  background-color: #0073aa;
  color: #fff;
}

.page-numbers li a.current,
.page-numbers li a.current:hover {
  background-color: #005177;
  color: #fff;
  cursor: default;
  pointer-events: none;
  border-color: #005177;
}

That’s about it, hope it helps, this is really a basic form or pagination, but suited my needs. And i could not find anything else that helped me on the subject.

[Ismael]

Hello @jcongerton,

Thanks for reaching out and for sharing this solution. It has also been discussed in the following threads, but you can keep your current implementation if it’s working well for your use case.

– Twig Example: Pagination for Looper Providers (finally!)
– Enforce Cornerstone archive layout over a shortcode/plugin generated loop inside a page?
– Recurring puzzle with Looper Providers using Query Builder (pagination)

Let us know if there’s anything we can help you with

Best regards,

[jcongerton]

Ahh ok, i did not see the enforce cornerstone archive layout, which tells you where the twig layout needs to be placed, probably why mine wasn’t working :-). All good though! I will try the twig version as well, but as you say my one works good for what is needed. Just to make sure the twig option will work on a page not just an archive layout.

[Ismael]

Yes, you can try it anytime when you have a moment. The following documentation should help with the Twig version, and don’t hesitate to reach out if you have more questions: https://theme.co/docs/twig