0:00:00
What’s up everybody welcome back to the channel. It’s been a few weeks since I’ve posted wanted to explain the hiatus. I ended up getting COVID actually my entire family ended up getting COVID except my wife she had it last year so her second round with COVID was. You know what she thought was allergies for a couple days the rest of the family ended up getting her allergies which I can confirm were was not actually allergies. And you know it wasn’t like super awful it was it was kind of like having the flu honestly I just I didn’t want to tempt COVID to come after me worse by. Like trying to push through it and trying to keep working and just trying to ignore it and all of that so I just opted to not work to rest to recover and so on and so forth and of course we didn’t all get it at the same time so like it was me and then my oldest daughter and then it just kind of trickled down. Through my kids kids had it you know fairly mild one got a pretty harsh cough whatever I’m not going to get into all the details of of COVID but. It was about two and a half weeks where I was just kind of like you know not working either taking care of myself or taking care of them. And then we ended up going out of family vacation for the Labor Day weekend holiday we left you know early last week and then stayed through the weekend. So it’s like you know three to four weeks of just kind of insanity around here and thankfully all of that is behind us and I’m back and I’m back in action and so today we are going to get right back into it with a video talking about FAQs frequently asked questions and how to manage. FAQs on an oxygen website properly because there’s good ways to do this and there’s kind of not so great ways to do this. One thing I would say is don’t do a don’t get an FAQ plug in to manage your FAQs that’s an absolute nightmare and if you do that it’s going to be a plug in where you’re going to keep that plug in around forever as long as there’s FAQs on your site or you’re going to have to migrate your FAQs away from that plug in at some point which is another pain in the ass so let’s not do that let’s do it a better way. The other thing you don’t want to do is put FAQs on your website manually like static FAQs where you just put the question and answer on a page using the oxygen builder and you do that like 10 times and then maybe you do that across different pages and then call it a day that is not future proof that is not dynamic that’s you’re going to lose a lot of functionality you’re going to lose a lot of management best practices FAQ best practices. The other thing I would say to not do is we’re just talking about a lot of not do and then I’m going to show you how to do do it the real way. So the other thing I would not do is create an FAQs page like just have all the FAQs in one place. So from a user experience standpoint you think about a business website whether that’s a service based business or product based business.
0:03:03
Well if you have five services the FAQs are different depending on the service typically so you want to put the FAQs that are related to a service on that service page. So if you’re talking about the service you should also talk about the FAQs for that specific service. Same thing with products right. All products typically have their own unique questions and answers to go along with them. So if somebody’s looking at a product page you want FAQs for that specific product. If you try to do all of this stuff manually it’s going to be an absolute nightmare to maintain. Yes it’s easy to do when you first build the site but it’s very very difficult to maintain and expand on going forwards. So there’s some things that we want our FAQs to have. Now by the way I want to do I do want to say that if you do the FAQ page with all your FAQs in one place that’s okay as long as it’s categorized, filterable, sortable, maybe searchable. Like put some dynamic features into that. Don’t just put static questions and answers all on a page. Not a great idea from a UX standpoint. So we want FAQs to be queryable based on the page somebody is looking at or like whether it’s a service page or a product page or maybe not about page. So on the about page we have company related FAQs. On a shipping page maybe we have shipping related FAQs you get the point right. So it’s very dynamic. And then we want to be able to attach facets to those so that we can search them in the place that they happen to be at. Filter them in the place that they happen to be at. And then load more maybe what if there’s a lot of FAQs and we don’t want to show them all because that’s super overwhelming but we do give the person the ability to load more if they want to see more. So all of these features that we want to have in our FAQs require like underlying structure a foundation the proper foundation and so the proper foundation that we’re going to be using number one is custom post types. So we want our FAQs to be inside of a custom post type. That way our FAQs are isolated in a specific section of the database. Next we want advanced custom fields so we want like the question to be a custom field and the answer to be a custom field.
0:05:25
And this makes it super easy to manage because even the client can come in and add or edit or remove FAQ items. So if they want a new question they can go in they can type in the question in the question field type in the answer in the answer field. These are all through advanced custom fields. They can categorize the FAQ. There’s a lot of stuff that they can do very easily from there in and then they have published and it magically shows up on the site in the exact places it’s supposed to show up and nothing breaks and they’re never touching the oxygen builder. They’re never trying to edit an actual page very very very easy. Also having this in the custom post type with custom fields allows us to use facets to do the searching and the filtering and the sorting and things like that. So that’s going to open up that functionality and make that very easy. So that’s really the underlying structure and foundation that we’re going to be working with. I’m going to walk you through this. I’m going to show you how to set up the custom post type. Then we’re going to set up the advanced custom fields. Then we’re going to query the FAQs onto a page. Then what I’m going to do here because this is a free channel and I do have a paid group. I’m going to show you how to get the dynamic FAQs onto a page and show you kind of the power of it. But if you want all of it like how to add the facets how to add search functionality how to add Ajax load more and make it Ajax searchable. So the search is actually a live search happens right inside of the grid. If you want and then bi-directional relationships. So instead of just categorizing FAQs but going to a service page and saying, Hey, by the way, these are the FAQ items that are related to the service and then querying the FAQs based on those relationships. All that advanced type stuff, the trickery, the really pro stuff.
0:07:13
That’s going to be inside of my group inside of the inner circle, which of course I’ll link to down below. But I’m going to show you for free today how to set up the foundation, make sure the structure is correct and actually query FAQs onto a page using an oxygen repeater and the advanced query builder. So let’s go ahead and jump right into it. We’re going to get to work. Okay, so first thing I’m going to do, I do not have a custom post type for FAQs yet. So I’m going to make that first. So we’re going to go to CPT UI. So I’ll just show you here real quick on the back end. If I can load the plugins page. Okay, custom post type UI. This is the free plugin that you’re going to want to install to create custom post types. You can also use MetaBox now. If you are a MetaBox IO owner because oxygen with alpha 3.9 alpha. I believe it’s 3.9 alpha. Let me say, yeah, 3.9 alpha 1. This release just added the MetaBox functionality. So if you’re a MetaBox user, you can use that instead. All right, so I’m going to go to add edit post types. And I’m going to go post types log. This is going to be FAQ. We can do FAQs like that. FAQs and FAQ. And then we can populate. And I just take that my out of here. So this is going to populate automatically all of these like fields that are associated with this custom post type. The post type log can be it can be plural or singular, whatever you think works best, but really it doesn’t matter in this regard because we’re not going to have an archive page. So I’m going to go ahead and turn that off. So we’re going to scroll all the way down publicly queryable is false. And then everything else should be pretty good has archive is going to be false exclude from search. We’re going to put true in there because we’re going to be creating in the advanced version our own search that’s not going to matter for this free tutorial, but that is going to matter later if we do the advanced stuff.
0:09:20
So do you want to nest FAQs under other FAQs typically that’s a no so we’re going to leave that sets of false and supports title editor featured image we’re going to turn off the editor and we’re going to turn off the featured image those will not be needed. And I’m going to think leave everything else everything else is going to be good the way that it is. Okay, so I’ve added a custom post type UI or sorry a custom post type with custom post type UI. I’m going to go to and you’re going to see it right here FAQs for just purposes of showing you how to do this. Let’s change the little icon here next to FAQs so I’m going to go to edit post types I’m going to go to FAQs and I’m going to come down to where it has this dash icon menu icon just click on this dash icon class name. And then we can look for like a little question mark icon or even that like speech bubble might work it’s called status. Let’s see if let’s see if they have a little question mark icon somewhere scroll through this real quick. Hopefully I’m not just like passing it and not noticing it. Okay, I don’t see let’s just use that little speech bubble thing. Let’s go back to where that was. Okay, so this is the class of that the dash icons class and we’re going to just put that in there. And then when I hit save, you’re going to notice that that turns to a little speech bubble. So if you want to control these icons, that’s definitely doable. Next thing that we’re going to do is add edit taxonomies. This is where you would add categories to your FAQs. Like I mentioned, the like where it’s shipping FAQs company FAQs general FAQs. The problem is when you get into specific services and specific products, that’s where you’re going to actually want to use bi directional relationships, which is part of advanced custom fields or part of metabox. And like I said, that’s going to be in my advanced tutorial inside my inner circle. But this is where you would go. If you just wanted to use simple categories related to your FAQs, you can do that here. So I’ll just I’ll just show you so it’s FAQ underscore cat. And then this is going to be fact categories and fact category. Okay. And then I’m going to attach this to the post type FAQs. That’s super important. I’m going to populate the labels based on the chosen name. We come down here, publicly queryable. We can do false here. Hierarchal is false. And actually so hierarchal. You would probably want to do true because categories are often nested under one another. So I would turn that on to true. And I think the rest. Oh, this is very important. Show in quick bulk edit panel. We’re going to make that true.
0:12:14
That means when you go while I’ll show you in a second. So let me add edit taxonomy. If I go to FAQs, you’re going to notice that you now have FAQ categories. See how easy this stuff all is very, very simple. And if I go to FAQ categories, I can say like general FAQs add and then I can do like shipping FAQs like that. And let’s do let’s just use those two. We’ll just keep it very, very simple. But if you go to FAQs, let’s just take a look at what we have. So we have the ability to add a new FAQ item, which would be like a question and an answer. But you see that there is obviously no question box. And there’s obviously no answer box either. We do have our categories over here on the right hand side, which is cool. So what we’re going to do next is just add those boxes. We need a what’s our question and what’s our answer. So we’re going to use advanced custom fields to do that. You could absolutely use the free version of advanced custom fields to do all of this. You do not need the pro version of advanced custom fields unless you’re going to do the bidirectional relationships. Then you would need advanced custom fields. All right, so we’re going to go to custom fields and we’re going to do add new and we’re going to call this FAQ FAQs just like that. And then we’re going to assign these fields. I’ve been added any fields yet, but we’re going to assign them only to the FAQ posts. So the post height is equal to F whoops FAQ. So that’s going to make sure that these fields only show up on FAQ items. They don’t show up on posts or pages or anything else. They just show up on FAQ items. Now we’re going to add a field. Okay, so we’re going to hit add fields and we’re going to do FAQ question. And this is going to be a nice text field. You can limit if you want to. You can limit the number of characters somebody can put in a question. You would want to do that. Maybe if the client is getting or tends to get a little over zealous and wordy with the questions and you want to force them to simplify things, maybe for the sake of the design or whatsoever or what have you. I’m just using the wrong words today. All right, so character limit is where you would go to do that. You could literally just type in like 160 characters. That’s what they get, right? But I’m not going to limit them today. But that is something you may want to do with the question and possibly with the answer because you may not want them to get too wordy with the answers either. So if that is something you want to limit, that’s how you do it. I’m not going to do it for this tutorial. So we have our FAQ question. And next we have our FAQ answer.
0:14:47
Now the only difference is I’m going to turn this into a text area. So we are going to give them a little bit extra room to write the response. And I’m going to control the number of rows this box is so how big is the box that I’m going to give them to type in. I only want it to be four rows. All right, so that’ll give them kind of an idea of how long it needs to be. But again, you can always put a hard fixed character limit on the answer response if you want to. All right, I’m going to leave no formatting on new lines. We really don’t have to fill out anything else. And then I’m going to come down here. This is where these boxes going to show up when somebody’s editing an FAQ. So that is position. I’m going to say high after the title. All right. And that’s really all you need to do here. We’re going to hit publish. We’re going to go back to FAQs and we’re going to hit add new and now you see we have the addition of two new fields. We have an FAQ question field and an FAQ answer field. So we have the ability to type in a question ability to type in an answer and ability to categorize our FAQ. So let’s just get started. This is a sample question. And then I’m going to go to lorum if some.io and we’re just going to grab our answer here. Put that in. So here’s something somebody asked me the other day. They’re like, Kevin, why do you put a field that also like we could just use the title for the question. Right. So this could be the question. We don’t need a question field. We would only need the answer field. You could even potentially use the Gutenberg editor as an answer field. But then you can’t limit characters and all that kind of stuff. But I do want to answer the question of why do you use these two fields when they’re pretty much duplicates because the answer is it’s for future flexibility. Always thinking about future proofing. If there’s a situation where we want our back end admin area to say something that’s different than what’s shown on the front end having two boxes makes that possible. Having one box makes that impossible. And if you think about some large companies that have maybe dozens hundreds of FAQs and you only give one opportunity here. You only give one box and the back end and the front end are the same. If we get 60 FAQs in and somebody on the team is like, hey, we actually need the back end label to say something different than the front end label. Is that possible? Well, guess what? You’re going back to all those 60 and you’re fixing all 60 of them that you’ve already done. If that happens when you’re already finished, guess what? You’re going back and fixing every single one of them. So it’s better from the beginning to just offer more flexibility. So we could say this is even like product A question about XYZ. And then the FAQ question could actually be does this product work on Porsche cars? Something like that. So you see like the admin title is different from what’s actually shown on the front end. I can’t think right now. I’ll top my head of a super important reason why that would need to happen. But again, there’s no harm in just offering the flexibility inside the infrastructure.
0:18:04
Try not to limit yourself when you don’t have to. All right. So anyway, we’re going to say this is a sample question. And I’ll just put a question mark on it. And then we’ll put that as the exact same thing. Okay. So I’m going to go ahead and put that in general. And we’re going to hit publish. And then we’re going to hit add new. Now I’m going to say this is a second sample question. And then we’re going to copy that and paste it there. And then we’re going to get a little bit shorter answer for this one. We’re going to paste that in. I’m going to put that in general FAQs cool. And we’re going to hit add new. This is a third sample question that’s a bit longer. And then we’re just going to grab this one again. Well, I won’t make them. I won’t make it any of them exact duplicates here. I’m going to copy that and paste that there. That’s also a general. I’m going to do one more general FAQ add new. This is the final FAQ question in the general category. Gosh can’t site today question mark. Paste that there. This one has a super short answer. All right. We’re going to paste that in general publish. I’m going to do two shipping FAQs now. Do you ship to my state? Copy will paste. Yes, we ship to your state. All right. Shipping FAQs publish. Add new. How much is shipping for most items? Something like that. We’re going to do a shipping today and we’ll come down here and say shipping is free on orders over $50. If your order is under $50, we charge a flat fee of $5 for shipping. Okay. We’re going to do a shipping FAQs publish. Now I have we go to our FAQs. We have four general FAQs and we have two shipping FAQs. Let’s take a look at one thing. If I go to edit notice I checked two of these at the same time and I hit edit apply. I can actually bulk assign the FAQ categories in these. I don’t want to do that now. But the way that I was able to do that if we go to CP2 UI add edit taxonomy. The FAQ categories and I come down show in quick bulk edit. Remember when I said that to true so many times in the past and I’ve had a lot of people as well ask me they’re like I’ve created my custom taxonomy. I need to go bulk add items to a category and I can’t do it. That’s because this is set to false by default. So always go in show in quick bulk edit panel set that to true. It’s going to make your life so much easier. The next step is we have to query these onto a page. I want you to think of an FAQ type page or a service page or something like that. Let’s do a shipping page. How about that? We’ll do like a shipping FAQ page.
0:21:24
I’m going to do add new and I’m going to do shipping FAQs because this will really show you how the power of querying based on category goes. Okay. And then we’re just going to do default page template all of that’s good. I’m just going to hit publish. And then I’m going to open the oxygen builders. We’re going to hit edit with oxygen. Now I’m on alpha one 3.9 alpha one. Let’s see how long this builder takes to load. I’m super curious if 3.9 alpha one has improved load times. Let me close this box down here. Okay. So far I’m not noticing any massive improvement. We’ll see. Okay. All right. There it is. That’s that was about average. Honestly, I’m not seeing a massive improvement there at all. But yeah, it’s the first page I’ve ever opened in 3.9 alpha one. So I don’t know. We’ll see. We’ll keep playing with it. All right. So I’m not going to build an entire page. I’m just going to build the FAQ section. I’m actually going to show you how to how to query these into toggles. And that’s it. Let’s go. So add section. There we go. And I’m going to add a div. And we’re going to go columns to columns to. And let’s actually let’s not do to let’s do two three. So columns to three. I’m using oxygen in j for this, by the way, pause to let you guys know little announcement, little fun announcement. Let’s go back to camera real quick. Fun announcement. I’m working on my own utility class system. It’s called automatic. CSS. And it does what no other utility class system does. It automatically controls a lot of the different elements like size and colors, all of that. Based on user editable variables. I can’t give you much more detail than that. But I will say that this is going to be a badass utility class system. It’s going to be free. And it is going to have functionality that no other utility class system has based on a lot of the principles that I teach. It’s going to be also automatically responsive. That’s all I can say about it right now. If you’re in my inner circle, you know exactly what you know all the details because you’re helping me create the automatic dot CSS system. At least you’re helping me test it, refine it, things like that. You have access to all the code already. Just a perk of being in the inner circle. You get to see stuff that I’m developing and working on behind the scenes. So yet another reason to do the inner circle. Okay. Cool. So I’ve got my two, three columns here. So basically it will be a replacement for oxygen. No hate on oxygen, or anything like that. It’s just part of my process. Like I wanted to do it from the beginning, but I wanted to do. I didn’t want to just reinvent the wheel. I wanted to wait until I had a concept that was really going to improve and revolutionize like the class systems for oxygen. And I think I’ve done that. So it’s in the works. That’s all I’ll say. Okay. So I’m going to put a gap between these columns. We’re going to do columns gap. And this is going to be large or Excel. Let’s do. Let’s do Excel. Okay. So on the left hand side, I’m going to have my just kind of like FAQ heading all of that. And then on the right side is going to be our actual FAQ toggle items. So I’m going to go ahead and add a heading here. And I’m going to go ahead and add text. And then I’m going to put a margin bottom on this. Let’s do margin bottom.
0:25:15
Oh, that’s not that’s not a working one. See margin bottom. And cool. So this is going to be frequently asked questions. Browse here are here are some frequently asked questions related to shipping items from our company to your location. Okay. What I’m just making up nonsense copy. All right. So there’s our heading. There’s our text over here. Like I said, let me put a stretch class on this. Over here is going to be our actual toggles. So what we’re going to do is add a repeater. You can put a toggle inside of a repeater and it’ll repeat the toggle. And then we’re going to have our toggle heading is going to be our question and our toggle body is going to be our answer. You can also do this with if you have oxy extras, they have a pro accordion module and you can do it with this if you want accordion style behavior instead of toggle based behavior, but I digress. All right. So add repeater. And you’re going to notice that it just adds an empty container. That’s how repeaters work. Let me open the structure panel. So we are going to see here we have our left column with our heading and tax. We have our right column with our repeater. I’m going to go ahead and rename this. This is going to be FAQ items. And then this is going to be our FAQ repeater. Okay. It should let me. Okay. Here’s something. Hey, if Elijah, if you’re watching when I hit this pencil and hit rename, I should be able to type. But I can’t type. I now have to double click inside of there to type. We got to work on that UX a little bit just a, a hope and a prayer right there. Okay. So this is going to be FAQ repeater. And I’m going to hit enter. Awesome. Okay. So next thing we need to do is click on our repeater. And we need to go to primary. Wait, where am I? Okay. I was on the div inside the repeater. I want to actually be on the repeater. So I’m going to go to query advanced, edit query, add query parameter. Very first thing I’m going to do is go down to post type. And the post type is FAQ. And I think it’s FAQ or FAQs. FAQs. Okay. Training. Digital gravy. Dev. Let me just open a new tab real quick and double check because this will screw it up if we don’t do it right. So we’re going to see PT UI added at post types, edit post types. FA FAQs. Yeah, it’s plural. Okay. So we’re going to query the FAQs. We’re going to say post per page. Post per page. Let’s just say nine. And let’s add so that’ll only query nine FAQs onto that page.
0:28:14
And then I’m going to also do no found rows true. This is going to eliminate pagination. So it’s going to make sure that there’s no pagination on this repeater whatsoever. We only have six post types. I’m querying nine slots. So we can go up to nine before it starts cutting off. And then there’s going to be no pagination. I almost always do no pagination because if I need people to be able to see more items, I either use WP grid builders pagination facet because it’s much better. Or I use, which is like nine out of 10 times WP grid builders Ajax load more facet so that they can just dynamically load more without having to do the pagination nonsense. All right. So I’ve got post type FAQs post per page is equals nine and no found rows equals true. This is going to query all FAQs because I’ve not selected a category. Okay. So I’m going to go ahead and close this. And then we’re going to hit apply and you’re going to see one, two, three, four, five, six. It is loaded all six posts correctly. But they’re just blank boxes because we have not put anything in the main div for the repeater to repeat. All right. So what I’m going to do now is add our toggle. So I’m in the main div here. And I’m going to add a toggle item. And there is our toggle and you’re going to notice there’s six of them. But what I’m going to do is go to the repeater and I’m going to turn this for a second to single mode. Also what I’m going to do, just a little tip here. I’m going to take this toggle. I’m going to come down here and I’m just going to add a section. And I’m going to drag this toggle down into this section. And all I, all I, the reason I’m doing that is because when you try to build these things. Oh, okay. Never mind. What I’m going to do is undo that. I’m just going to delete this toggle for right now. Let’s come over here. Cool. And delete the text that goes with it. Awesome. So I’m going to add the toggle down here. It’s easier to build the elements outside of the repeater. And then just drop it into the repeater because you don’t have to worry about the repeater trying to load all the time or do different things. Just trust me on this. Okay. All right. So here is our toggle. Here is our text. Let’s talk about the toggle element for a second because it’s not great. It’s not fantastic inside of oxygen. And what I always do is I add a div. And I’m going to call this toggle double underscore item wrapper.
0:30:49
So this is a toggle item wrapper. And the reason being is because the toggle actually has a heading nested under it and then a text directly below it, but not nested in it. So and you saw this problem. I just had a second go if I drag the toggle around the text does not come with it. Okay. So you see what I’m saying, right. So what I’m going to do is I’m going to drag that toggle into this div that I just made and I’m going to drag the text below it. Now I effectively I’m going to rename this FAQ item. Okay. I now have one single thing that I can drag around that contains all the FAQ item things like it contains the toggle functionality, the heading and the text. And I don’t leave anything behind. Okay. So it requires an extra div, but it makes your toggle life so, so, so much easier. All right. So what I’m going to do now is come into the toggle and I’m just going to leave the default classes on here. It has by default a toggle class and a toggle expanded class. I am going to put a dummy class on here, though. This is going to be a fact. What did I just name this div? I tried to keep track of all this stuff. Okay. We’re going to call this toggle F, we’ll do FAQ toggle like that. This is also a dummy class for future proofing. I’m not going to add any styling to that. And then let’s see, that’s a fact toggle. And then this is FAQ. Okay. So this is going to be FAQ toggle double underscore heading. And then this is going to be FAQ toggle double underscore answer. Okay. That’s how it’ll be the FAQ answer. And then FAQ toggle perfect perfect perfect. Okay. Awesome. So the FAQ toggle heading another challenge here is that these are H ones by default. I typically change these to like H3s. All right. I’m going to leave that the way that it is. Next I’m going to come down and this text right here, if you notice, it’s kind of like off alignment because you have this icon here next to the heading. But then the text is kind of nested underneath it. In some regards, that’s okay. But we’re going to avoid that. So on the FAQ toggle answer, I’m going to go to size and spacing. I’m going to go to padding. We’re going to use M’s for all of these. All right. Cool. And let’s do 1.4M, something like that. And then I’ll do 1.4M over here. Okay. So that’s more like an alignment. Like the answer is actually under the heading now. And the padding is the same on both sides. It’s not going to look lot sided or anything. Even if I put this in a background. So let’s do like a background color up here. And we’ll do like F5 F5 F5 like a light gray. And then what I’m going to do is grab this FAQ item. And we’re just going to do a white on this. We see we’ll do we’ll do this down here to F5 F5 F5. Let’s put our pound sign before it. Thank you. Thank you. Okay. Yeah. So there we go. We got our white. All right. So there’s our FAQ item. And then size and spacing on this will do like 1M all around. Maybe let’s do 2 on the sides.
0:34:22
Okay. And then let’s maybe round the corners. Their size and space. Okay. I was just making sure I put that on the right thing. Some borders. Let’s do RIM 1. Cool. That looks good. I’m not going to do. Okay. Okay. Here’s one problem that we see. So when this is like this, it looks really good. Let me, let me, I will put a slight box shadow on this affects box shadow. All right. 2, 2, 20 minus 8, something like that. And let’s do a dark shadow color and then bring that down. Okay. So just a really light kind of box shadow on it. Kind of small box shadow. Just you guys can see that a little bit better. It looks really good right there. But when I open it, it doesn’t look great. So what I’m going to do here is on this answer. We’re going to drop this down to like 0.5M and 0.5M. And actually we don’t need anything on. Yeah, we do hold on. All right. Fact toggle answer. Okay. 0.5. So that’s going to give it too much when it’s open. I’m just going to go 0 on that. Okay. That looks a little bit better. I didn’t want extra spacing on the bottom because there’s already spacing on the outer wrapper. Right. So we don’t need spacing on the bottom. Like below the text. It looks fine just like this. And we’ll see it better when we actually have answers and questions in there and whatnot. All right. Cool. So I think that’s pretty much going to be the design of the toggle. So I pretty much built the toggle now. So I’m going to go ahead and grab this FAQ item. And I’m going to drag it into the repeater div that drag and drop in 3.9 alpha one works way better. Okay. I can already tell way, way, way better. And by the way, if you don’t like this, you know, how it’s an alignment with the thing, you know, you can always fix that. Like we just go in and we can just take off that that padding. And then what I would recommend while it’s fine. It’s going to take up whatever space there is. See, I just think, doesn’t that look a little like off. Maybe it’s going to look better when we have an actual answer in there. But anyway, now that it’s in the repeater, I can go ahead and inject the actual data dynamically. So I’m going to double click this heading. And I’m going to insert data. Advanced custom field FAQ question, insert. And that’s going to show up like that. So how much is shipping for most items. Then we’re going to double click this insert data, advanced custom field FAQ answer. Click away. And it’s going to load in the answer. So pretty good. And actually that doesn’t look that doesn’t look bad. Notice that when we’re closed, it’s a certain width. And when we’re open, it’s a different width. That’s because this is controlling this. So what I’m going to do is hit FAQ item. And we’re just going to put a width of 100% on that. And that’s going to make sure that this takes up the whole width of that box. When you open it now, it doesn’t change with. So there you go. Next thing we’re going to do, FAQ item is remember when it queries additional ones, they’re going to be touching. In fact, I can show you that. So if I go back and the reason it’s only showing one, remember, some of this might confuse some of you.
0:37:46
I put it in single mode. If I put it in normal mode, it’ll show me all of them. But I put it in single mode because it’s a little bit easier to work with. So I hit save. But if we go view on the front end, you’re going to see there’s what we have. And they’re all open, by the way. So let’s see if we can take care of that. So I’m going to go this FAQ toggle. So the actual toggle. And we’re going to say initial say this closed. And sometimes this doesn’t work if you put it on the class up here. So I go the ID and hit close and hit save. And you can do that because we’re working inside of a repeater. So I don’t need this to affect everything. The repeater is going to repeat whatever’s here. All right. So I’m going to go back and refresh. There they are. Now they’re all closed. And then if I click they open and notice they all have their own unique content because that’s how the repeater works and the query works. But I do need spacing between these items. So I’m going to grab that whole outer wrapper shell. And I’m going to go to size and spacing margin bottom rim. And let’s try 2.5. Something like that. Save. Refresh. There’s our FAQs now look super, super clean. Next thing I’m going to do is go to this outer wrapper with my columns. And we’re just going to say that on medium devices. Oops, medium devices. Why isn’t that letting me type? Okay. Let’s try this again on medium devices. I want one column. Okay. So see columns M1. Perfect. And then that’s going to control the mobile responsiveness. So it stacks like this. And then that’s still pretty good. I mean, that’s some that’s the large device size. I think it still kind of fits them over there. Yeah, I think that’s all right. Okay. So now that we’ve done this, let’s go ahead and talk about how to query based on categories because we had those 2 FAQ categories. But we obviously have all of our FAQs here. And it’s a little more complicated to query by category with the advanced query builder. So I wanted to kind of put that in as a secondary lesson. A little golden nugget inside of this tutorial. So let’s go ahead and do it. First thing I want to do is I want to switch this from single mode to normal mode. Remember, this is a shipping FAQs page. So we should just have the shipping FAQs here, which we have two of them. Right now we have all of them because we also see the general FAQs as well. So I’m going to go ahead and grab this FAQ repeater, go to query and just edit the query that we’ve already built. I’m going to add a parameter to that. I’m going to go all the way the bottom and choose tax query. I’m going to add a value and I’m going to add a rate, an array. And then I’m going to go ahead and add a value to the array. The first one I’m going to do is the taxonomy. I’m also going to add another value.
0:40:45
This is going to be the field and I’m going to add another value and this is going to be the terms. So these are kind of the three things that you need. There may actually be a different way to query by category, but this is the way that I’m familiar with. And that I’ve used with success. So this is the way we’re going to go with. So what is the taxonomy? So if we go back and we go to dashboard, we go to the admin area here. We go to our FAQs FAQ categories. But the taxonomy is FAQ. Sorry, I went to the wrong spot. I need to be in custom post type UI, add edit taxonomies. This is where we created the taxonomy. Remember when we did that in the very beginning. So if I go to FAQ categories, this is the slug FAQ underscore cat. So what I’m going to do is I’m going to go into my repeater and the taxonomy is the FAQ categories, which is FAQ underscore cat. Next is the field, which we’re going to put in slug for this, just how the array works. And then we’re going to go to terms and add a value. And this is going to be the actual name of the category or the slug of the category. So I’m going to go to where were we? Okay, so now now I can go back to our FAQs FAQ categories. Remember, I want to choose shipping FAQs. So I’m going to grab the slug for shipping FAQs. And I’m going to input that in the value box here. Now you can add more categories. If you wanted to pull from multiple categories, you would just keep adding values to that terms field. But I’m only wanting shipping FAQs. So that’s all I’m going to put there. So this is how we built the advanced query. I’m going to go ahead and close that and apply. And you’re going to see it filters it down only to FAQs within that shipping category. I hit save. And now we reload. And there’s my two shipping FAQs. Now what’s cool about this and what makes this so powerful and dynamic.
0:42:45
Let’s say the client comes along and they’re like, hey, we need another FAQ added to our shipping page. Well, cool. We don’t have to edit the shipping page. We don’t have to do anything important or spectacular. Just go tell them to add a new one and make sure they categorize it as shipping FAQ. So this is going to be this is a new shipping FAQ added by the client. And then I’m going to copy that put that in the question box. And then we’re just going to go to alarm if some there’s our answer. And we are going to find the right tab. Cool. When I do this as a shipping FAQ and hit publish. I go back to our page. Now there’s a new FAQ item. That’s the power, right? That’s what I’m trying to show you. Then when we get into all right. Now we have a general FAQs page. Let’s query the ones on there. And we can add to those anytime we want. If we want an FAQ that’s in more than one category. That’s no problem either. You add it to both categories. It’ll show up everywhere on the site where those categories are queried automatically. Then we get into the power of bi-directional relationships. Then we get into the power of adding a search box to this. And Ajax live search box to this or filter by categories. We have a big FAQs page. What people can filter by the category they want to see FAQs in. This is how you do FAQs correctly inside of WordPress with oxygen. No FAQ plugins. No static FAQs on the website anymore. You’re doing it like this from now on. If you want to build professional websites. This is the functionality and the user experience that a professional website should have.
0:44:25
Don’t do it the amateur way anymore because now you know how to do it the pro way. And like I said, if you want to see all the facets added to this. If you want to see the bi-directional relationships working with this. That’s going to be inside the inner circle. But at least you have a really good start. And a way to for free get this kind of functionality on to every single website you build. That’s it for me today. Let me go back to camera real quick. If you guys have any questions. Drop them in the comments below. Happy to help you out. Make sure you like the video. Thumbs up. Subscribe. Share all that good stuff. I’ll be back very soon with more great content on oxygen and running a digital agency and all that good stuff. Hopefully not COVID. All right. See you guys.
