Can I use the Gutenberg Query Loop with custom post types for gated resources?

Yes, the Query Loop block is fully compatible with any registered public custom post type. Simply select your desired custom post type in the Query Loop's settings to display your gated resources.

How does the 'id="current"' attribute work within the Query Loop?

When the Gatekeeper Pro [resource_card] shortcode is placed inside a Gutenberg Query Loop, setting id="current" automatically tells the shortcode to use the ID of the specific post currently being rendered by the loop, making it dynamic.

Will gated resources still show the access request form inside the Query Loop?

Yes, if a resource is locked by Gatekeeper Pro and the visitor does not have an approved token, the resource card within the Query Loop will display a 'Request Access' button. Clicking this button will open the native AJAX access request form.

Can I filter the gated resources displayed in the Query Loop?

Absolutely. The Query Loop block offers extensive filtering options. You can filter resources by categories, tags, authors, keywords, or date ranges directly from the block's sidebar settings.

Is the resource card shortcode customisable?

Yes, the [resource_card] shortcode has several attributes to control its display, such as show_thumbnail , show_excerpt , show_lock_overlay , show_badges , and button_text . You can also apply custom CSS to further style its appearance.

How do I create a resource library in WordPress?

To create a resource library in WordPress, use custom post types for your resources, organise them with taxonomies, and display them dynamically using the Gutenberg Query Loop block or a page builder's loop functionality. For gated content, integrate a plugin like Gatekeeper Pro.

What is the best way to gate content in WordPress?

The best way to gate content in WordPress depends on your needs. For simple lead generation and secure file/video distribution without user accounts or payments, a plugin like Gatekeeper Pro is ideal. For memberships or subscriptions, dedicated membership plugins are better suited.

Can I protect downloads without a membership plugin?

Yes, you can protect downloads without a full membership plugin. Tools like Gatekeeper Pro allow you to secure files and videos, manage access requests, and issue secure, time-limited tokens to approved users without requiring WordPress user accounts or payments.

How do I display custom post types in a grid in Gutenberg?

You can display custom post types in a grid in Gutenberg using the Query Loop block. Add the Query Loop, select your custom post type, then design the 'Post Template' within the loop to define how each item appears, often using blocks like Post Title, Featured Image, and Excerpt, or shortcodes.

How to Display Gated Resources in a Gutenberg Query Loop

Introduction

Creating a comprehensive resource library is a common requirement for many WordPress websites, especially for businesses, agencies, or educational platforms. These libraries often feature a mix of publicly available and restricted content, such as whitepapers, case studies, videos, or premium downloads. Manually building a listing page for dozens or hundreds of resources quickly becomes unmanageable.

The Gutenberg Query Loop block offers a powerful, native solution for dynamically displaying content. When combined with a robust content gating plugin like Gatekeeper Pro, you can effortlessly build resource listing pages that showcase both accessible and locked materials, all within a professional grid layout. This article will guide you through the process, providing a step-by-step approach to integrate gated resources into your Query Loop.

Understanding Gated Resources and Query Loops

Before diving into the implementation, let's clarify the core components we'll be working with:

What Are Gated Resources?

Gated resources are pieces of content — files, videos, or even entire pages — that require a visitor to complete an action, such as submitting a form, to gain access. With the WordPress Gatekeeper Pro plugin, you can easily "lock" any post or custom post type. When a resource is locked, visitors see an Access Request form instead of the content itself. Upon approval, they receive a secure, time-limited Token to view or download the item.

Gatekeeper Pro simplifies the entire workflow, from protecting downloads and videos to managing Access Requests and issuing secure Tokens, all without requiring users to create an account or log in. It's ideal for lead generation, client portals, or exclusive content distribution.

What is the Gutenberg Query Loop?

The Gutenberg Query Loop block is a dynamic content display tool introduced in WordPress. It allows you to fetch and display a list of posts or custom post types based on various criteria (e.g., category, tag, author, date). Crucially, it provides a "Post Template" within the loop, which you can design once, and that design will be applied to every item fetched by the query. This makes it perfect for creating grids of articles, products, or in our case, Resource Cards.

Prerequisites for This Tutorial

To follow along with this guide, you'll need a few things set up on your WordPress site:

