WP Grid Builder is a powerful tool for displaying content dynamically in WordPress. In this tutorial, I’ll show you how I integrated pages into my WP Grid Builder grids, enabling me to sort and filter not only blog posts but also my course sales pages and other content pages.
By the end of this tutorial, you’ll learn how to:
✅ Add categories and tags to pages (since WordPress doesn’t support them by default).
✅ Use WP Grid Builder to display both pages and posts together.
✅ Create facets to filter content dynamically based on categories and tags.
Step 1: Adding Categories and Tags to Pages
By default, WordPress does not allow pages to have categories or tags—they are only available for posts. However, we can enable this functionality with a simple solution.
1. Install a Lightweight Plugin
To add category and tag support for pages:
- Install the plugin Pages with Category and Tag from the WordPress repository.
- Activate the plugin, and now your pages will have the same taxonomy options as posts.
💡 Alternative Option: You could add this functionality with a custom PHP function in functions.php, but using a lightweight plugin is quicker and easier.
2. Assign Categories and Tags to Pages
Once the plugin is activated:
- Go to Pages → Edit a Page.
- You’ll now see the Categories and Tags section available just like posts.
- Assign relevant categories (e.g., “Courses”) and tags (e.g., “HighLevel, SureCart”) to your pages.
Now, your course sales pages, resource pages, or other content pages can be categorized alongside blog posts.
Step 2: Creating a WP Grid Builder Grid for Both Posts and Pages
Now that we’ve added categories and tags to our pages, we need to create a WP Grid Builder grid that displays both pages and posts in a single layout.
1. Create a New Grid
- Go to WP Grid Builder → Grids → Add New Grid.
- Name the grid “Courses and Tutorials” (or something relevant).
2. Choose the Right Content Source
In the grid settings:
- Set Content Source to Posts (this includes both posts and pages).
- Under Post Types, select both Posts and Pages.
3. Set the Taxonomy Filters
To ensure only relevant content appears in the grid:
- Under Taxonomies, select the categories you want to include.
- In my case, I included:
- Tutorials (for blog posts)
- Comparison (for blog posts)
- Course (for course pages)
- Tech Stack (for general guides)
With this setup, WP Grid Builder will now treat pages and posts the same, allowing them to display within the same grid.
Step 3: Creating Facets for Filtering Posts and Pages
Facets in WP Grid Builder allow users to filter content by category, tag, or custom criteria. Now that our grid includes both posts and pages, we want to create facets that let users toggle between tutorials and courses dynamically.
1. Creating a Facet for Course and Tutorial Sorting
- Navigate to WP Grid Builder → Facets → Add New Facet.
- Name it whatever you want (e.g., “Tutorials” and “Courses”).
- Set Facet Action to Filter Content.
- Set Filter Type to Buttons.
- Choose Data Source: Posts and filter by Categories.
- Include only the relevant categories (e.g., “Tutorials” and “Courses”).
This facet will create a toggle that allows users to switch between course sales pages and tutorial blog posts.
2. Creating a Tag-Based Facet for Filtering by Tool
I also wanted users to filter content based on the tools I teach, such as HighLevel, SureCart, or Thrive Apprentice.
To achieve this:
- Create a new facet and name it.
- Set Facet Action to Filter Content.
- Set Filter Type to Buttons or Dropdown (I used buttons).
- Set Data Source to Posts and filter by Tags.
- Order results by Choice Count (so more frequently used tags appear first).
- Allow Multiple Selections so users can filter by multiple tools at once.
💡 Example Use Case:
If a user selects “HighLevel” and “SureCart”, they will only see tutorials and courses that match both tags.
3. Creating a Reset Button for Facets
To give users an easy way to reset filters:
- Go to Facets → Add New Facet.
- Name it Reset Button.
- Set Facet Action to Reset Filters.
- Enable Reset All Facets.
Adding this button ensures that users can quickly return to the default state of the grid.
Step 4: Adding a Search Bar for Posts and Pages
To further enhance navigation, I added a search facet so users can find content by keyword.
- Create a new facet and name it Search Tutorials.
- Set Facet Action to Filter Content.
- Set Filter Type to Search Field.
- Choose WordPress as the search source.
- Set the minimum character requirement to 1.
- Enable Search Relevancy for better results.
This allows users to instantly find content within the WP Grid Builder grid without loading a separate search page.
Step 5: Implementing the Grid & Facets on Your Site
Now that we’ve built our grid and facets, we need to display them on the website.
Option 1: Using the WP Grid Builder Shortcode
- Copy the grid’s shortcode (e.g.,
[wp_grid_builder id="123"]). - Paste it into any Gutenberg block, Elementor section, or theme template.
Option 2: Embedding Facets Above the Grid
- Copy the facet shortcodes (found in WP Grid Builder → Facets).
- Paste them on the same page as the grid.
Final Thoughts: Why Use WP Grid Builder for More Than Just Posts?
By default, WordPress limits content organization to posts, but WP Grid Builder allows you to:
✅ Include pages, posts, or custom post types in a single grid.
✅ Filter content dynamically with categories, tags, and facets.
✅ Create an interactive content browsing experience for users.
This method is perfect for:
- Displaying tutorials and courses together.
- Organizing resources and knowledge bases.
- Creating landing pages for sorted content.
If you’re looking for an advanced way to display and filter content beyond just posts, WP Grid Builder is an essential tool. 🚀