Building a Car Dealership Website with FacetWP, Advanced Custom Fields, and Oxygen

hey how's it going everybody welcome back to another oxygen tutorial my name is Jonathan and in this video we're going to be setting up a pretty comprehensive suite filtering options for in this particular example a used car dealership now this doesn't just apply to cars or some kind of you know physical product like a car it can also be used for digital products you could use it to filter different kinds of blog posts you could also even create something as comprehensive as a local directory website so your visitors can filter by any kind of data point that you want to create in the case of let's say a local directory website a visitor could filter by location type such as a restaurant shopping things to do all that sort of things and then from there the the plugins that we're going to use to achieve this there's actually only a couple so of course we're going to use oxygen to actually design the website and then we're going to use advanced custom fields we're going to create a custom post type and the filtering plug-in itself is called facet WP so it's not terribly complex but let's go ahead and get started and I'll show you exactly how the site is set up and then I will walk you through step by step on how to build the site yourself okay so here's how the actual live site is going to look whenever we've got the the full site completed and basically what you're seeing here is the vehicle archive page and we have a left-hand sidebar with all of our facets using the plug-in facet WP each one of these elements you're seeing such as the price slider the make drop-down field etc is all an individual shortcode so the great part about that is that you could take the short codes and put them in different places for our sake I just built a left-hand sidebar and then as you make adjustments to each of the facets then the vehicles filter out appropriately so as you can see the other option you have is to stack the facets as well so stacking in the sense of minimum $20,000 leaves us with only two vehicles in this case which would be our BMW or Ford but you can go ahead and set them to combine and it's really really great the power of these facets is really unlimited and you can see how comprehensive the the settings for a car would be you know you have make price mileage body style transmission color all that kind of stuff and so what we're gonna do is actually set up all of that a couple more things I wanted to show you on this site is what you're seeing right here in the middle of the page is actually the oxygen ez post element which is of course displaying the title and then I have the price and the mileage added through just a little bit of custom code which I'll show you how to write and that data is stored inside of advanced custom fields if we go ahead and actually click on the vehicles themselves we're gonna move into the vehicle details template and again as you can tell all this data is pulled using advanced custom fields and the oxygen data element so this this title right here is pulled in from the post title our miles per gallon city and highway we're set up using advanced custom fields or transmission these photos right here are using the oxygen lightbox element so you have this really nice scrollable gallery and then inside of our template I have the post inner content which you would use in this case for the description of the vehicle and then in the actual template I set up a call to action just to have an example here so you can see what you can do as far as the vehicle template then as far as the header and the footer that's set up using a template that we just called main which would effectively be our site wide template that's going to apply to all of our pages and then the vehicle details page which is the one we're on and then the vehicle archive template which is the previous one the one with all of the facets those two templates actually inherit the all pages template if that is a little bit confusing don't worry I'm gonna show you in depth exactly how to make all of that but I wanted to give you an idea of what the live site is gonna look like it's really really great and as I mentioned earlier this can be applied to a lot of different things outside of just cars so now that you've kind of seen how everything is set up what I'm gonna go ahead and do is move into another install here that actually only has the media elements uploaded and the plugins we're going to need installed so here's what we're working with advanced custom fields Pro specifically for the gallery element of pro basic contact form 7 we're going to create a custom post type so I just use C ptui fast at WP like I said is the plug-in that will help us configure all of those filtering and search option and then of course oxygen which we're actually going to use to design the site kind of the order in which we're gonna do this is we're gonna create our custom post type create our custom fields and then we're actually gonna go create the vehicle listings and then we'll set up kind of our facets and go from there alright so first thing we're gonna do is create our custom post type so just click on add edit post type on C ptui and our post type slug I'm just gonna call vehicles which is going to be the URL of our vehicle archive template so type in vehicles and then here we're gonna do vehicles again with a capital v and then the singular is just vehicle so that's very straightforward go ahead and click on add post type and there's two things we're gonna do so I'm gonna click on edit post type if we had more than one there'd be another option here but vehicles is the one that we're working with so I have that selected I'm gonna scroll pretty far down the page and we want to find the option that says has archived and set that to true what that's going to allow us to do is create that vehicle archive template like I showed you earlier which will have all of the filters on the left hand side if you don't do this if you set this you know if you forget to change it from false to true then what you'll find later on is that when we create our oxygen template you won't have the vehicles archive to apply that particular template to so make sure this is set to true one other thing I am going to do as well is change the the post type icon which I have just this little wheel uploaded to the site so I'm gonna take this insert that into the post and then I personally like to add the categories and the tags taxonomy just for ease of use so click the save post type from there and then what you can see is we now have our vehicle's post type created and there's a little icon that I uploaded so what we can do from here is go ahead and setup our custom fields these are gonna be where our data is stored for the price mileage color and all that sort of thing go ahead and click add new under field group and then this one we can just call vehicle details this one we can just call vehicle details and then change post type is equal to vehicle and then the position I personally like the option that's high after title so what that means is that all of your options when you're creating a new vehicle are going to be listed just underneath the title of the post right here the first thing that you come across or color make mileage etc so we're gonna go ahead and add our fields in here so I'm just gonna kind of go through these we're gonna do price and most all of these can just be text so just leave the field type to text there's only one or two that we need to change from text then let's do color and these field names are important to some degree so don't make them really ambiguous you can leave them just pretty much the default there and you'll be totally fine color and then we're gonna do mate then we're gonna do a mileage and then we'll do transmission what you can do under the transmission option is instead of text you can change it to select and what that will allow you to do is have either a checkbox or a drop-down menu as opposed to just a text field and what you can do is input some static options here so the user wouldn't be able to type in whatever they want they can only pick from these predefined elements so what you can do is say you know automatic transmission you can call it semi automatic and then of course you can put in manual transmission and now the user will have to pick one of those three whenever they are setting up a new vehicle post then from here let's do we have to go Minh City mpg for minimum city miles per gallon and then we're also gonna add minimum highway miles per gallon as well so I'm in Highway mpg and the reason why we're splitting them up is so that we can do kind of a slider of between the ranges so I'll show you how we're going to set that up later so just make sure you have min and Max sorry I meant to do max here min and Max highway miles per gallon has two separate fields then from here we'll just do one final one which will be body style this can also be a select field and again that's so that the user can't type in whatever they want here so you can do sedan SUV truck you can do wagon that sort of thing oh you know what I need to do one more after body style which is going to be the photo gallery and this one we're gonna change to the gallery element which like I said is an advanced custom fields Pro element so if you don't see gallery here it's because you don't have advanced custom fields Pro installed so go ahead and hit update one more time and now our vehicle details are totally sorted out so at this point what we can do is go ahead and set up our facets now what you're going to do is go to settings and facet WP and we're gonna basically have to add the same entries again you know price make color all that sort of thing but there's a couple different options we're gonna have to work with here so our facets are going to be the actual search kind of filtering functions and we're gonna create them one by one so let's just start off with basically the same way down we're gonna do price as far as the price goes the best way to do this one is going to be a slider and that gives you what I showed you earlier which is basically the low and the high end of the slider range so the person could say I want my max to be fifty thousand and they just pulled the top end of the slider down or the bottom end up for instance so we're going to change this to slider and our data source is going to be our price advanced custom fields from here this is basically all you have to worry about on the price once I click on save and go back and then we're gonna add in the next one this one is going to be color and what we're gonna do here is you're going to notice two different options there's a drop down and F select drop down is going to be a completely unstyled you know doesn't look that great but it's just simply a drop down that's all it is you can't allow the user to select multiple options in that drop down unless you choose F select so we're gonna choose F select here because that allows us to enable the multi select option so because we're we're modifying the color element that would mean that the user could see a black and blue car and then they could add an you know yellow or whatever color they choose whereas with the drop down it's one at a time so then of course your data source is going to be color and once again just click on save these default options in the the rest of these fields are totally fine so just go ahead and hit back we're gonna do make and this is gonna be the same thing we're gonna choose F select because somebody's gonna want to be able to see multiple multiple makes of the course they might want to see Ford and BMW for instance and that way you can allow them to see multiple at the same time so of course make sure you you again hit multi select click Save and back again and then we'll do our mileage once again the mileage is gonna be a slider so somebody can choose a range that it has to fit between so choose vehicle details mileage click on save and go back now from here we're gonna do our transmission and then this one we're gonna actually leave on the checkbox setting and that's because that way all of the options are visible you don't have to actually click the drop-down to view the options like you would drop down an F select that makes sense in this case because we only have three types of transmissions so it really doesn't make sense to have the user click a drop-down just to see three options in my opinion so we'll leave that checkbox and choose data source transmission so click on save go back alright so the only other facet that's gonna be a little bit different is the miles per gallon and this one is just a little bit complicated because there's a number of ways you can set it up but the best way that I found to do it is let's just start off by naming it minimum city miles per gallon our facet type is going to be a number range and then the data source will start with minimum city miles per gallon and then other data source is going to be maximum Highway mpg so from here we're going to change our fields to show to minimum and then the compare type to intersect going back to our example site the estimated miles per gallon is going to be a little bit easier to show you if I actually kind of show you on the site here so this this truck I think gets 16 minimum miles per gallon and the high end is 22 and this Honda Civic right here gets between 30 and 39 miles per gallon so I'm gonna type in estimated MPGs of 25 minimum and what that's gonna do is actually filter out the truck because this number is the is is higher than the minimum range of the truck but the Honda is better than that so because the the user only wants a minimum of 25 miles per gallon all of these other vehicles fit but if I do let's say 34 then that's going to exclude you know two of the other vehicles so only our Subaru and our Honda get somewhere in the range of 34 miles per gallon now like I said that Honda gets between 30 and 39 so that does intersect the range and again if I go back to 25 then we see some other options come back I believe this BMW gets between 18 and 28 so if I go to 29 you can see that the BMW will disappear and that other Honda up here stays and then we're gonna set up one more facet which is going to be our body style and this one again we will choose our F select option so that way they can choose multiple if they want to sedan and a wagon but not a truck then they can choose that as their option as well so save and back so here we go these are our facets that we've created our price is slider make f select transmission checkbox body styles F select etc that way you can kind of see each of them and you're done that's basically all you have to worry about with the facets one thing we will need later on though is each of these facets has a shortcode and like I said we are going to be copying the short codes individually so go ahead and just kind of keep this in the back of your mind we're going to create our oxygen templates here in just a few minutes but we are going to need our facet facets or codes so to go ahead and move forward what we're gonna do now is add our vehicles so I'm gonna add new under my vehicle's post type and let's just do the let's do this one this is the 2012 BMW 335i and I'm gonna go ahead and fill in these options to this vehicle let's say it's thirty four nine nine five its color is blue make as BMW mileage is sixty five thousand and it's transmission just for the sake of this example let's do semi-automatic minimum city miles per gallon eighteen and twenty eight it is a sedan and we'll add some photos to our photo gallery here and here is our BMW photos which are those and we'll select those in here now your photo gallery is completely drag-and-drop and you can add and remove photos at any time individually which is great we're gonna set our featured image over here and we'll just do the BMW driving down the road like that and then our description here you can put the full vehicle description and that will appear will say BMW is the best car manufacturer in the world the categories here are not required but I personally just like to go ahead and do it and so after that really the only thing left that you have to do is publish from here I'm gonna go ahead and add in these other vehicles because you can see it's extremely straightforward it's basically just fill in the the pertinent details click publish and your vehicle post is created so I'm gonna go ahead and fill these in okay so as you can see I got our five vehicles added here so at this point we're ready to go ahead and start designing our site what I'm gonna do is first of all go under oxygen settings and make sure that selector detector is enabled and we will be able to use this to style a couple of the custom data fields that we're gonna set up later on where I showed you that the price and the mileage are overlaid on top of our easy posts this is how we're gonna be able to style that particular setting so just go ahead and do that I am going to open oxygen in a new tab because in this tab I want to go to our facet WP and just have this ready for you know a few minutes from now so in this tab up here I'm going to add a new template and this is going to be our site-wide template so I'm going to call this all pages and this is going to contain our header our footer and kind of the middle sort of intercom an element so click on publish and the only thing you need to do is set where does this template apply under singular click pages and then click update again then click edit with oxygen and we'll get started okay so the first thing I'm gonna do is go ahead and change our font to something a little bit more interesting from the default I personally am a huge fan of the muli font and so I'm going to go ahead and swap this display and the text font to that body text size I like to bump that up to 18 and then the color is fine from here I'm going to open the structure panel and we're gonna start off with the header builder so under helpers go to header builder and we're just gonna make this relatively simple so the first thing I want to do is add in our logo image so I'll click on browse and I have just a really simple image here for our logo that's pretty huge so let's change that to more like 125 pixels add in some padding around it and then let's go ahead and add in our WordPress menu now we don't have a menu set up at this time which is fine we're gonna set one up later and it will automatically update properly to the menu that we create we don't have to come back into the template unless you have multiple menus on the site then you might want to choose specifically which one applies so from here what I'm gonna do is change our text color to something like just a black and then as far as our Styles I want this dark slate to be the hover color so we're gonna go to hover and active hover board our top I'm gonna change that to white and then hover text color let's change it to this and we're gonna set our global color here we're just gonna call this slate blue I think is what it is we'll just click on add and now when we hover over you can see that there's that border on the top I personally am a fan of no background color and I'm going to change it to bottom so there you can see now it has that correct bottom border and we have our global color set for easy use later so that's gonna be super super easy just for the sake of making this look like a fully functioning live site I'm gonna go back to helpers and we'll just add in let's do some social icons and we'll take our social icons and drag those over to the right side here decrease the size a bit make it 25 and then just use brand colors and that's perfect now I'm going to add just a quick little border color to the bottom of the header row do that and then I want the opacity to be something like 40 and we'll save this again to be our light border that's what I'm going to call this one and that's perfect so now what I can do is go ahead and add in let's do a section and inside of this section we want to put our inner content element and I'm going to take this inner content and throw it into the section there so it fits nicely and then I'm going to add one more section which is going to be under library let's go to design sets atomic and I'm just going to get a pre-built footer so that we have something that looks nice we'll go to sections footers and down here we'll just do this one here change the oxygen logo real quick something to our liking and delete some of these footer credits and then under this menu we'll do the same thing hover border we're gonna change to hover board at bottom we want our global color here which was our slate blue and then our text color we'll just do the same kind of black that we did earlier so there we go there's our nice little hover border and that's pretty much it that's really all we need to worry about for our site-wide template at this point we can go ahead and add in the border to the top of this section just like we did so we'll go borders top and then use our global color which was our light border there I'm gonna set the width to 1 and do solid and there we go there's our nice border top and bottom so go ahead and click Save and that's really all you need to worry about for the all pages template so let's go ahead and click back to WP and go to the admin panel from here we're ready to go ahead and setup our vehicle archive template this is going to be the one that I showed you that has all the filters on the left hand side and all of the vehicles on the so go ahead and type in vehicle archive and click on publish then from here we want to inherit design from other template which is going to be all pages and then where does it apply click on archive go to post type and then all the way at the bottom click on vehicles and then click publish then of course click Edit with oxygen and we'll get started on this one okay so at this point the first thing I'm going to do is open the structure panel because we're gonna do a little bit of kind of nesting with divs so we can make our custom sidebar layout here so start off by adding a section and then what I'm gonna do is change the container padding first of all to zero on both sides so we don't have any issues with spacing and then I want to go ahead and set our stack child elements to horizontal now what we're gonna do is go to add and then div and set this divs width and by default pixels is selected do it to 300 pixels what we want to do now is click on our section and then add one more div and this one we're going to go under advanced layout and then all the way at the bottom do flex grow and put the number 1 so it takes up all the available space I'm going to change this sections default padding to something more like 35 so it looks a bit nicer and inside of this div here what I want to do is add another div so we're gonna add this div here and you can kind of see inside the the structure panel over here that there's a div inside of a div now this this div right here is going to be our actual filter so this one is going to be color we're gonna create another one that's going to be price etc but this div is going to be the one that contains our left-hand sidebar so let's go ahead and set this width of this div here to 100% so it takes up all the available space and just for the sake of being able to see it I'm gonna add some padding to the actual left-hand sidebar so click advanced size and spacing and we'll do 15 pixels that might actually be too much let's do more like 5 and then click inside this div will add a heading we'll call this color that's gonna be our first filter and our text color let's go ahead and do a global color which will be let's just do our black and then I'm gonna save this and just call it standard black so that makes it super easy now click on this div again and what I'm gonna do here is add a class to this div so we're gonna call this filters blocks and the reason why I'm adding a class is because if I make a change to one div that has a class attached to it it makes the change to all the other elements that have that same class here so what's gonna happen is as I add you know let's say I add five pixels of margin underneath this div the next time I go and modify that particular setting or any setting then it's going to apply to all of them so that will make more sense here in just a moment from this point we're ready to go ahead and add in our first facet which is going to be used with a wordpress shortcode so click on add go to WordPress and click shortcode and we're gonna change this to width of 100% we'll go back to primary here and now it's ready for a shortcode so let's go over to our other tab facet WP and color was the first one so all we have to do is just click copy shortcode return to this tab and then paste it in so now what I want to do is add on this div here I'm gonna add some padding we're gonna go to like 15 so it looks fine and you can see that the color is not actually rendering right here and that's fine we're gonna go ahead and add in the rest of the left hand left hand sidebar filters but first I want to go ahead and just put in the EZ post element so you can see this on the front end so go to helpers choose easy posts and it should pull up exactly what we're looking for now keep in mind all this extra data like the read more the date and that sort of thing we're gonna modify so don't worry about that but what I'm gonna do is go ahead and click Save and then I want to view this on the front end so you can see I have our color drop down ready to go and it's gonna filter out the post properly so that is really simple and as you can see it already works with just one shortcode really doesn't take that much effort to set it up so let's go ahead and get in the rest of our divs here so we're going to actually just go ahead and clone this div here and we'll just copy that so this one we're going to call price and then click in the shortcode return to facet WP and we'll copy the price shortcode and there you go so of course it doesn't render like I said but that's okay and then we're gonna click on save and then we'll do it again we're just gonna go all the way down the line so next up is going to be make just copy that shortcode change this heading to make change this here so now would be a good time for me to show you what happens if I modify the settings of one of these divs and since they all have classes attached to them the the change that I make is going to apply to all of them so just for the sake of example I'm going to change this background color to something really aggressive so you can see there it changes the background color of all of the divs so that makes it really easy to to apply changes to a bunch of different elements and this can be across your entire site too so keep in mind classes are extremely powerful and go ahead and set those up ahead of time it will save you a lot of time on the back end what I'm gonna do here is go ahead and just add in the rest of the filters and then we'll move along from there so here's an example of why you would want to set up your cost as ahead of time these two headings I have a class called filters headings assigned to them and these only have just the default ID so what's going to happen is if I make an adjustment to the font size on these those are gonna match those are gonna basically be in tandem with one another because of the class but the other ones don't have this class attached to them so the changes I make on those headings don't apply to these so in this particular example what I'd have to do is click on each heading and have to delete the data under this ID and add in my hit my class which is filters headings and then now it basically assumes the the the settings that I put in on the other headings okay so let's go ahead and take a look on the front end now and you can see all of the filters that we've created using facet WP are fully functioning and available so the price slider works our color box works and so at this point we're basically ready to go ahead and set up our EZ posts to look exactly how we want it to so the first thing I'm going to do is click on the EZ post element I'm gonna choose the load settings to kind of get a preset here and I'm going to choose the second one and then animate it dark gradient overlay so click on OK and there we go so you can see this one looks a heck of a lot better than the other one did just right out of the box but it's not quite what we want when I hover over this it has that that nice-looking dark gradient with the excerpt text but I'm not really interested in that at this point what would be more appropriate is the price and the mileage like I showed you guys earlier so what you can do is under templates click on pH P first and there's two things we need to delete the first one is going to be this date overlay here and then I'm also going to delete this div here which is the excerpt then click on apply and I'll collapse this and you can see now there's no excerpt and there's no date so that's closer to what we want but not quite we're gonna go back to the template CSS and scroll down until you find this gradient kind of background image section here and change this to something more like you know 750 pixels for instance and what that does is take some of the gradient out so you can see the clue the photo much more clearly but of course we still don't have our price and our our mileage overlay on that the way you get that done is by going back to the template PHP and find this line right here so this is the actual title of the post which is how these names of the vehicles are appearing go ahead and make some extra space for yourself and we're gonna we're gonna basically input a couple of divs with the code that pulls the data from advanced custom fields so we're these these div class names do the exact same thing that I do for the sake of being able to use selector detector later on the reason why we turned on selected detector earlier is so that we can style these these divs without having to write the CSS manually so first of all just start off with the div class is equal to do oxy V data and my thought process there is its oxygen vehicle data similar to these other ones so it's oxy post title for instance just above here I wanted to do something similar oxygen vehicle data is my thought process there and then what you can do from here is stew div class is equal to epoxy vehicle price and then what you're gonna do is dollar sign PHP the field and then our field name for price was just called price that's the advanced custom fields name and then we're going to do hmm like so then from here we're gonna close out that div and then do /div again and this div right here is closing this one that we called oxygen vehicle theta so now what I can do is go ahead and click apply click apply code and you can see just very faintly that the price is now displayed exactly how we want it to which is awesome so that's one step out of the way keep in mind this can be used to display any of the advanced custom fields data that you feel appropriate so again just a div class is equal to oxy vehicle data or sorry mileage is gonna be the other one and then we're gonna do HPE field and then this one is going to be mileage and from here then we're just gonna close this div and I want them to be organized so you can kind of see exactly what we're working with and click apply code again and then now you can see the mileage and the price are displayed perfectly there so I didn't actually need this dollar sign that was just me typing in correctly there and that dollar sign is just simply to have the the you know dollar sign in front of the price where in this case you could go mileage you could write the word miles afterward and click apply code and then you can see 61,000 979 miles is what that says so that's pretty much exactly what we want let's go ahead and click collapse editor and from here we're going to go to manage selectors and we're gonna add in the selectors that we just created so do dot oxygen vehicle data and we're gonna do all three of these oxy vehicle price and then we're gonna do oxy vehicle mileage so there you can there you go now you can see the the data field is already selected and because we have selected detector enabled what I can do is click on advanced I can go to layout I want to do Flex and then a row and then I want space around and so or placed between depending on which one you think looks better let's do space between and what you can see is now the price and the mileage are on the same line which I think looks really nice from here what I'm going to do is add a border to the top and bottom using our global color which was that nice gray I'll do with solid and then on the bottom same thing Pat on that global color with one pixel solid bottom and although that looks nice of course you can't read that text so all you got to do is click on oxygen vehicle price and now that selector is enabled so click on advanced then do typography and you can change the font color to something like white and there you go do the same thing for the mileage click on that go to color and just white is exactly what you're looking for so that's perfect that's all you need so then click on save and let's go back to the front-end and we'll do refresh its gonna keep all of our filters from before because we refreshed and there we go so now you have your price and your mileage displayed on this nice little kind of lined box here and so that's basically our archive template completely done so that's really exciting let's click on save and then we're going to return to the admin panel from here ok so now we're ready to set up our vehicle details template and this is going to be the one that actually displays all of the information for each particular vehicle so if you were to click through let's say on the BMW this is going to be the page that displays all of the information that you would want to see specific to that vehicle so vehicle details we're gonna call this one click on publish once again we want to inherit the design from the all pages template and then under singular this time as opposed to archive du singular and vehicles then click on update and then click Edit with oxygen so because of how nicely oxygen plays with advanced custom fields this process is going to be very straightforward on how to actually input all of the data that is stored in advanced custom fields so the first thing we're gonna do is start off with a section and this is going to be kind of our container element here and what I want to do is once again set the container padding to zero on both sides and then we're going to create a custom layout here using a couple of divs so the first one we're gonna set up is going to be a div that stretches the whole width of this container so change this width to 100 and I want the background color to be our slate color like that and then let's change the typography color of this particular div to white that way we don't have to edit it for every single element we can just add it in and go from there so let's add in a heading I'm going to double click this text and do insert data and choose post title and as you can see up here we're previewing the 2015 forward post and so what's going to happen is it will automatically fill in that post title for us which is super cool I'm gonna select this div and add in some padding we'll do 25 pixels all the way around and then let's also go ahead and display the price and the mileage in this and the slate blue div up here so go add and then we'll just do a text field and we'll do insert data and under advanced custom field let's do our price first that's probably one of the most important things people would care about and then from here we'll do duplicate and we're going to go to insert data and once again advanced custom fields and we'll do mileage now what you can do is you can see this oxygen data is pulling in the advanced custom fields and I want to add the word miles afterward I'm gonna add in a dollar sign ahead of this at the beginning of that so you can see the price so that's perfect that doesn't look terribly enthralling so what I'm gonna do here is actually set the child elements to stack horizontally I'm gonna do middle alignment and then we can do space between now on our previous site what we had is our price and our mileage stacked on top of each other and because we've set our child elements horizontally the way we achieve that layout is by selecting the price and what we can do is say wrap with div then what happens is we can take our mileage and drag that into that div there and now you can see those are stacked on top of each other on the right-hand side of the page what I can do is give this div some padding and then we can assign this to be right aligned so that looks pretty nice I'm gonna go ahead and just take up the font size on these because somebody's probably going to want to care about the price more so than then the mileage in this particular case we'll just go let's say that one's pretty big let's say twenty six pixels so that that looks basically exactly what we're after there maybe even take this down to more like 20 so it's not so huge those kind of fit more nicely like that so that looks good and there's our kind of headline div setup so from here what I'm going to do is collapse this go back to our section and add one more div and this one's going to be a similar approach except just for the sake of styling I'm gonna set this width to 95 percent and then we're gonna set our background color to kind of a lighter tan to sort of compliment that navy blue that you're seeing up top this background color we're gonna set to that sort of tannish and I'm gonna say we'll just call this tan for the sake of this example I'm going to set our section to a line center so this tan div is nicely centered and then I'm gonna do a similar approach to how we set up this one I'm going to add in let's say just a regular text element so what I'm gonna do is insert advanced custom fields and minimum miles per gallon so this one's just going to input a number here you can see 16 so I'm going to do at the end of this I'm gonna do 16 mpg city Calma and then we're gonna do insert advanced custom field and Max Highway mpg insert that and then I'm going to do mpg highway like that so now what's gonna display is 16 MPG city 22 mpg highway which is perfect once again I want to add a little bit of padding to this will do 15 and then let's go ahead and add in another text element this one is gonna display our transmission type so go insert advanced custom fields transmission and I'm going to go the word transmission after so that way it says automatic transmission in this case and one more time I'm gonna add in just a regular text element nothing special here but I'm gonna say call you know 8 5 5 4 4 4 1 2 3 4 that's gonna be our dealerships phone number from here I want it I want it to stretch kind of across this whole container so what I'm going to do is change stack child elements to horizontally and then I'm going to do middle alignment and space between and there you can see now you can kind of modify the layout a bit so you could have everything squished to the left kind of Center aligned or spaced between so that way it looks all nice and neat a couple other things I'm gonna take this div and do a little bit of negative margin to pull that up a bit and then let's go ahead and under advanced borders we're going to set our border radius on the bottom to 3 like that so it's got a nice little curve effect and I'm going to do the same thing to this top div up here borders there's gonna be a border radius go through it 5 on those left and right corners and there we go so there's our kind of headline setting so we have all the important data displayed above the field and so now we're ready to go ahead and add in another section which is going to contain our photo gallery this one is really straightforward so click on add go to helpers choose gallery and then make sure you click on ACF here and because our ACF field is just photo from their score gallery you can click it like that and then it should pull in all the photos of our truck here so there we go that looks fantastic I'm super happy with that change the thumbnail resolution to something like medium/large which will help with page load times and just you can see how much quicker those previous loaded in this case our layout I'm gonna change - let's just do three images per row that looks fine and our image minimum width changed to 150 for the mobile responsive settings one more thing I'm going to do is add in another section and this one is gonna be our call to action so the background color will be that slate our text color is just going to be white and then let's go ahead and add in a heading a dealership might say call now for five hundred dollars off that seems like something a car dealership would say and what I want to do is add in a button now so we'll click on this button and then say call eight five five four four one two three four that's her it's our phone number and then from here what I'm gonna do is once again state say stack child elements horizontally middle align and then space between and that pushes it to the left and right edges which looks really really nice so let's click on save and we'll take a look on the front end so there's our vehicle details template pretty much set up you have this nice lightbox gallery like I showed you guys earlier and the call to action is in our template as well as all of this data being pulled from advanced custom fields and set up in our vehicle details template so that's super exciting okay so we've completed our vehicle details template I'm going to actually go back into the vehicle archive template because there's one setting that I forgot to show you and I want to make sure you guys see this you're not doing the same work twice to click on edit with oxygen okay so go ahead and click on the ez post element and you'll see there's an option here that says save current settings as preset you can title this whatever you want but I'm just gonna call it all vehicles for the sake of this example because what we're gonna do now is click on save and go back to our WordPress admin menu because we want to actually set up our home page which we can do by creating a page just call this all pages add new and then let's title this one home and then we'll edit with oxygen so our home page is going to be very straightforward we're just gonna add a section we're going to add in under helpers easy posts and then our load settings from preset all the way at the bottom here you can see all vehicles just gonna add that in and then we have to change the query type to custom go to post type and then choose vehicles and then click on apply query params parameters and there you go there's all the vehicles displayed on the home page and you don't have to set up the data fields twice you don't have to do two separate easy post blocks it can just be one with the same preset just for the sake of this example let's go heading and we'll just change this heading up to the top and call this recently added vehicles perfect and then click on save now let's go ahead and setup our contact page and create our WordPress menu let's go ahead and copy our contact form shortcode so this one is straight out of the box with contact form seven copy that and then we're going to go to all pages and then we'll just call this one contact paste in your shortcode and click on publish then from here we're going to go to appearance and menus we're gonna create a new menu will just call this main menu we'll do contact and then what you can do is under screen options if you click on vehicles that will enable this option over here and you can either add in individual vehicles or if you wanted to you could just create a custom link here that would be vehicles which is the URL of our archived template and you could say view all vehicles I'm gonna arrange this just a little bit differently put our contact page down at the bottom click on save and then like I told you earlier now that we're actually at a point where the menu is created oxygen will have picked that up so we'll go to settings and then reading change our home page real quick to home and then we'll just visit site and there we go so there's our home page set up really nicely with all of our recently added vehicles it's got our advanced custom fields data being pulled in automatically then under our vehicle archive template we have our left-hand sidebar with all of our filters fully functioning and ready to go still displaying our advanced custom fields data and the oxygen easy post of course we also set up the vehicle details template and this is all once again configured using advanced custom fields and the oxygen data function and our WordPress menu is ready to go with our header and footer template I hope you guys found significant value in this video and it's helped you spark some ideas on how to create some really powerful sort search and filtering functionality for your website be sure to click the link in the description below to learn more about oxygen and visit my channel as well like I said my name is Jonathan and my channel was promise like I hope to see you guys there and I will definitely see you in a future video

Channel: Oxygen

Views: 32,664

Keywords: oxygen builder, oxygen app, oxygenapp, wordpress, site builders, page builders, advanced custom fields with oxygen, how to setup product filtering in WordPress, how to setup post filtering in wordpress

Id: WEpSwRehdWQ

Length: 47min 0sec (2820 seconds)

Published: Tue Nov 13 2018