WordPress Installation: A functional WordPress 5.9 or newer installation.
Gutenberg Editor Knowledge: Basic familiarity with using the Gutenberg block editor.
Gatekeeper Pro Plugin: The Gatekeeper Pro plugin installed and activated on your site.
Gated Content: At least a few posts or custom post type items (e.g., 'Resources') that have been marked as "Locked" using Gatekeeper Pro, with attached files or videos.

Step-by-Step: Displaying Gated Resources in a Query Loop

Let's walk through the process of building your dynamic resource listing page.

Step 1: Prepare Your Gated Content with Gatekeeper Pro

First, ensure you have content ready to be displayed. This involves creating the posts or custom post types (CPTs) that will serve as your resources and marking them as Locked with Gatekeeper Pro.

Navigate to Posts > Add New or to your custom post type (e.g., Resources > Add New).
Create your resource content: add a title, description, and a featured image. The featured image will serve as the thumbnail for your Resource Card.
In the Gatekeeper Pro meta box (usually found in the sidebar or below the content editor), tick the Locked checkbox.
Attach the file or video you wish to protect. For files, click "Select File" and upload or choose from your media library. For videos, use the "Gated Video" field.
Save or Publish your resource.
Repeat this process for all the resources you want to include in your listing.

Step 2: Create Your Resource Card Template

The core of displaying gated resources within a Query Loop is the Gatekeeper Pro [resource_card] shortcode. This shortcode automatically renders a complete card, showing a thumbnail, title, description, and an appropriate action button (either "Request Access" or "View/Download" if the user already has a Token). It also applies a lock overlay if the resource is gated and the user doesn't have access.

For use within a Query Loop, the [resource_card] shortcode can intelligently detect the current post's ID. This means you don't need to manually pass the ID for each resource; the loop handles it dynamically.

To create a re-usable template block:

Go to Appearance > Editor (for block themes) or create a new reusable block. Alternatively, you can directly add this shortcode within the Query Loop's Post Template in the next step.
Add a Shortcode block or a Custom HTML block.
Insert the [resource_card] shortcode. A basic example:
```
[resource_card id="current" show_thumbnail="true" show_lock_overlay="true" show_badges="true" show_excerpt="true" button_text="Request Access"]
```
Let's break down these attributes:
- id="current": This is crucial. When placed inside a Query Loop, "current" tells the shortcode to use the ID of the post currently being processed by the loop.
- show_thumbnail="true": Displays the post's featured image.
- show_lock_overlay="true": Shows the lock icon overlay if the resource is gated and access is not granted.
- show_badges="true": Displays "Locked" or "Unlocked" badges.
- show_excerpt="true": Displays the post's excerpt or a truncated version of its content.
- button_text="Request Access": Customises the text on the action button. This text will intelligently change to "View Resource" or "Download File" once access is granted.
You can wrap this shortcode in a Group or Column block for better layout control within the Query Loop's Post Template.

Step 3: Add a Query Loop Block to Your Page

Now, let's add the Query Loop to your desired page.

Edit the page where you want to display your resource listing (e.g., a "Resources" page).
Click the + icon to add a new block.
Search for "Query Loop" and select the block.
WordPress will prompt you to choose a pattern or start blank. For this tutorial, selecting Start blank and then choosing a layout like "Grid" or "Columns" is a good starting point.

Step 4: Configure the Query Loop and Insert Your Resource Card

This is where we connect the Query Loop to your gated content and apply the Resource Card template.

Select Your Post Type: In the Query Loop's settings sidebar (usually on the right), locate the "Query" section.
- Under "Post type", select the post type where your gated resources reside (e.g., "Posts", or a custom post type like "Resources").
- You can further refine your query by category, tag, author, or keywords if needed.
Design the Post Template: Within the Query Loop block itself, you'll see a nested "Post Template" block. This is the area where you define what each item in the loop will look like.
- Click on the Post Template block. This block acts as a container for the content that will be repeated for each post in your query.
- Inside the Post Template, add a Shortcode block.
- Paste the [resource_card] shortcode you prepared earlier:
```
[resource_card id="current" show_thumbnail="true" show_lock_overlay="true" show_badges="true" show_excerpt="true" button_text="Request Access"]
```
  The `id="current"` attribute is critical here, ensuring each card displays the correct resource from the loop.
