Advanced Custom Fields | Oxygen Builder | FacetWP | Real Estate Listings

over the last couple of days i've had the opportunity to do some more testing with oxygen builder for wordpress i've started experimenting further with dynamic content integration with acf or advanced custom fields and this time adding in some filtering options using facet wp in this short video i'm going to show you how to start combining these tools to build out a straightforward real estate listing now just to be clear this tutorial isn't aimed at first-time oxygen or acf users as it does assume a certain level of prior knowledge and understanding i'm also not going to concentrate on design at all this is purely a functional based video but if you'd like to see more comprehensive versions of this type of content well let me know in the comment section down below now while we're talking about the comment section if you're just starting your oxygen journey let me know in the comments and if you're a seasoned oxygen user well why not pop some links to some work that you've done in that comment section because i know i would absolutely love to see the kinds of things that you're creating with these tools okay so let's start by taking a look at these tools all the ones we're going to be using in today's video okay so let's just quickly take a look at the tools we're going to be using in this video obviously we're going to be using oxygen at the time of recording this video 3.6 is the latest available version but i shouldn't think anything's really going to change when 3.7 comes out most of the things i cover in this should work perfectly fine with new versions we're also going to be using faster wp to deal with the filtering side of things now i know fasted wp is one of those tools that not everybody uses and there are plenty of other options out there that allow you to do very similar things so i will take a look at some of those other tools further on down the line but for now we're going to stick with facet wp because this works well with oxygen now alongside those two being two main ones we're going to be covering in today's video i've also got custom post type ui so we can set up a properties custom post type and advanced custom fields pro i'm only using the pro version because i want to have access to the gallery feature so you could get away with a lot of this just by using the free version of acf but obviously if you want to use those advanced features acf pro is definitely the way to go now once i've seen exactly what we've got set up inside you let's take a quick look at what's going on with custom post types and with acf so you kind of know exactly where i am at this point in time if we come into cpt ui i've got one custom post type which is called properties that's all set up as you'd expect the only thing you need to make sure that you have configured inside you are things to do with the archive and hierarchical just because i prefer to use that so make sure that you set has archive to true and also if you want to exclude things from search or you want to give different capabilities you can do same as hierarchical but the one key thing inside you is to set up has archive we've also got taxonomies and i've got one taxonomy at this point which is property types and that's just been associated with properties and again if we scroll down to the settings you see that i've configured a few things inside here as well rewrite hierarchical i've said that to true i've also set it to be hierarchical because i like to have that ability to create levels if i want to but also it just makes the side of things when you select different categories just a lot easier because you can see them all without having to know exactly what to type in and i just set things up like showing menu and all kinds of things so nothing you haven't already seen and hierarchical set to true okay on top of that then if we take a look at custom fields i've created something really really simple just to demonstrate how this works called it property extras and if we take a look inside there i've got a couple of different types of fields price is a numerical field location is just text property size is a numerical field we're just using that for the same square footage should we say and gallery is a gallery field so we can use these then various different ones of these alongside our facets when we create those to filter things out final thing i want to show you is i've got one template set up as oxygen and that is just my main template and all that is is effectively the header and footer and alongside that we've got the content area in the middle that's it it's set as a catch-all it's the main template if i open that up you'll see what i'm talking about there's our header there's our footer and our main content i've covered all these things on how to do this in their own videos with my sort of like introduction to oxygen check out the playlist in the description below if you want to see more on that so i'm just going to kind of assume that you're comfortable with these kinds of things finally i've added a couple of properties in just so we've got some content to work with i've grouped those into different property types so we can use this from facets and if we just open this up quickly you'll see it's a normal gutenberg layout nothing that you haven't seen already and down the bottom we've got a couple of extra fields and i've inserted some data in there so with all that out of the way we're now ready to take a look at how we create the template to display the listings and then how we can filter that information so we're going to do is come into oxygen into the templates as before add a new template and we're just going to call this property archive okay so with that being done we need to do a couple of things first thing we want to apply that main template so the headers and footers are already set up do that just by choosing main template then we know this is going to be an archive so we're going to open up the archive option and then we're going to choose post type i'm going to click inside there and we're going to scroll down and find the properties so we're associating this archive with the properties post type it's not going to be used anywhere else other than that we're pretty much done so we can just save or publish this we'll hit publish and then i'm going to open this up i don't worry about the fact it gives me a warning it just means that i've got another version of oxygen open now that we're into the oxygen editor we're ready to start building things so what i'm going to do is i'm just going to pop a heading at the top just so we've got something to add some visual interest this is totally optional i'm just going to use atomic and i'm going to come in i'm just going to choose a hero and title i'm going to grab a hero section this one will do and all i'm going to do is just set a different background image on there just so you can see how this all kind of works okay let's just browse for a different image i'm going to choose this one there we go and finally we're just going to put a different color over the top of this we'll just choose get rid of that and we'll just choose black as an example and then we'll just change the text color okay so nothing you haven't already probably done a million times with oxygen but i want to do this just so you can see how we build the entire page up okay so now we've got that let's open up the structure on the right hand side let's exit back out of this and we're going to do is we're going to just add in first of all we're just going to add out of this come back right the way out go into basics and we're going to add a section in making sure that's in the right position below our hero section we've now got that added in and now we're ready to start building out what we need so we're going to add in some columns i'm going to set this up to be a 40 60 and we'll just expand this out so we can see everything in place and we'll choose the first option and we'll set this to 25 we don't need to have the full size on there so this on the left hand side is where we're going to put our facets and on the right hand side this is where we're going to use and set up our our property listings so to do that first of all what i want to do is just add in the repeater again come back up we're just going to type in and search for that repeater and there we go now you can if you want to use the sort of easy post option but i like the repeater because it means that i've got more control over what information i want to place inside there it's kind of like the loop editor that we would use with some like elementor custom skin if you're used to working with that and even the croco block listings option is very similar to how this all works now before we start building this repeater out there's one thing that you need to do otherwise you won't get your facets working properly and that is we need to apply a class to this repeater so i'm going to make sure they expand this out choose the repeater option we're going to come over to the top left hand side and inside there we're going to click and we're just going to type in or we're going to paste in facet dash template that's all you need to do that's kind of wrapping that repeater inside that class and then when we create the facets and insert them it'll know what to actually apply the facets to without that you may not have the results you expect so we're going to just say add that class that's that done now we can go ahead and set up the query that we need so we're going to do is come to the query option and inside there just make sure the default is selected and hit apply parameters that's basically all there is now we can go ahead and start building things so let's make sure we've got the div selected for the main repeater area and we're going to do is we're going to come in and add some columns in so let's add we're going to choose to add columns and like we did before we're going to set this to a 40 60. on the one side we're going to put in our images on the other side we're going to put in the actual content if you find it doesn't go into the div like you expected to you can simply just grab this little purple sort of section on the left hand side and then just drag that to where you want to position it if you find it doesn't go the right place well you can just simply grab that until you get it exactly where you need it which is inside the div for the repeater so we can open that up you can see there's our two divs okay we're gonna do next is just add in an image we're gonna select the first div which is where our image is going to go and we're just gonna set this to be left aligned and we want to put this to the center and then we're going to do is just add and we're going to find the image option click to add that in there there you go that adds that in so we just need to now link that through to the dynamic content so to do that under the image url we're going to hit the data option and we're just going to choose featured image because even though this is a custom post type we're still leveraging the power of the featured image the title and the main content so we're going to do is we're going to set this to be something like medium and we'll say we want this to be i don't know say 500 by 500. it'll respect the aspect ratio so don't need to worry too much insert that give a second and there you go that's now showing the image so next up we need to go into the right hand column and start adding in some of the data to do that let's just select that div and we're going to do is we're going to come up we're going to add for this example we're just going to add in a heading and this is going to be the name of the property and to do that we do the same thing again we're going to double click on this making sure that we've got everything selected and come up to insert data at the top and from there we're just going to choose the option for title do we want to make this a link we will just makes life easy so we'll say insert and that now becomes a link now until we click outside this that won't show any difference so before we do let's just configure a few things let's set the color we want to use we'll set this dark gray we'll set the font size of say 24 and we'll set a font weight of something like 400 and set that to h3 now i'm just doing this for a bit of fun but you could easily just set up global styles which is what i would recommend you do but for the example this tutorial i just want to keep this really simple to show you how we do things styling design all up to you guys okay so there's our first one and you can see that now is showing the right data for each of the different records we have currently two so next up we're gonna do the same kind of thing again making sure that div is selected we're going to click add and this time we're just going to add in some text from here we're just going to do the same thing again we're going to double click on this come to insert data we're going to do now is we're going to say date format if you want to apply a custom format to your date you can do however if you just leave this blank it will just put it in in the nice simple date format that probably what your system is sort of associated with and we're just going to put in date posted and this is one of those things that i really like about working with oxygen i don't need to have to go through half a dozen menus just to be able to apply that information there font size we're going to put that to 12 so we get a little bit smaller okay so there's our date posted our title for that particular property so we can now repeat this to add any other things we wanted so let's add another field in let's just add text in again we'll just double click that we'll do the same thing again we'll set this to font size of 12 come back to insert data and this time we're going to put something different in we're going to use one of our custom fields so we'll say advanced custom fields and you can see there's all the acf fields we have created currently so this time we're going to just choose the option for price do you want to include the prepend and append text if configured now this is normally where i would put things like the currency value and that's what i've done in this example for the prepend and that basically puts in the pound sign beforehand so i'm going to say yes i want to use that i'm going to click insert because then if we change the currency we change the details that are going to be associated with our acf uh sort of meta fields that will update without the need for us to go in and change anything manually again another one there's really cool time saving features so we're going to do is just go at the beginning of this and we're just going to put in price and we'll just highlight that let's just get that there not all of it there we go let me make that bold click outside and there's our price and you see all pre-formatted so if i just close this down from the right-hand side just to make a little bit larger you can see what's going on now so we're just building up the various different components that we need i'm going to do one more of these to make life easy i'm gonna duplicate that so i'm just gonna select it come up to the options on the left hand side say duplicate component you can see that just exactly that so now i can click inside there and i can just change that from price to location and i can just grab this data oops let me just do that again i can grab this data and we can simply come back at insert data advanced custom fields and we're going to put in location insert click outside and you can see that puts the location in there so really cool really easy to do just for speed i've already gone ahead and added the size option in in exactly the same way as we just done with the price and the location so the final thing we need to add to our listing our repeater listing is the gallery to do that exactly the same again so we're going to open the structure up making sure that we're in the right location we're going to come back to add and we're just going to search for gallery there we go we're going to click to add that in there and you can see that now we'll drop that in and we can now ready to configure this so if we take a look at the left hand side let me just close the structures in a second you can see we've got the gallery source media library acf or woocommerce well we're using acf let's open that up and now we need to just put in the name of the field so i've assigned the name of gallery to our field as soon as i do that you can see that now pre-fills the information in our gallery section so now i can go ahead and say do i want to make these linked images or do i want to add a lightroom lightbox what resolution do i want to use we'll set this to be medium or something and if i want to i can adjust things like the layout so we can set this to have different aspect ratios we want to use the flexbox model or masonry up to you how you go about setting things up i'm just going to leave it as it is with the defaults but get stuck in and have a good play about to see exactly how these all work okay so that's the first part of this done so let's just save this and now we can take a look at what this actually looks like on the front end of the site okay so this is the properties page and you can see there's our header section we created and if we scroll down there's our properties and we can click and we can take a look at the actual gallery of images so pretty cool to see all that working now at the moment we've got a couple other things city views is fine and the edinburgh heights their links but how do we make the image a link because most people by sort of like their very nature are more accustomed to clicking on the link and then going through so this is a little bit strange in oxygen but it's not complicated so we need to hop back over to oxygen itself we just need to select the image once we've selected that we're going to come up to the link icon at the top we're going to say link settings going to click and that's going to kind of open up the normal insert or edit link we don't want anything from there because we need dynamic links so we're going to cancel that but what that's done is it's converted that into a link wrapper you can see now we've got the purple box at the top of the image saying this is a link wrapper so now what we can do is we can set a custom data source for the url so you can see the option now in the primary we have url available we'll hit data on there and we'll just say permalink that's created that link through now to the details page for that particular property let's just hit save on there just so we can confirm everything is in place and we are now done with that let's hop back over to the front end of the site refresh this page and we can see that now our image is also a link if we click we'll go through to an unstyle unedited page because we haven't built a template for this but we know it's all working the way we want so the next thing we need to do now is add in the facets so we need to create those with facet wp now to set up your facets you simply come into the settings option and choose facet wp from there we now can create our facets so the first one we're going to do is the property type which is our taxonomy so say add new we're just going to call this type check boxes is fine for this example but you do have a lot of options available inside you and as i've said before if you want to see more information about how to use facet wp and what most if not all of these different options do these facet types let me know in the comment section below and i'll take a look at covering this in a little bit more detail and see if we can come up with some different examples of how you could use the various different facet types but for now we're going to choose uh check box data source we're going to change this over now just make sure we've got the right thing so it says post type we can scroll through and we have lots of ways in which we can check against various different things but we want a taxonomy for this example and our taxonomy is our property types so we're going to click that and you see now that's our facet basically set up we just now can can configure exactly how we want this to work so we don't worry about parent terms but you'll notice that if we mouse over any of the terms we've got underneath anything's gonna underline to it it'll tell you what that particular feature is for so it's only show child items enter the parent term id well we want to show everything parent and child value modifiers we're going to leave that as it is but you do have options in there to choose off exclude these values or show only these values and this is how you would compare the different things that you select using these facets what we want though is hierarchical we want to say show ghosts and we're going to say preserve ghost order now all this really means is when you click to filter based upon what you want so for example the different property type you don't want all of the property types you haven't selected to disappear and this is why we leave the show ghosts because that will show all of the different facet options are available inside this particular facet and still allow us to sort of select the main one while leaving all those intact just gets confusing if you take all those out if you ask me okay so what's the behavior do you want this to narrow the result set or do you want to widen the result set for this example we're going to leave it set to narrow and then you can see you can sort by and this is sorting the actual facet labels so we can say we've got highest count display value raw value term order and so on so i'm just going to say display value and we're going to leave everything else as it is hit save the changes and we're going to click re-index and what that's going to do is it's going to look at all the data on our site and index it so our filters are considerably quicker than if he was doing everything live every single time so you just need to make sure you run the the indexing each time you create a new facet just to make sure that your data has been updated and everything is in place okay so we're going to come back out and we're going to create one more facet so i'm going to click facets and we're going to add a new one in and we're going to call this price change this from checkbox and what we want on this example is we want to have a slider so we select that option again date the source post type we're going to change that over now we're going to choose our advanced custom field for price then you can see we've got a different set of options this time we've got other data sources we don't want any other data sources just the one we've chosen the prefix we're just going to drop in a pound sign in this so people will know exactly what they're working with and then you've got the format and you can see you can deal with various different kinds of formats so let's just say we want to choose this option where it rounds up and press the k at the end because we are dealing with tens if not hundreds of thousands in regards to this then the step you can set this to whatever value you want i'm going to set this to something like 1000 just so we can try that out and again we'll save the changes we'll re-index because we've created a new facet and that's the two facets we're going to use in this simple example all set up and created so what we need to do is take the short codes let's go back to our facets and you can see there's our sources there's a number of rows because when you've got two particular properties but obviously you would have hundreds if not thousands on a real project so we need to do is come into this and we just say copy this shortcode so that's our first short code for the property type let's head back over now into oxygen's templates and we're going to open up our property archive i'm going to edit this with oxygen once we open that up we can open our structure so we can see where everything is and we expand things out so we can see where we're working okay so we want to put our facets into the left hand column so what i do is i'm going to make sure that that div is selected and we're just going to go ahead and add in exactly what we want so for this example we're just going to come back over we're going to add and we're going to come down to wordpress and inside there we want to grab the shortcode options we're going to insert the shortcode in there you can see that's now inserted it so we need to do is put in the shortcode so we're just going to simply paste in that shortcode we just copied and there's our facet so you can see that shows us exactly what it's going to look like pretty cool coming to advance if you want to and we can adjust any sizing and spacing so we're going to say we want the width of this to be 100 percent and there's our first facet inserted in there so we could do now is we can just duplicate that so with that selected we'll just say duplicate and that's going to put in the second option now we're going to take out this short code we're going to replace type with price now you might not always see any values inside you because just the way that things work so don't worry too much if this kind of shows up as being blank it should all still be working so we're going to do is we're going to hit the save on here now and we're going to test this out the front end to make sure everything is in place so there we go there's our test front page and as you can see there's our two facets in place if we click on apartment this will filter and show us only the one that's an apartment if we come back out of that choose the studio apartment we get a different option come back out of there and you can see we can adjust the pricing and that will filter as well i also noticed like i said earlier on about the ghost side of things you can see apartment is showing up still seeing it there but it's set to zero because there's nothing inside that particular type of filter so that's the basics of setting things up inside you so we've created those facets we've set about template our loops and so on now obviously when we click on one of these we just go through to a pretty ugly page so let's just quickly rectify that and i'll show you how you can create this sort of single template just to show the actual property and how you can pull the same kind of data as we have here in it's not going to be pretty it's just going to be functional okay so we're back into the template section so let's create the template now to display our single property add a new template as always and we're going to do is inherit from the main template and we're going to choose singular we just need to choose properties and we're going to come back up and we're just going to call this property single and we'll publish this okay so once that's been done we can open up the editor as always we'll open this up and let's start building our template so first thing we want to do is we're going to drop a hero image in so we'll add and we'll do the same as we did before we come to our library into our design set into atomic and from there we're going to just choose a hero and we'll just say we'll choose the same one it doesn't really matter too much because we're going to edit it anyway okay so let's insert it into there let's just get rid of all these things in a moment let's change the background to start off with so as always open the structure up make sure we've got the right thing selected come into advanced into background we're going to get rid of the default image and we're going to drop in some data so let's choose the data option and we'll say we want the featured image we're going to say we want this to be large so we get the full size and we'll just insert that into a page and you see that's now pulled in the featured image for us for that particular property so let's just quickly take out the elements we don't want so we'll just remove these from our designs we don't want the icon we don't want the text we just want the name of the property and we'll just make this just a little bit extra spacing above below so like we've done before we're going to select this text insert data drop in our title i'm going to say insert that will pull in there we go there's the name of the property okay let's just quickly make this look the same as the other section so we're going to change our text color to our white and we're just going to make sure that we go to our background and we're going to come into our background option and we're going to say we want to put overlay and we'll just change this to a black color and adjust that accordingly there we go that'll do for now okay so this is the first part inserted into it next we want to pull in some more data now you can place this anywhere you want we're going to set this underneath the heading so i'm going to do is we're going to come back add we're going to come back at all of this to go back to our basics and we're going to add a section in so we get everything contained inside a smaller container area and not full width so let's do like we did last time let's start adding our content in so we've got our section we're gonna do is come in and start adding what we want inside there so let's add a div in it and we can then set this however we want to so we'll set that to for example a hundred pixels and set that to a hundred percent so this is where we're going to put in things like our meta information so we can do now is we can add we're gonna add in some text i'm gonna come up double click on that and we'll insert our data and do the same kind of thing again like we've done before we're going to put in the date and we'll just leave the format on there and we'll just like we did before date that is i'm gonna select that and we'll just make that bold there we go okay so there's the date that was added and now we can just repeat these go through adding everything else we want into this particular section so i'm going to quickly go ahead and do that just so i don't make you watch me doing the same thing over and over again okay i've gone ahead and just added all the fields in a couple of titles put the image gallery at the bottom in exactly the same fashion as i showed you when we were creating the repeater so nothing that you haven't already seen if we hit save on this now we've created the template for our individual properties so we can hop back over to the test site and take a look at an action okay so we're on our property listing like we saw earlier on we can filter these if we want to like we saw and let's just say edinburgh heights is the one that i'm interested in i can click and go and take a look there we go there's our full sort of size image at the top which is pulled in from our featured image and then there's all the details the date added the price location size property description and our additional images so all in all it's not that complex if you're coming over from something like elementor and you've seen my videos on this kind of thing using elementor this is very very similar so it shouldn't take you too long if you transition over to something like oxygen or you just want to test it out to see how it all works shouldn't take you too long to get accustomed to at least those core skills that you need to be able to build things and then you can dig a little deeper and see some of the extra things that you can do with it to take your web designs to that next level that you're looking for so using acf and facet wp with oxygen builder gives you a really powerful platform for building feature-rich websites with well no real need to delve into the coding right now so there's so much more you could do with these foundation skills that i've covered today and if you want to learn more about oxygen well check out the link that's in the description below to my playlist this is something i'm adding to on a probably weekly basis so there will be a lot of great content in there for you as always all of the applicable links are in the description below for everything i've covered and if you've made it this far into the video well why not give that thumbs up a click it really does help me out now while you're at it if you like this content why not also click the subscribe button and slap the bell icon but if you didn't get value from this video well feel free to hit the thumbs down button twice as that works pretty well too minus paul c this is wp test and until next time take care

Channel: WPTuts

Views: 7,180

Keywords: WPTuts, advanced custom fields, advanced custom fields oxygen, advanced custom fields pro, advanced custom fields pro plugin wordpress, advanced custom fields pro tutorial, advanced custom fields tutorial, advanced custom fields wordpress, wordpress advanced custom fields, wordpress custom fields, acf oxygen builder, facetwp, facetwp oxygen, wptuts acf

Id: g02DpcRWO1c

Length: 28min 16sec (1696 seconds)

Published: Fri Jan 15 2021