Dynamic FAQs in Oxygen (CPT + ACF + Relationships + Facets)

what's up everybody welcome back to the channel uh it's been a few weeks since i've posted wanted to explain the hiatus i ended up getting covered uh actually my entire family ended up getting covered except my wife she had it last year so her second round with kovid was uh you know what she thought was allergies for a couple days uh the rest of the family ended up getting her allergies which i can confirm were was not actually allergies um and you know it wasn't like super awful um 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 um 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 on a family vacation for the labor day weekend holiday we left uh 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 um 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 have 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 uh 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 uh you're going to lose a lot of functionality you're going to lose a lot of management best practices faq best practices uh the other thing i would say to not do is that we're just talking about a lot of not dues 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 um 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 a product based business 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 uh all products typically have their own unique questions and answers that 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 i want to do i do want to say uh 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 some dynamic features into that don't just put static questions and answers all on a page uh not a great idea from a ux standpoint so we 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 an about page so on the about page we have company related faqs um 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 um filter them in the place that they happen to be at uh and and then load more maybe what if there's a lot of faq so 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 uh 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 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 hit publish 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 and 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 we're going to i'm going to and 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 um faqs onto a page and 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 uh if you want and then bidirectional 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 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 all right so let's go ahead and jump right into it we're gonna we're gonna get to work okay so first thing i'm gonna 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 meta box io owner because oxygen with alpha 3.9 alpha uh i believe it's 3.9 alpha let me see i just yeah 3.9 alpha one uh this release just uh added the metabox functionality so if you're a meta box user you can use that instead all right so i'm gonna go to add edit post types and i'm gonna go post type slug this is gonna be f a q 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 uh custom post type um the post type slug can be it can be plural or singular whatever you think works best but um really it doesn't matter in this regard because we're not gonna have an archive page um so i'm gonna 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 gonna put true in there because we're gonna be creating in the advanced version our own search that's not gonna matter for this free tutorial but um that is gonna matter later if we do the advanced stuff hierarchical so do you want to nest faqs under other faqs typically that's a no so we're going to leave that set to 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 i 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 gonna go to and you're gonna 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 gonna go to uh edit post types i'm gonna go to faqs and i'm gonna 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 uh let's see if let's see if they have a little question mark icon somewhere let's 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 you know control these icons that's definitely doable the next thing that we're going to do is add edit taxonomies this is where you would add categories to your faq so like i mentioned like where it's um 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 meta box 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 um 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 fat categories and fact category okay and then i'm going to attach this to the post type faqs that's super important and i'm going to populate the labels based on the chosen name we come down here publicly queryable we can do false here hierarchical is false and uh actually so hierarchical 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 uh that means when you go well i'll show you in a second so let me hit add edit taxonomy if i go to faq 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 uh shipping faqs like that um let's do let's just use those two we'll just keep it very very simple uh 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 uh but you see that there is obviously no question box and there's obviously no answer box either uh we do have our categories over here on the right hand side which is cool um 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 bi-directional 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 uh faqs just like that and then we're going to assign these fields i haven't added any fields yet but we're going to assign them only to the faq posts so the post type is equal to f oops 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 field 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 overzealous and wordy with the questions and you want to force them to simplify things maybe for the sake of the design or whatsoever uh or or what have you i'm just using the wrong words today um 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 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 gonna control the number of rows this box is so how big is the box that i'm gonna 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 um i'm gonna 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 gonna show up when somebody's editing an faq um so that is a position i'm gonna say hi after the title all right and that's really all you need to do here we're gonna 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 an ability to categorize our faq so let's just get started this is a sample question and then i'm going to go to loremipsum.io and we're just going to grab our answer here put that in um 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 backend 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 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 can say this is even like um you know product a question about xyz and then the faq question could actually be does this product work on uh porsche 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 off top of 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 okay try not to limit yourself when you don't have to all right so anyway uh we're gonna 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 uh thing okay so i'm gonna go ahead and put that in general and we're gonna hit publish and then we're gonna hit add new now i'm gonna 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 gonna hit add new this is a third sample question that's a bit longer and then we're just gonna grab this one again well i won't make them all 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 type 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 okay do you ship to my state okay we'll copy we'll paste yes we ship to your state all right shipping faqs publish add new how much is shipping for most items something like that okay and we'll come down here and say shipping is free on orders over fifty dollars if your order is under fifty dollars we charge a flat fee of five dollars for shipping okay shipping faq is published so now i have we go to our faqs we have four general faqs and we have two shipping faqs and um let's take a look at one thing so if i go to edit notice i've 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 cpt ui add edit taxonomies edit taxonomy the faq categories and i come down uh show in quick bulk edit remember when i set 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 and i need to go bulk ad 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 quickbulk edit panel set that to true it's going to make your life so much easier okay so the next step is we have to query these onto a page so i want you to think of a uh an faq type page um or a service page or something like that let's do a shipping page how about that we'll do we'll do like a shipping faq page so i'm gonna do add new and i'm gonna do shipping faqs and because this will really show you how the power of querying based on category goes okay um 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 am going to open the oxygen builder so we're going to hit edit with oxygen now i'm on alpha 1 3.9 alpha 1. let's see how long this builder takes to load i'm super curious if 3.9 alpha 1 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 uh that that's that was about average honestly i i i'm not seeing a massive improvement there at all uh but but yeah it's the first page i've ever opened in a 3.9 alpha 1. so i don't know we'll we'll see we'll keep playing with it alright 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 um that's it let's go so add section there we go and i'm gonna add a div and we're gonna go columns two columns two and let's uh actually let's not do two let's do two three so columns two three i'm using oxy ninja for this by the way um pause to uh let you guys know a 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 uh 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 um 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.css system at least you're helping me test it refine it things like that you have access to all the code already uh just a perk of being in the inner circle you get to see stuff that i'm developing and working on behind the scenes uh so yet another reason to uh to do the inner circle okay cool so i've got my uh two three columns here um so basically it will be a replacement for oxy ninja no hate on oxy ninja or anything like that uh it's just part of my process like i i've 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 the class systems for oxygen and i think i've done that so um 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 xl let's do let's do exo 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 it's gonna be our actual faq toggle items uh so i'm gonna go ahead and add a heading here and i'm gonna go ahead and add text and then i'm gonna put a margin bottom on this let's do margin bottom uh oh that's not uh that's not a working one c margin bottom m and cool so this is going to be frequently asked questions uh browse uh 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 um over here is gonna be our actual toggles so what we're gonna 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 uh 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 uh so we are gonna see here we have our left column with our heading and text we have our right column with our repeater i'm gonna go ahead and rename this this is gonna be faq items and then this is going to be our faq repeater okay oh it should let me okay here's that here's something hey if elijah if you're watching uh 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 gotta work on that ux a little bit uh just a a hope and a prayer right there okay uh so this is gonna be faq repeater and i'm gonna 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 at 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 it's faq or faqs uh faqs okay training.digitalgravy.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 um cpt ui additive post types edit post types fa faqs yeah it's plural okay boom so we're gonna query the faqs uh we're gonna say posts per page posts per page let's just say nine and let's add so that'll only query nine faqs onto that page and then i'm going to also do no found rose 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 um i'm querying nine slots so we can go up to nine before it starts cutting off and then there's gonna 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 9 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 as faqs posts per pages equals nine and no found rows equals true this is going to query all faqs because i have not selected a category okay so i'm gonna go ahead and close this uh and then we're gonna hit apply and you're gonna see one two three four five six it has loaded all six posts correctly uh but they're just blank boxes because uh 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 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 uh 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 element outside of the repeater and then just drop it into the repeater because you don't have to worry about the repeater trying to like 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 this 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 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 it a second ago if i drag the toggle around the text does not come with it okay so you see what i'm saying right all 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 faq uh what did i just name this div uh it's hard to keep track of all this stuff toggle item wrapper okay um we're gonna call this toggle f uh 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 that's going to be fine so this is going to be faq toggle double underscore heading and then this is gonna be faq toggle double underscore answer okay that's that'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 h1s by default i typically change these to like h3s all right um 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 um but uh we're gonna avoid that so on the faq toggle answer i'm gonna go to size and spacing i'm gonna go to padding we're gonna use ms for all of these all right cool and let's do [Music] 1.4 m something like that and then i'll do 1.4 m over here okay so that's more like in alignment like the answer is actually under the the heading now and the padding is the same on both sides it's not gonna look lopsided or anything even if i put this in a background um 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 let me see uh we'll do f we'll do this down here too 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 we'll do like 1m all around maybe let's do two on the sides 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 so borders uh let's do ram one cool that looks good uh i'm not gonna do okay okay here's 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 a slight um box shadow on this effects 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 uh 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.5 m and 0.5 m uh 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 zero 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 uh 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've 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 1 works way better okay i can already tell way way way better um and and by the way if you don't like this you know how it's in 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 um and then what i what i would recommend well 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 hit 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 um so pretty good and actually that doesn't look that doesn't look bad um 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 uh 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 width so um 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 uh in fact i can show you that so if i go back and the reason it's only showing one remember some this might confuse some of you 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 and but if we go view on the front end you're gonna see there's what we have and they're all open by the way um so let's see if we can take care of that so i'm gonna go to this faq toggle so the actual toggle and we're gonna say initial state is closed and sometimes this doesn't work if you put it on the uh 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 um 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 faq and that looks super super clean uh 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 it letting me type okay let's try this again on medium devices i want one column okay so c 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 um 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 two faq categories uh 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 faq's page so we should just have the shipping faqs here of 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 to the bottom and choose tax query i'm going to add a value and i'm going to add a 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 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 um and that i've used with success so this is the way we're gonna go with um 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 faq's faq categories uh the 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 faq's 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 faq so that's all i'm going to put there so this is how we've 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 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 a 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 lorem ipsum 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 faq 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 a bi-directional relationships then we get into the power of adding a search box to this an ajax live search box to this or filter by category so we have a big faq's page where 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 plug-ins 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 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 bidirectional relationships working with this that's going to be inside the inner circle all right but at least you have a really good start and a way to to for free get this kind of functionality onto every single website you build all right that's it for me today uh 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 coveted all right see you guys

Channel: Digital Ambition

Views: 2,719

Keywords:

Id: YoI2K63vdSo

Length: 45min 10sec (2710 seconds)

Published: Tue Sep 07 2021