- You can also add other blocks around the shortcode if you wish, such as a "Group" block to apply background colours or padding, or even a "Columns" block if you want to further subdivide the card's layout. However, the [resource_card] shortcode is designed to be comprehensive, often requiring minimal additional blocks.
Adjust Display Settings: Customise the layout of your Query Loop:
- In the Query Loop settings, adjust the number of columns if you chose a grid layout.
- Set the number of items per page.
- Enable or disable pagination as required.
Save Your Page: Update or publish your page to see the changes.

Step 5: Customise the Resource Card Appearance (CSS)

While Gatekeeper Pro's Resource Card is styled out-of-the-box, you'll likely want to match it to your theme's aesthetics. The shortcode outputs semantic HTML, making it easy to target with custom CSS.

Inspect the Resource Card on your live page using your browser's developer tools. Look for classes like .gk-resource-card, .gk-card-image, .gk-card-title, .gk-card-excerpt, and .gk-card-button.

Add your custom CSS:

Go to Appearance > Customise > Additional CSS.

Add your styles, for example:

.gk-resource-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a grid have equal height */
}
.gk-resource-card .gk-card-image img {
    border-radius: 4px;
    margin-bottom: 15px;
}
.gk-resource-card .gk-card-title {
    font-size: 1.5rem;
    colour: #2c3e50;
    margin-top: 0;
}
.gk-resource-card .gk-card-button {
    background-colour: #0073aa;
    colour: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-top: auto; /* Push button to bottom */
}
.gk-resource-card .gk-lock-overlay {
    background-colour: rgba(0, 0, 0, 0.6);
    colour: #fff;
}

Publish your changes.

Step 6: Test Your Gated Resource Listing

After setting up, it's crucial to test your listing page from different perspectives.

As a logged-out user: Visit the page. You should see all gated resources with a lock overlay and the "Request Access" button. Clicking it should bring up the Gatekeeper Pro Access Request form.
As an admin/logged-in user: If you're logged in as an administrator, Gatekeeper Pro typically grants automatic access, so you'll see "View Resource" or "Download File" buttons.
As an approved user: If you've requested and been approved for a specific resource, visit the page again (perhaps in an incognito window with the approval email's access link). The relevant card should show "View Resource" or "Download File" instead of "Request Access".

Advanced Customisation and Best Practices

To further enhance your resource listing page, consider these advanced tips:

Filtering the Query Loop

The Query Loop block allows extensive filtering. You can create separate listing pages for different categories of resources (e.g., "Whitepapers," "Video Tutorials") by applying specific taxonomy filters in the Query Loop settings.

Integrating with Custom Fields

If you're using Advanced Custom Fields (ACF) or other custom meta keys for additional resource metadata (e.g., "Resource Type," "Publication Date"), you can display these within your Post Template. You'd typically add a separate "Post Meta" block or a "Custom Field" block inside the Query Loop's Post Template, *alongside* the [resource_card] shortcode, to display this extra information.

For example, to display a custom field called `resource_type`:

[resource_card id="current" show_thumbnail="true" ...]
<p>Type: <!-- wp:post-meta-field {"key":"resource_type"} /--></p>

Gatekeeper Pro also offers flexible "Field Source" options, allowing it to read Locked status and file attachments directly from ACF fields or custom meta keys, providing seamless integration for developers.

Performance Considerations

For very large resource libraries, ensure your hosting is optimised. The Query Loop itself is efficient, but if you have hundreds of items, consider implementing server-side caching. Gatekeeper Pro is cache-aware and sends appropriate headers to prevent caching of dynamic, Token-sensitive content where necessary, ensuring security without compromising performance for static elements.

Accessibility

Always ensure your Resource Cards and their interactive elements are accessible. Use descriptive alt text for featured images, clear button labels, and ensure keyboard navigation works correctly. Gatekeeper Pro's Native forms are built with accessibility in mind.

Conclusion

By leveraging the power of the Gutenberg Query Loop and the versatility of the WordPress Gatekeeper Pro plugin, you can construct dynamic, professional resource listing pages with ease. This approach not only streamlines content management but also provides a seamless experience for your users, allowing them to discover and request access to your valuable gated content within an intuitive grid layout.

Implementing the [resource_card] shortcode within a Query Loop's Post Template is a robust and developer-friendly method to build sophisticated resource libraries, enabling you to effectively gate and distribute your digital assets while maintaining a polished front-end presentation.