How to show ‘no results found’ with WP Grid Builder

March 9th, 2024
Tutorials

WP GRIDBUILDER may display a "no results found" message only when we use their own grid functionality, but not when we build the grid ourselves, with the Post List or Post Loop Builder element.

In order to test if there are some results, we can check if the main container has some children, and then display or not a message. We then run the code when the facets are rendered and after the content is appended.

Step 1

Create your own container with your 'no result' message. Just under your Post List or Post Loop element, as it's more obvious to put it there anyway. Add the class .noResults and most importantly, set the display:none , in order to hide it by default.

No Results Container

Step 2

Add a class to your Post List or Post Loop Builder element, so it's also easier to target in the code. Ex: .myPostLoop

Step 3

Using a Snippet Manager like WPCODEBOX (aff link), add this Javascript code:

document.addEventListener("DOMContentLoaded", function () {
window.WP_Grid_Builder && WP_Grid_Builder.on("init", onInit);
function onInit(wpgb) {
wpgb.facets.on("render", checkResults);
wpgb.facets.on("appended", checkResults);
}

function checkResults() {
const container = document.querySelector(".myPostLoop .ee-posts");
const noresult = document.querySelector(".noResults");
if (!container.children.length) {
noresult.style.display = "flex";
} else {
noresult.style.display = "none";
}
}
});

Note that if you already use the code to animate the grid (see tutorial How to Animate a Grid that uses WP Grid Builder Facets ), you can use both code in that way (no need to create 2 snippets then) :

document.addEventListener("DOMContentLoaded", function () {
window.WP_Grid_Builder && WP_Grid_Builder.on("init", onInit);
function onInit(wpgb) {
wpgb.facets.on("appended", onAppended);
wpgb.facets.on("render", checkResults);
wpgb.facets.on("appended", checkResults);
}

function onAppended(posts) {
posts.forEach((element) => {
const article = element.querySelectorAll(".ee-post");
article.forEach(animate);
});
}

function animate(post, index) {
post.style.opacity = 0;

setTimeout(function () {
requestAnimationFrame(function () {
post.style.opacity = 1;
post.classList.add("post-animation");
});
}, index * 60);
}
function checkResults() {
const container = document.querySelector(".myPostLoop .ee-posts");
const noresult = document.querySelector(".noResults");
if (!container.children.length) {
noresult.style.display = "flex";
} else {
noresult.style.display = "none";
}
}
});