1 0:00:00 there is a very common challenge with query loops with regard to excluding specific items.
So let’s say that you have a services custom post type, you want to query the services into a grid on your services page, but you want to exclude one specific service from showing up on the front end. Or maybe you have a class schedule, and you’re going to query all of the classes into the class schedule, but you wanna be able to exclude one or more of those classes just on a unique one-off basis. How do you actually approach this?
Well, we don’t wanna have to delete the piece of content from the backend. We don’t wanna have to turn that content from published content into draft content. And so those two things are out the window.
We don’t want to go those routes. How do we just change the display of the query loop? Now, Brics actually has a control for this, but I want to show you why it’s not a great approach, and I want to show you what the solution actually is.
And it’s pretty easy, so let’s go ahead and hop in. So what you’re looking at right now is a class schedule. This is actually from frames at schedule section alpha.
And this puts cards in a, basically it’s a grid. It uses a bunch of grid magic to create these weekday columns and then assign the cards based on their weekday. And then it orders them by their time and it does a lot of fancy stuff.
Really, really, really powerful frame. But this uses a query loop. So all of our classes are on the backend.
I’ll go ahead and jump back here and you’ll see classes. Here’s all of our classes. You open up a class and you’re gonna see there’s a bunch of custom fields.
Here’s where you set the weekday, the time, the time zone, the duration. You can even relate instructors or people to the class. You can relate another post or post type.
You can relate locations. And by the way, with this frame, this isn’t a sales pitch for frames, but I just, you know, it’s nice to know. We give you all of the custom fields, the custom post type in an export file.
All you have to do is upload it and everything is set up for you and ready to go. So if you need a class schedule kind of thing or event schedule kind of layout like this, this one knocks it out of the park. Now, we have this one looped right here.
So if you look at this, there’s only one card in this entire table and it is a query loop. It is looping through all of the classes in the classes CPT. We can see that right there.
Okay. All fine and dandy. Now I want you to use your imagination for a second.
Imagine that now we are on a different page of the website and we’ve decided you know what we need to do on this page. We need to query all of our classes. So we have another query loop down here and this is just straight up.
Look, I’ll show you it’s one item right here querying the entire list of Classes now keep your imagination going. We’re on a different page. Now.
This is a third page of the website This is very important for the context of what we’re going to talk about and this is like a single class page And we’ve got all the information about the class and then below that guess what we have? Related classes. Yet another query loop situation.
All pulling from the same custom post type. But it’s three different loops on three different pages. And now the client comes along and the client says, hey Kevin, by the way, we’re gonna get rid of our advanced development class for a while.
Can you go ahead and remove that advanced development class from the website? They say the website, which means every one of those loops, all of the loops, okay? So do they want to delete that class?
No, they don’t wanna, because that class may come back, may come back in the future, so we can’t delete it. Should we turn it to draft? No, because they still want people to get information on the class, it’s just going to be listed as closed right now, or just not showing as available on the grid.
Plus, they rank for that class. They don’t want to remove it from the site completely. They don’t want to get rid of the URL and unpublish it, okay?
So we got to retain it on the back end. We just don’t want it showing up in the loop. So what do we do?
What is the approach? Well, Bricks actually has a built-in feature for this, but it’s not what we’re going to actually use. I’m going to show you why.
And I’ve actually seen a lot of people do this. And so I would encourage you to maybe consider a different approach. So we’re going to go in here, and we’re going to click this right here.
And I’m going to scroll down. This is the query loop settings, right? And I’m going to come down here.
Let me see if I can zoom in a little bit. Look at the, here we go. Look at the section called include and exclude, right?
I can go here and remember what we’re doing is excluding advanced development. So I can search, oh, there it is. I’m gonna select it and then look, it removed it.
And people would think, man, job’s done. How could it get, Kevin, how could it get any easier than that? But there’s always a caveat, isn’t there?
There’s always a little hidden issue that we have to address. So I’m gonna go down here. Remember these other loops that are on other pages of the website?
Look, it says advanced development right here. It says advanced development. Uh-oh, and maybe we forgot that those other loops exist because you can’t keep track of every detail on every website for every client.
I mean, we could be editing this site six months from now. And we’re gonna remember every place that we’ve queried classes on the website. This is not, even if we could, even if we could, you could at least admit that we’re opening the door to things getting out of sync, let’s say, okay?
Think about other team members, right? Coming in here and trying to manage this. They may not even know that you created loops for these things on other pages, right?
So to me, this is not a viable approach, going from loop to loop to loop, because now what I have to do is I gotta come down here and do this. I gotta do this. I gotta do the exact same thing, exclude, advance development, and only then will it be gone from that loop.
And then I gotta go to this loop, and I gotta do that again, and however many other loops there are, I gotta keep doing that over and over and over again. And God forbid, God forbid they have to bring that class back, right? Or they wanna hide another class, right?
Now we’re just doing the dance over and over and over again from page to page to page. Does this sound like the life you wanna live? No, absolutely not.
So I’m gonna put that back and I’m gonna come up here to this loop right here and I’m going to put it back here. We’re not going to do the exclusion feature right here. What I propose and what I personally have started doing and by the way this makes perfect sense let me let me go here if you came and looked at this schedule and was like all right we’ve got to remove advanced development right there.
My first thought would be okay let me go to that content in the back end not let me immediately go identify every query loop that’s querying that thing. My brain would much prefer that we go back here to where this content is managed in the content management system, okay? It’s called a content management system for a reason, right?
Okay, so I go back to classes, I go to advanced development, and I would love to see some sort of control right here for controlling whether or not this thing gets output in query loops, okay? That’s what we’re gonna add right now. So watch how easy this is.
We’re gonna go out here, we’re gonna go to advanced custom fields, we’re gonna go to field groups, we’re gonna add new, and I’m gonna call this loops. I’m not gonna call this classes, I’m not gonna assign something to the classes CPT because it turns out this is very valuable functionality. And it turns out that I might want to put this functionality not just on classes, but on services and on team members and on testimonials and on FAQs.
I want it everywhere. I want this ability to selectively hide or show an element in a query loop. I want that available to me at all times and all places in my content management system.
So I’m gonna name this Loops, because that’s what we’re controlling, and I can have multiple controls in here for how loops behave across the website. And I’m gonna come down here under where we assign these custom fields, and I’m gonna say, okay, post type post. I could see myself showing or hiding a blog post from a loop potentially.
I’m gonna say or, and then I’m gonna say page. I mean, I don’t typically loop pages, but I mean, no harm, no foul, right? Okay, and we’re gonna open this up.
Definitely classes. Okay, I got this thing called vehicles because this is just a dummy site. We’ll put it on that too.
And that’s it. We don’t need anything else. But if there were more things, then I could definitely do more things.
Like I said, FAQs, testimonials, what have you. Now, what am I actually gonna add? What is the custom field?
We’re gonna say true or false. And we’re gonna say hide from loops. Is that gonna be true or is that gonna be false?
Now, we don’t want to try to make the default like yes or something like that. That would be, if I put this, show in loops, okay? Show in loops.
Because there is one little caveat to this. If you add this functionality before you add any content to the website, you’re good to go. But if you add this after the fact, none of those posts that this is applied to will actually have this setting in it, like saved in the database, until that page or post is re-saved.
And so you won’t be able to do as much with the logic here. So I’m gonna say hide in loops. That way, if there’s no data, it means I want it to show anyway.
Okay? So that’s kind of what the logic is going to be. So hide from loops.
Only thing I’m going to do is go to presentation, stylize UI. I’m going to go ahead and hit save changes. Now, let’s go over to classes.
Let’s go to advanced development and look in here. Hide in loops. What is this?
Right here. Okay, now I’m able to control visibility from the content in the content management system. And this applies to all of the loops as long as I configure the loops properly when I build them, right?
So I’m gonna go yes, and I’m gonna go update, okay? Now I’m gonna go back here. Keep in mind, nothing has happened yet because we haven’t done anything with our loops, but I’m gonna go ahead and refresh.
Now, we’re gonna go to this first loop right here and we are going to open up the query. All right we’re going to slide down what we are looking for is meta query right here. Okay and this is really like a backdoor into teaching you how meta queries work in query loops but we’re just using a very specific example but there’s so much more you can do.
Same exact process the meta query area basically allows you to manipulate a query loop based on values of custom fields, which is very powerful, very powerful. So I’m gonna hit add meta query right here. And what we need is the key, okay?
What is the key? It’s the ID of the custom field. So I’m gonna hop back here.
Notice the ID right here, hide from loops. That’s the ID of that custom field. I’m gonna drop that in the meta key.
Now we need to think about the logic here, okay? One thing you need to know about ACF true false fields, it outputs a value of 0 or 1. 0 is false, 1 is true.
And so we’ve got to kind of use a little bit of negative logic here. First thing, I’m going to change this from character to numeric because we’re checking a number value, all right? And then the comparison is going to be equal.
And so I’m saying if it’s, actually it’s gonna be not equal because if it’s not equal to one, if it’s not equal to true, I wanna show it because remember true is to hide it. I know this is very, my dyslexia right now is so triggered, so triggered trying to explain this to you. But we’re gonna say one, which is true, is not equal.
It’s not equal to hide, right? We’re gonna show the things that are not equal to hide. All right, that’s probably the best way that I can explain it.
Okay, now I’m gonna just save that. It may not work because we have one more rule to do, but we’re gonna check out and see. Okay, so it all really falls apart here.
And that’s because of the thing I mentioned earlier. We haven’t gone back and resaved all of the classes posts, which means it’s looking to check a value of one, and if it’s not equal to one, then it’s not gonna show anything when there’s no value at all. So we have a little backup query, right?
Same key, we’re checking the same key, and this time we’re just going to say not exist. If the value doesn’t even exist at all, just show the thing by default. Just show it by default.
This way only the things with a value of one will be hidden from the loop. Okay, I’m going to go ahead and save. Going to go ahead and oh, last thing we need to do.
My fault. Down here, very important. Check this out.
Relation and. Right now both of these things have to be true. I just want one or the other has to be true.
I’m gonna hit save. I’m gonna refresh. Guys, look, it’s gone.
It’s not in the loop at all. It’s gone. Now, check this out.
I come down here. Now, I’m about to feature request this, but I would like Bricks to have what amounts to a query preset. Because I want to take this exact situation and like save it to a preset.
And imagine what if I did a bunch of other things in here. I don’t want to do that on every single loop for this stuff. I want to just pick my preset and then I want to move on.
Wouldn’t that be fantastic? I think that would be fantastic. Okay, so I’m going to come down here.
I’m going to go to this loop. We’re going to get a lot of practice. Three different times we get to practice this.
So you should really drill it in. So I’m gonna go meta query. We’re gonna go hide from loops, one, not equal.
And we’re gonna look at the character, I’m sorry, the numeric. Then we’re gonna add another one. We’re gonna say, hey, does not exist.
Okay, not exist. Looking for numeric once again. Or situation, hit save, refresh.
Guess what’s not there, okay? Now, just stay with me, stay with me, we’re not done. I wanna tie this all together right at the end, okay?
Also, ooh, ooh, here’s another idea. I’m sorry, I’m just very ADD today. What if your client is gonna be adding and removing events?
I mean, that’s very possible. That’s why you created all these custom fields to make it so easy for them. They would never be able to edit these query loops, okay?
You’ve got to build the query loops properly like this from the beginning with this logic built in, and then the site is fully maintainable and scalable going forwards. That’s really the power here. So you see me changing these loops individually, and you’re like, Kevin, you just said you didn’t want to have to do that.
No, we only have to do it once, right? Once it’s done, we never have to touch it ever again. But you do have to set it up right the first time, ideally before you put all this content in here, right?
That’s why I’m teaching this methodology so that you can do it before, like at the beginning of the project and not have this problem later on. So I’m going to go here with the query and I am going to say meta query hide from, oh, this is the, okay, let’s go here, here, here. 2
0:15:58 Okay. 1
0:15:59 All right, we’re going to come down and meta query. Hide from loops, one, not equal, numeric, add meta query, key, does not exist, not exists, okay?
Numeric, or, save, refresh, awesome. Now let’s tie it all together. Let’s go manipulate these grids from the content in the content management system.
We never have to touch a loop ever again. So I’m going to go back here, I’m going to go to my classes, and I’m going to say, hey, guess what guys? Good news, advanced development is back.
I’m going to update that, I’m going to come over here, and I’m going to say, bad news for you copywriters, that is not offered right now. And then I’m going to go to UX design, hey, bad news for UX design, your class is not offered either. And then I’m going to go and I’m going to refresh on the front end and those classes have been removed from every single loop across this website.
I never have to touch another loop again when the logic needs to change, when another class has to be hidden and we got to redisplay one of the previously hidden classes. I have full control over individual elements and even better, my client can do this and then when I come back six months I’m not going to be all confused like oh how do we I gotta go loop to loop to loop to loop oh no that’s not the life that I want to live I think this is a much better solution I think this is more scalable more maintainable easier for everybody and all that requires is a little foresight when you’re building these loops in the first place. You gotta know you’re gonna want this logic to exist.
Now you know, because you watched this video. You gotta build it into your loops, add a little custom field action, and you, my friends, are good to go. I’m gonna go back to camera.
I really hope that you got a lot out of this video. I want you to put it into practice and see what you think. Drop comments down below, guys.
Just let me know, off the top, what do you think of this solution? Does it get the job done? Does it make your life easier?
Does it make your life easier? Drop comments, drop likes. I’ll be back very soon with another tutorial.
Peace.
