Tutorials

Create a Paginated Custom Post Query in Builderius

Elvis Krstulović
infinite loop sculpture

If you’ve been using WordPress for a while, you’ve probably encountered WordPress post queries. It is also known as The Loop, Post Loop, Post List, Post Query, or WP Query. The WordPress posts query retrieves a list of posts from the WordPress database for display as a list, grid, or similar. We can display posts based on various arguments, such as their category (or taxonomy term), type, and date range. As is often the case, the list of posts may contain 50, 100, or 10000 posts. Because of this, we split the results into pages and show a certain number of posts per page.


You can create such lists of posts and design them with Builderius. We will focus on getting a list of desired posts and adding pagination to them and leave the design of the posts query for a future tutorial.

Let’s create the post query

1. Go to Builderius Documentation

2. Get the sample query from documentation

Click on Settings > Data Variables > Query to DB (GraphQL) > Examples > Posts and Pages

Step 2 screenshot

3. Scrol to the Section “How to get the pagination for custom query posts”

Step 3 screenshot

This is the code I have copied

query {
  current_page: superglobal_variable(variable: "GET", key: "mypage", fallback: 1, private: true)
  posts (
    query: {
      author: 1,
      paged: "{{current_page}}"
    }
  ) {
    nodes {
      post_title
      post_content
      ..................
    },
    pagination (
      query: {
        paged_query_var_name: "mypage"
      }
    )
  }
}

4. In Builderius, create data variable

Step 4 screenshot

5. In Data Variables section, click on Edit or add Data Variables

Step 5 screenshot

6. New GraphQL datavar

Step 6 screenshot

7. Paste the code snippet from Documentation

After you paste the same code, you need to edit it so it fits your needs. Editor has autocomplete and autosuggestions to help you on your way. For example I have edited the line 6 to define the post type as posts only.

Step 7 screenshot

8. Go back to modules to display this data

I have created my structure like this:
section > collection > template > heading (oversiplified structure but works)
To display the title of each post “dynamically” write this “shortcode”

{{{post_title}}}

Now we also need to add pagination:
I have added a RawHTML module and renamed it to “Pagination” for clarity when I view the structure panel. Pagination module has to be directly inside the section but after the Collection, if it was inside the collection it would repeat after each post title.

Step 8 screenshot

9. Click on Collection module, then add data from query

Step 9 screenshot

10. Click on the DB icon in “data-content” section

Step 10 screenshot

11. Select your datavar, then click on “nodes” item and copy data

In this tutorial the datavar we created is called “postsPaginated” so we select that.

Step 11 screenshot

12. Paste content from clipboard into text area of the Collection module

Post titles should now appear

Step 12 screenshot

13. Now lets add pagination the same way.

Select the RawHTML module in the structure panel, and click on the DB icon.

Step 13 screenshot

14. Copy the pagination data to your clipboard

Step 14 screenshot

15. Paste clipboard content into RawHTML content area

Step 15 screenshot

16. DONE!

Congratulations, you have created your post loop. Next step, let’s design it to look like we want.

All posts

You might also like

Tutorials Use case of sardiniaselection.com
Vitalii Kiiko
Features, Releases Builderius free integrations with ACSS and Core Framework
Elvis Krstulović

Cookie settings

Our website uses some essential cookies to function well. With your permission, we would like to set up some additional cookies to improve your experience. Our Privacy Policy