Skip to content
WPBits WPBits WPBits Documentation

Grid Master

Grid Master is one of the most versatile widgets in WPBits Pro, enabling you to create custom post loops with full control over query parameters, layout, and content display.

Overview

Section titled “Overview”

Grid Master allows you to display any custom post type (posts, pages, custom post types, or WooCommerce products) in a customizable grid layout with filtering, pagination, and dynamic content injection.

Key Features

Section titled “Key Features”

Query Options

Section titled “Query Options”
  • Source Selection: Choose any post type (posts, pages, CPT, products)
  • Term Filtering: Include, exclude, or filter by taxonomy terms
  • Custom Ordering: Sort by date, title, random, menu order, etc.
  • Advanced Queries: Meta queries, date queries, and author filtering

Layout Controls

Section titled “Layout Controls”
  • Responsive Columns: Set different column counts for desktop, tablet, and mobile
  • Grid Styles: Choose from various grid layouts
  • Custom Output: Use “Custom” format for complete HTML control
  • Element Builder: Build content using individual elements

Advanced Features

Section titled “Advanced Features”
  • Content Injection: Insert ads, CTAs, or custom content between posts
  • Filter Navigation: Dynamic filtering by categories or tags
  • Element Wrappers: Distribute elements across layout sections
  • Pagination: Ajax pagination, load more, or infinite scroll
  • Global Styling: Font and color controls

Basic Setup

Section titled “Basic Setup”

Step 1: Add the Widget

Section titled “Step 1: Add the Widget”
  1. Open a page in Elementor editor
  2. Search for [WPBits] Grid Master in the widgets panel
  3. Drag the widget onto your page

Step 2: Configure Query

Section titled “Step 2: Configure Query”
  1. Go to the Content tab
  2. Under Query:
    • Select your Post Type (Posts, Pages, Products, etc.)
    • Set Posts per Page
    • Choose Order By (date, title, random, etc.)
    • Set Order (ASC or DESC)

Step 3: Filter by Terms

Section titled “Step 3: Filter by Terms”

To display posts from specific categories or tags:

  1. Under Include Terms, select the categories/tags you want
  2. Or use Exclude Terms to hide specific categories
  3. Use Filter by Terms for dynamic filtering options

Step 4: Configure Layout

Section titled “Step 4: Configure Layout”
  1. Under Layout:
    • Set Columns for desktop (1-6)
    • Set Columns (Tablet) for tablets
    • Set Columns (Mobile) for mobile devices
    • Adjust Gap between items

Output Formats

Section titled “Output Formats”

Standard Output

Section titled “Standard Output”

Use pre-built templates:

  1. Select Output Format: Standard
  2. Choose a Template Style
  3. Customize the template styling

Custom Output

Section titled “Custom Output”

For complete control over HTML:

  1. Select Output Format: Custom
  2. Use the Element Builder to add:
    • Featured Image
    • Post Title
    • Post Excerpt
    • Post Meta
    • Custom Fields
    • Read More Link

Element Wrappers

Section titled “Element Wrappers”

Organize elements in different sections:

  1. Create Header Wrapper for top elements (image, category)
  2. Create Body Wrapper for main content (title, excerpt)
  3. Create Footer Wrapper for bottom elements (date, author, read more)

Dynamic Filtering

Section titled “Dynamic Filtering”

Enable category/tag filters for your grid:

  1. Enable Show Filters
  2. Choose Filter Type:
    • Categories
    • Tags
    • Custom taxonomies
  3. Select Filter Style:
    • Buttons
    • Dropdown
    • Checkboxes
  4. Enable Ajax Filtering for no-reload filtering

Filter Customization

Section titled “Filter Customization”
  • “All” Label: Customize the “All” filter text
  • Filter Order: Set the order of filter terms
  • Active Style: Customize styling for active filters

Content Injection

Section titled “Content Injection”

Insert custom content between posts:

Ad Injection Example

Section titled “Ad Injection Example”
  1. Enable Content Injection
  2. Set Inject After Position: 3 (injects after 3rd post)
  3. Add your HTML/Shortcode for the ad
  4. Style the injected content

Multiple Injections

Section titled “Multiple Injections”
  • Inject content at multiple positions
  • Use different content for each position
  • Maintain grid layout with injected items

Pagination Options

Section titled “Pagination Options”

Standard Pagination

Section titled “Standard Pagination”

Classic numbered pagination:

  1. Enable Pagination
  2. Select Type: Numbers
  3. Customize pagination styling

Load More Button

Section titled “Load More Button”

Ajax load more functionality:

  1. Select Type: Load More
  2. Customize button text and style
  3. Set posts to load per click

Infinite Scroll

Section titled “Infinite Scroll”

Auto-load on scroll:

  1. Select Type: Infinite Scroll
  2. Set Loading Text
  3. Configure scroll offset

Advanced Query Examples

Section titled “Advanced Query Examples”

Recent Posts from Multiple Categories

Section titled “Recent Posts from Multiple Categories”
Query Settings:
- Post Type: Posts
- Include Terms: Design, Development
- Order By: Date
- Order: DESC
- Posts per Page: 9

Random Products on Sale

Section titled “Random Products on Sale”
Query Settings:
- Post Type: Products
- Include Terms: On Sale (if using categories)
- Order By: Random
- Posts per Page: 6

Custom Post Type with Custom Fields

Section titled “Custom Post Type with Custom Fields”
Query Settings:
- Post Type: Portfolio
- Order By: Menu Order
- Display custom fields using Element Builder

Styling

Section titled “Styling”

Global Styles

Section titled “Global Styles”

Under the Style tab:

  • Typography: Set fonts for titles, excerpts, meta
  • Colors: Set text colors, hover colors, background colors
  • Spacing: Adjust padding and margins
  • Borders: Add borders and border radius

Element-Specific Styles

Section titled “Element-Specific Styles”
  • Style each element independently
  • Hover effects for images and titles
  • Transition animations

Performance Tips

Section titled “Performance Tips”
  1. Limit Posts per Page: Don’t load too many posts initially
  2. Use Pagination: Better UX than showing 100 posts
  3. Optimize Images: Use appropriate image sizes
  4. Cache: Use caching plugins for better performance
  5. Lazy Loading: Enable for images

Use Cases

Section titled “Use Cases”

Blog Grid

Section titled “Blog Grid”
  • Display latest blog posts
  • Category filtering
  • Pagination for archives

Portfolio Grid

Section titled “Portfolio Grid”
  • Showcase projects
  • Filter by project type
  • Custom layout per project

Product Grid

Section titled “Product Grid”
  • Display products (use WooCommerce Grid Master instead for better WooCommerce integration)
  • Sale item filtering
  • Ajax filtering by category

Team Members

Section titled “Team Members”
  • Display team member CPT
  • Filter by department
  • Custom fields for position, email

Troubleshooting

Section titled “Troubleshooting”

No Posts Showing

Section titled “No Posts Showing”
  • Check that posts exist for selected post type
  • Verify term filters aren’t excluding all posts
  • Check post status (published vs draft)

Filters Not Working

Section titled “Filters Not Working”
  • Ensure Ajax Filtering is enabled
  • Check that posts have assigned terms
  • Clear cache

Layout Issues

Section titled “Layout Issues”
  • Verify column settings for all breakpoints
  • Check gap settings
  • Ensure custom CSS isn’t conflicting
Section titled “Related Widgets”

Next Steps

Section titled “Next Steps”