Start Kadence Advanced Query Loop Empty With No Cards

Recently, I worked with a client who wanted a page powered by the Kadence Advanced Query Loop to display content dynamically, but with a twist: the page needed to start empty, showing only a dropdown filter. No query cards should appear until a user selects an option from the dropdown.

This setup is perfect for sites with lots of content, letting users choose what they want to see without overwhelming them upfront.

Here’s how I made it happen using a combination of Kadence settings and a bit of custom JavaScript.

Step 1: Set Up the Advanced Query Loop

First, add the Advanced Query Loop block to your page. In the block settings, configure it to pull in the content you want—like posts, custom post types, or anything else your site uses. For my client, we were working with a custom post type, but this works with standard posts too. Choose a layout for your query cards (like a grid or list) and set up the initial query parameters, such as post type or taxonomy, but don’t worry about filtering yet—we’ll handle that next.

The key here is that the loop will initially show all items matching your query. We’ll override this behavior later to start empty, so for now, just get the basic structure in place.

Step 2: Add a Dropdown Filter

Inside the Advanced Query Loop block, add a “Filter – Dropdown” block. This will let users filter the query results. In the filter settings, choose the taxonomy or field you want to filter by—say, categories, tags, or a custom taxonomy. For my client’s project, we used a custom taxonomy to categorize content, but you can adapt this to your needs.

Set the dropdown to “Hide items when result count is zero” if you don’t want empty options showing up, and tweak the display settings (like showing result counts) to match your design. At this point, the dropdown will work, but the query cards will still load immediately. Let’s fix that.

Step 3: Make the Query Loop Start Empty

Out of the box, Kadence doesn’t have a built-in option to start the query loop empty. To achieve this, we need a little custom JavaScript to hide the query cards until a dropdown selection is made. Here’s how to do it:

Add a custom CSS class to your Advanced Query Loop block. In the block settings, go to the “Advanced” tab, and under “Additional CSS Class(es),” enter something like custom-empty-query. This gives us a hook to target with our script.

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Hide query cards on page load
    const queryLoop = document.querySelector('.custom-empty-query .kb-query-card-wrapper');
    if (queryLoop) {
        queryLoop.style.display = 'none';
    }

    // Show cards when dropdown changes
    const dropdown = document.querySelector('.custom-empty-query .kb-query-filter-dropdown select');
    if (dropdown) {
        dropdown.addEventListener('change', function() {
            queryLoop.style.display = 'block';
        });
    }
});
</script>

Copy this script and add it to your site. You can place it in a custom HTML block at the bottom of the page, or better yet, enqueue it properly in your theme’s functions.php file or a custom plugin. The script does two things: it hides the query cards when the page loads, and it shows them once a dropdown selection is made. Note that .kb-query-card-wrapper and .kb-query-filter-dropdown select are Kadence-specific classes—double-check your site’s HTML structure in the browser inspector to ensure they match.

Step 4: Test and Fine-Tune

Save your page and test it in a browser. You should see only the dropdown filter at first. When you select an option, the query cards should appear, filtered based on your choice. If the cards don’t show up or the filter behaves oddly, check the browser console for JavaScript errors and adjust the class names in the script if needed.

For my client, we also styled the dropdown to stand out and added a placeholder option like “Select an option” to make it clear users need to interact with it. You can do this in the filter block settings or with custom CSS.

Bonus: Enhancing the Experience

If you want to take it further, you could modify the script to reset the query cards to hidden when the dropdown returns to a “no selection” state (if your dropdown includes a default blank option). Or, pair this with Kadence’s AJAX filtering (if available in your version) for a smoother, no-page-reload experience. For my client’s site, we kept it simple, but these tweaks could elevate it depending on your needs.

This approach worked perfectly for delivering a clean, user-driven content experience. It’s a lightweight solution that doesn’t require heavy custom coding, making it accessible even if you’re not a JavaScript pro.