Building A Car Dealership Website With Advanced Custom Fields & Elementor

in today's deep dive video for WordPress and elemental pro I'm gonna take you through and show you how you can build an online car sales based website we're going to take a look at how we can create custom loop items how we can set up filters searches all those kinds of good things this video does assume a certain level of prior knowledge though so as long as you're comfortable with advanced custom fields the basics of it at least understanding where it does custom post types deal with a theme builder inside Elementor pro itself then you should be good to go however if that isn't the case I would recommend taking a look at the playlist it's in the description below that's gonna get you up to speed with most of those fundamentals that you need to follow along with this video so provided you are okay to follow along let's just jump in and take a look at all the plugins we're going to be using for this particular tutorial okay so let's just take a look like always at the key plugins that we're going to be using for this particular tutorial there are not that many when you consider how much power is inside a site like this but bearing in mind some of these are commercials some of them are free but if you want to get this kind of functionality unfortunately you are going to invest into some of these more advanced plugins so let's take a quick look of what we have first of all we got admin columns now this is one of those plugins is free this is not the pro version you don't need to use it but if you're going to be working with custom data it does make the whole dashboard file side of things just a little bit more user-friendly next up we have advanced custom fields Pro this is the pro version if you don't want to use some of the things like repeater regions or relationships you could probably get away with the free version however for this video we are going to be using those functions so the pro version is essential classic editor just basically because I don't really like using guttenberg custom post do you I know I showed in a previous video in a different video that shows you you could use this to set things up and then if you wanted to you could disable this plug-in with all your custom post types in place I put a link to that in the description if you want to take advantage of that way of working however we're going to be using C ptui to set up those taxonomy Xand the custom post types dynamic content for Elementor we're going to be using that because we want to tap into the relationships we want to tap into repeater regions and we want to make the whole process of building those into our templates a lot easier than hand coding dynamic conditions completely free plug-in just very useful when you want to show or hide things especially if you want to hide empty fields as part of your template elemental custom skin or any custom skin because we're gonna create our own custom loops again if you don't want to do that you could do away with it but it is a free plugin the pro version has some extra features but you don't need it what we're going to cover in today's video Elementor an elemental pro the pro because we want to use the template in structure that we've got that the theme builder and so on so pro is one of those things that for me is essential for a project like this and finally we've got search and filter Pro now if you've watched any other of my other videos like this where we look at more complex websites you'll see I've pretty much always used search WP and facet WP however just for sort of balance and for the fact that this is considerably cheaper than those two plugins we're going to be used in search and filter Pro for this example we can use it and it'll work pretty much perfectly the way we wanted to for this kind of site so it opens up some opportunities some possibilities maybe even just a different direction to using those other tools that I tend to favor on a more regular basis well that's basically the key plugins we're going to be using for this particular tutorial so the first thing we're going to do is take a look at creating the basic custom post types and also the taxonomy or taxonomy that can be used now when you're working with creating a site like this which is a more complex site with lots of different types of data there are lots of ways in which you can create and structure things there's no right and wrong that's just how you want to put things together in the most logical of fashions so for this example we are going to keep it fairly simple and streamlined we're going to take a look at creating a couple of custom post types and also a taxonomy but obviously if you were doing this for real you'd probably have a lot more data that would need to be organized and structured but these techniques are very more important than the physical doing now as always I am going to assume a certain level of knowledge so I'm not going to describe every single thing we're doing in this gonna go through a lot of this fairly quickly so if you're not accustomed to working with custom post types and meta fields and so on I do have a comprehend beginners set the tutorials for that which I will link in the description below take a look at those then jump back in to take a look at continuing on with this tutorial okay so first step we're going to create our custom post type for our vehicles so the commented custom post type UI and we're gonna say add edit post types from there we're going to give this its post slug which is going to be vehicles so I'm just gonna type in vehicles the plural label vehicles again with a capital test time and singular we'll just drop there and then take the asset so we're gonna leave all the rest of these as they are we'll just leave the default values inside there I'm gonna come down then into the setting set we're going to configure a few things inside here to make sure everything is laid out the way we want it to so it's public yes we want that probably a query bull show UI delete with user we're gonna all right the way down until we get to the point of has archived we need to set that to true otherwise we'll have no archive to work with and none of our vehicles will actually show up so you see make sure that's all set up inside there and then come down and make sure that everything else is done so hierarchical we're gonna set that to true scroll down and let us say menu position it's up to you you could set this wherever you kind of want I never said this to be view at position once it's right at the top show in menu we want that to be true and we're simply drop in an icon we want to use I'm gonna drop that inside there and if he wants everything else up we could set that up you can see we've got supports and so on so you leave everything as it should be inside there that's pretty much all there is to it so you can say add the post type and once that's done we now have vehicles at the top all ready for us to start using now I'm going to create our second post type this is gonna be we deal with the dealerships these are the people or the companies that will be selling any of these individual cars so we're gonna drop in the slug for that the plural label and the singular label a cambium do exactly same thing when I leave all the values inside the additional label section as they are they come down and we're going to just make sure that everything is configured inside here as well so again we want to say has archived exclude from search no hierarchical through and there we go everything else we can just basically do everything else as it is now you may be wondering why I'm setting things too hierarchical I might not actually be used in a hierarchy type situation it's mainly because I just prefer the way in which WordPress actually presents a hierarchical based setup what I mean by that is when you go in and you choose from any of the sort of hierarchical set that we have checkboxes we can just choose what section they want to go into so whether that's things like manufacturers for taxonomy and so on it just means you have checkboxes if we don't set the hierarchical we physically have to start typing values in to see exactly what will come out from the ones we've got created for me that's a usability issue I think it's a really bad way of working with things when you're gonna have values like vehicles and things you want to organize things so like I say it's a personal preference you can set it whichever way you want to unless of course you are specifically using a hierarchical setup for structuring your data okay so that the way everything else now should be in place I'm gonna do is just scroll up and we're gonna say add post type so that's our two custom post types our dealerships and our vehicles next up we need to create a taxonomy so I'm gonna come in to add edit taxonomy from there we're gonna add in a taxonomy now which is gonna be for our manufacturers so we're gonna do exactly the same thing again so working with taxonomy is working with post size what are the values of a was the same so let's put in the singular and the plural we need to do is attach it to a particular post type obviously this is going to attach to our vehicles so we just gonna click on vehicles leave all the additional data as it is on a camera that it come down underneath and make sure that all our values and our settings are set up the way we wanted to so again hierarchical I'm gonna scroll down make sure that we've got rewrite hierarchical is set to true now show an admin column now this is one of those things that is very useful if you don't want to use the tool like admin columns the plug-in we installed at the beginning of this video section then you could if you wanted to just use this in its place however you can only use it with data this setup as part of your actual custom post types additional data like ACF field data and so on you can't pull in so there's a happy compromise that if you want to use it I'm gonna say show in admin call and I set that to be true so that will show the manufacturer next to any of the vehicles I'm also gonna say show in quick bulk edit panel so this is where you can quick edit anything inside the actual Dyer dashboard of WordPress this just makes the whole process of setting up manufacturer as a quick and easy way if you forget to do it so we're gonna hit true on there we say add taxonomy we've pretty much got everything set up so cover to vehicle as you've seen now we've got manufactories in there all vehicles and add new and dealerships we've got all dealerships and add new so we can now start populating that with actual data which means we could then start building things out once we've set up our custom fields to associate with these custom post types so you've got kind of different groups of meta fields that we need to create so we're gonna start off first of all with the vehicles and then we'll move on to some of the sort of simpler ones after that go to our custom fields are we're gonna say we want to add a new field group Thursday we do is give this a title we're gonna call this field of vehicle details we're gonna leave the fields a moment we'll set those up in a second first thing we need to do though is set this post type and set up our condition for where these actually are going to be used so we need to do is say post type is equal to and change that to vehicle so now we're going to associate any of the meta fields we create with our custom post type of vehicles okay so with that in place we're now ready to start creating our different fields so the first thing to do is say add a new field with a drop in vehicle price you can see it automatically like with and select that field value or the feel tight we're gonna set this to be a number let's scroll down and make sure that everything else is set up now obviously because we're gonna sell things on here we're gonna make this a required field where they come down we're going to say prepend and we're gonna put the actual pound sign in this this is just the currency style this will just put it into the dashboard of WordPress it's not gonna make any difference on the front end when we create our templates everything else we're going to basically leave as is so that's our first field next step we're going to come in and we're gonna just use a vehicle color option so again same kind of thing add a new field give it a name choose the field type you want text is perfectly fine for this example required yes that's that one done we're gonna say add another field now I'm gonna go through most of these because there are various different field types and they have different options associated with each one so this time we're going to be setting this to vehicle engine we're going to change the field type with a set this to be select so we can choose from a list of preset values so I'm going to say select the next step we're going to drop in what we want as far as to be so is set this to be required and then we've got the choices so all gonna do is we're gonna put each of these choices on his own separate line so we've got petrol diesel hybrid and electric for our vehicle types but obviously you could set this to be whatever you would want scroll down and you see return format we're gonna set this to be a label and that's that one done so gonna close this down I'm just gonna move on to the next one which is going to be our vehicle specifications so with this one we're gonna drop in a new field vehicle specifications and we're gonna set this to be a WYSIWYG editor and that gives us the ability then to have a fully editable section where we can use all the normal editable keys things like bold italic underline if you wanted to you could upload images into this if you've set that up in such a way just gives you the ability to create a much more visually appealing layout for more complex content so WYSIWYG editor that's perfectly fine we're gonna come down and you can see we have set this to be required to yes then we've got the tabs you can see we can choose for visual and text visual only or text only we're gonna save visual only for this because we don't want people to get in and start adding anything into the code itself we can also choose the toolbar between full and basics it's up to you if you want to give people a lot of options or you want to keep it to a really simple stripped back version we're gonna set this to basic you can control whether you want to show media upload buttons if you want allow people to upload media into this specific section you can do we're gonna set that to not have it included and that's pretty much what we want for that particular field next that we've got the vehicle options which is going to be a repeater field now a repeater field is a great way if you don't know how much information is going to be put into a particular area inside design and you want to give people the ability to keep on adding as they need to so let's just add a new field in we're gonna drop in our field table of vehicle options and we're gonna come down then into the field type and this is why you need to have the provision of a CF otherwise you don't have access to these so we're gonna scroll down until we find the option we want for repeater to a choose repeater and you can see that will now open up a sub section now this sub section is fundamentally exactly the same as when you create a normal metal field we're just grouping these into one little sub section so let me just show you what I'm talking about we're gonna have two different sections inside you for this repeater region so we can say add a new field the first one is gonna be the option name and in-ceiling click underneath and it'll automatically pull that data in for us exactly same as creating any other meta field field type of text is perfectly fine and if you want to set any other values inside there you can do we're gonna leave this really simple and we're gonna add one more option inside here and we're gonna come back up oh it's a add field can drop it option price and this one is going to be a number field and that's basically all we want to do other than putting in the prepend and put in the currency sign okay so that's how an option price is set up okay so we've got some other options now specific to the repeater region type we're going to leave collapsed as it is are you see if we come down minimum rows maximum rows so you can specify how many different items people need to put in either a minimum value or the maximum number they can do the layout is only to do with the dashboard side of things when you're actually adding content and this has nothing to do with the front front end of the site so just bear that in mind so we're gonna leave that at the table the button label we're going to change that to add a new option so it makes a lot more sense to what's currently going on with this part of our site okay so let's just close this tab close the vehicle options there so that's our repeater region in place next up we're gonna add in a gallery now this is where we're gonna allow us to upload multiple images for this taking a vehicle so we'll name it will set the field type and again this is something you need if you want to use the gallery feature you have to have a CF Pro so choose gallery we can then set up how we want this to display and again this is primarily to do with the actual backend part of the site not the front-end so we're going to set this to be image array to return the values because when we're working with the gallery widget as part of elemental Pro we have to return the array of images so just bear in mind different plugins and different ways you display this might require different return formats and the next I wanna draw your attention to is the library option you can see we can have all four upload to post now what I would generally recommend if you're working on a production based site is to set this to upload to the post what that means is that any images associated with the vehicle you're creating will only be uploaded to the post and not available inside the normal WordPress media library to everybody just means that when you delete a post all that data will go with it and it keeps everything nice and clean and logical for this example and then leave it to all because I'm gonna read reusing images throughout the entire design to make my life a little bit easier but like I say for you I would recommend upload the posters be in the key option here we then got minimum selection maximum selection the minimum restricting images on upload and all those kinds of things set those values if they are applicable to you what I would suggest though is setting the allowed file type so what I'm gonna do is I'm going to drop in the various different iterations of the file types that I would allow to be uploaded separated by a comma this means you can't upload PDF and you can upload Word files and Excel files just means the whole process is a little bit more logical and structured and reduces the fact that you could have junk uploaded in the wrong places so that's the gallery field all set up we're not gonna add in a subheading field and this is just for a design sort of side of things you wouldn't need to do this it's just the way I've set things up so I've set this text is perfectly fine and then I'm going to put in some instructions and instructions it's just a good way that if you're offloading this to a client they may not necessarily understand what a particular meta field relates to so you can drop in instructions to make it a little bit easier and logical for them so with this we're gonna set a character limit of 75 Sony a small space that we're going to be working with within our design so once we've done that the final thing we're gonna add in at this point is the features section so I'm gonna create another field name this features and we're gonna set this to be a checkbox again so we'll scroll down choose checkbox and then we're gonna drop in a couple of options for that so exactly as we did earlier on we're gonna drop in some different choices for these particular types of vehicles and then we'll scroll down we're gonna set the layout to be horizontal table all we're gonna say yes to that because that just means that someone can easily click the toggle or or disable all to quickly add all the different options in without how to click on everyone every single time return value again like this all your own value label or both we're going to leave that set to value because we're only working with values and that is the basics of this particular set up I'm gonna come down just take a little look and you can see if we want to we can do things like hide on screen we can specify where different things gonna be displayed and so on all those things are perfectly fine with either as they are we'll set the order number though to two so once we've done that we've now created all the meta fields we want to associate with our vehicle custom post type we'll publish that and we can take a look at our vehicles now we're going to click to add a new one you see all those entries are available to us next meta fields we're gonna create a to do with the dealership now I'm gonna keep this like I say really really simple but you could add as many details as many meta fields as you wanted in the applicable to the job that you created so let's say add new we're gonna put in the title of dealership details and again with a separate location before we set anything else so what the location is going to do is set this to be post type is equal to dealership that's it so all we need to do we're gonna add in one single field which is just going to be a location option which allows to put in the actual location of this particular office whatever text we'll just leave it as it is so like I say this is a really simple example cuz we're still gonna have the title description and the featured image you still have those in the standard hit publish on there and that's that section done the final thing we're to do is add another custom field group and this time we're gonna create the link between the actual vehicle itself and the dealership so we're gonna complete this and call this relational fields now obviously you could call us whatever you wanted to but I just setting this up so it just makes a little bit of logical sense to what I'm actually going to do so pulse type is equal to or set this to be a vehicle and once we've done that we're now gonna create the relationship so we say add a new field we're gonna name this dealer feel net that's fine change the field type and they're gonna just scroll this up a second when it come down and we're gonna just choose relationship so there we go relationship is the option now there are multiple different relationships you can set up this is a very simple and straightforward one so we're gonna do now is we're gonna specify how these things link to each other and where we want to use them so the first thing filter by post type we're gonna click on there and we're going to choose the option which is going to be dealership so we're gonna be linking the vehicle to the dealership all taxonomy we can leave that as it is we want to do though is uncheck these options and we're just going to leave that set to be search the filter is only gonna use this to search let me say set the featured image we can pull that data in if we want to and everything else can basically be left as it is so we need to do now is just simply publish this and we've now created that link between the vehicle and the dealership so if we just jump back into the vehicle section we come in and click on add new if we scroll down you can see we have a new section called relational fields and you can see currently we have nothing set up in there we've only got the search we don't have the post type and a taxonomy filters if you want to see this in a little bit more detail I've created its own dedicated video on how you can set up relationships I'll put a link in the description below so you can check that out if you want to just grow of things in a little more detail currently obviously we have nothing said that we have no dealerships inserted and no vehicles inserted so what I'm going to do now is behind the scenes and just gonna quickly go and add in a couple of vehicles to our custom post type and add a couple of different dealerships and then I'll show you how easy it is to link those things together so start Lee put in some details I've already created the manufacturers I've added a couple of dealerships in and we're now creating our first vehicle so all the normal things are in place the title the description the manufacturer which they were custom taxonomy we have the relationships field which I'm going to show you in a moment and we also have we come down we've got the vehicle options and some other things at the border which we'll take a look at in a moment now you see what's happening is with the dealership that's looking at that relationship we set up and now shows me all of the available dealers if I wanted to I could just say start filtering on there and you can see that will live filter and filter out anything that we don't feel fits in or if we're looking for a specific dealership however if you want to you can leave that as is and then all you need to do is click and you see that pushes that over to the right hand side that's now been associated with this particular vehicle if it's a mistake you can click on the little minus to get rid of it click to add another one in and you can add as many of these as you want to at the bottom so that's how we can set up the relationships we've created it and that's how easy it is to actually associate those with a particular vehicle if we scroll down we'll take a look at the options you can see we can easily come in and add new options in so we say add a new option you can see this puts a new row in ready for us so we can now simply come in and type in whatever we want to add in as our custom options so let's just say for this example we want sports suspension and then we can go to price value to that so we'll say that was fifteen hundred pound as an optional extra add another one in and you can see keep on adding these so tinted windows I'm gonna say that was five hundred I would add a third one in and we'll say this has got 19-inch alloy wheels let's correct that and we say that was a 2,000 pound optional extra our gallery we can say add to gallery and we can now simply upload images and choose the images we want to insert into there so let me just upload a load of images a second these were all been resized ready to be included so we're gonna upload all of these and then I can quickly and easily choose the image that I want to use so let's just select all of these is this once we don't want to say we want this one don't want this so you just get rid of all the ones that I don't want because I just uploaded these right now however normally you just have this would be an option to just choose the ones that you actually want so we'll hit select there's our gallery inside there so that's all nice and neat now subheading we're just gonna say 19-inch alloy wheels this is just sort of like a just subheading to draw attention to one of the key features that we like and the features underneath will be inserted those and we put the toggle all button and you will see that puts that at the beginning so I can click I had all of those I can click again to disable all of those so it's a nice quick and easy way of L to add what we want in or we can say toggle them all on and just take off the ones we don't want so we give people options and an easy way of choosing exactly how they want to work like I say we'll have all of those everything else is in place we just need to set a featured image and we'll say we'll use this particular one we'll just say set featured image and that's our first vehicle set up with all the associations set up as well so you'll publish that we've now got our first vehicle we go into all vehicles we'll see it's listed there so I know do that a couple more times now to add a few more vehicles in and then we'll move on to the next stage which is starting to build out those templates to start display in the actual information that we've inserted into our current project so now that we've laid the groundwork we've added some vehicles in created that dealership linked everything together we're now ready to start doing the front end of the site so the first thing I want to do is get rid of all these templates and install the one template and I want to use now because we're going to be building pretty much everything from scratch we're not gonna be reliant upon the theme set up we are gonna be using the holo theme for elemental because it's a nice simple clean blank layout so first of all let's just say add new we're gonna come in and we're going to search for holo there we go there's the themes we're gonna say install that once that stalled we'll quickly activate it and we are then pretty much ready to go so go ahead jumped over into the theme builder of elemental pro and set up a basic header and footer just so we've got some content at the top and bottom of our templates so with that out of the way we're going to come the new sections been added now that we have Elementor custom skin installed and that's the loop option so we click on there and we'll start building our first loop which will display the contents for our vehicle so say add let's just call this default vehicle and we'll say create template once we've done that that'll take us over now into the elemental editor and as you can see we have no templates saved so we just gonna close this down I went to the normal editor itself now you can see there's my header and footer currently they don't really have anything in it but they're in place ready for when we want to put that extra data in completely look at our site so the first thing we're gonna do now is create this basic layout we're gonna do is keep this fairly straightforward we're gonna have a simple nested layout so we're gonna click to add a single row column in we're gonna set the column gap to be no gap because this is just effectively going to be a placeholder to contain the relevant different things that we want so I'm back at our widgets I'm going to come down to intersection and drop that inside there we're gonna add an extra column in to add a new column and we're gonna set our first column second column and third column of widths so we're gonna do is we're gonna come into this third column choose that I'm going to set that to about 15% we're coming to our first column and we're gonna set that 30% that will then just basically work out what the middle columns got to be so we've got the basic placeholder layout set up in there so the next thing we can do now is just start drop it in the elements that we want just come back to our widgets come over choose featured image drop that inside there and you see nothing actually displays now that's because Elemento doesn't really know what to display yet so we can rectify that so coming up the middle settings cog in the bottom left hand corner click we've got preview settings gonna click on that now at the moment it's going to try to display the hello world which is a normal post which is not what we want so first thing to do is check exactly where the date is going to come from click on Nate we're going to come down and choose vehicle next step we're gonna try to pull in all of those so we're gonna click to change that and we're gonna just type in one of the names of the vehicles we've created so we go for the Focus RS hit apply and preview should find that'll reload the page then a start loading in the data so there we go we can now see one of the vehicles that we've set up this is the part done next up we're going to come in now to the middle section and drop in some of the data that we want to display inside there so first of all let's say we want to pull in the post title drag and drop that inside there you can see that pulls into the title next up we're gonna come in and we're gonna choose normal widgets and it's up to you we could use the heading if you want to all the text editor it doesn't really matter too much because we're gonna pull dynamic data anyway so I say text editor drop that underneath the name of the vehicle it'll click on this little dynamic tags icon and we can now choose where that dynamic data is going to be pulled from we're going to scroll right the way down and we're going to choose a CF field now click on that that will now activate the a CF field link but we've got to tell it what field we want to link it to click on the little wrench icon from there we've now got the key and the key is basically the name of the field do we want to pull data from click on there and you can see we've got dealership details that we've got vehicle details so these things are pulling in the relevant different groupings from our meta fields so we want to do is we want to simply come down and we want to choose subheading this is this little little call-to-action about that particular vehicle that makes it a stand out vehicle ok so that's that put in there next up we're gonna come in and do the same against we can add another one come down choose text editor drop that underneath where it says tinted windows click on the dynamic tags icon scroll down to the bottom and choose a CF field click on the little wrench icon and choose the key field that we want this time we're gonna come down and choose features this is going to list those features that we ticked off so things like abs power steering and so on so that's the next one done do the same thing again then drag and drop underneath this time we're gonna choose a different dynamic tag so it click dynamic tags and because we have Elementor custom skin installed it gives us a new option called post summary and what this will do is this will pull in a set number of words from our main content so say post summary we can do now is we can click on the little wrench icon again and this now tells us we can set the length of the number of words that we want to include in here so it's up to you what you want to set this to obviously this is a very brief synopsis of the vehicle so we want to keep this quite brief you could alternatively create a dedicated field that's the information about the vehicle and then reference that in a very similar fashion entirely up to you how you want to go about doing it but the end result will be fundamentally the same kind of thing okay so that's the data we want to pull in to the next thing to do is come over to our widgets again we're gonna grab heading this time and drop that over onto the right-hand side and they says we're gonna put the price in so in a set this to be a smaller heading because it is quite important when it comes to the overall structure of these sort of listings so you say heading 4 will set this to be centered and we're gonna do now is gonna click on the little dynamic tags again and we're gonna just scroll down until we get to those ACF fields expand it out click on the wrench icon click scroll down until we find vehicle price this time we're gonna drop in and do the advanced I'm gonna come in before I'm going to type in the word price and we're gonna put a pound sign in there so we know exactly what we're talking about you see that now prepends that information so that tells us the price is 32,000 pounds for example so there's the basics we can style those in a moment the next thing I want to do is drop a gallery of the images to sit underneath this particular vehicle and the details so I'm going to come over to our widgets we're gonna click and we're going to search for gallery we're gonna grab this final option which is the newer gallery that's part of Elementor Pro because it has a lot more control over it and works really well in this kind of layout so you drag and drop that will drop this underneath that nested three column setup so it's gonna sit inside our main container but underneath these elements so we're gonna do is going to click to make sure that's active single is perfectly fine and we're now going to come in and click on the dynamic tags option you can see we have less options now because this is a gallery field it's intelligent enough to know it's only looking for data we can pull form that's a gallery so you can see a CF is listed there and we going to say a CF gallery field click on there click on the wrench icon again and we're gonna choose the key and we're going to say which gallery it is because you could ultimately have multiple a CF galleries as part of the way you set things up so click on gallery and you can see after a couple of seconds now let's just start pull it in data so there's the details we want to lazy load it's up to us now sometimes I do temper find you can have a little bit of a quirk with this where they don't always load incorrectly so bear that in mind if you see this a kind of strange discrepancy the lazy load may be the reason for it we can choose the different kind of layers we're gonna leave it as it is and we're going to set the value on you to be eight this means we get smaller thumbnails and we come down at these we can choose the spacing we want to apply around those thumbnails what it links to the aspect ratio and so on so I'm gonna leave those values as they are except for the link to because I don't want a click so you can open the larger versions of these up I want to be clicked and I'll take you through to the vehicle details to do that under the link we just simply come in and we say custom URL that will open up the URL link and you can see again we have the dynamic tags option to click on dynamic tags and we're gonna come down and choose post URL so that's gonna link it through to the relevant URL for this specific vehicle so all the elements are now in place I'm gonna quickly go ahead and style things to make sure it all looks a little bit neater and tidier I could say I'm assuming if you were working on advanced custom fields based websites you can be more than accustomed to dealing with customizing the look and the feel and apply and font styling and global theme styles and all those kinds of things if that isn't the case I've got tons of videos on this channel on how to get the most out of working with elemental an elemental pro I'd recommend do a quick search on there and take a look at how you can do these kinds of things ok so there's a little bit of styling added to it now before we go any further and we save this as a template we need to do is set up a couple of conditions because there are times where you have some optional entries that people may not actually fill out and you don't want to end up with empty spaces there so for example we've got the subheading and we've got the features there may be nothing in those so let's set up some conditions to make sure that if they are empty nothing is displayed and it closes that what would be gap up where that empty space placeholder would be so we'll select this to make sure it's active called the Advanced tab because we've got dynamic conditions installed we have a new entry underneath the Advanced section we can use this pretty much through the entire site with brilliantly with templates so you click on dynamic conditions we set up the parameters for this name so it's very easy to do all you need to do is specify what the trigger is and what happens based upon that trigger so the first thing is tinted windows this is the subsection subheading section we click on the dynamic tags option scroll down till we find the ACF fields click on ACF field click on the wrench icon then just expand that out until we find subheading that's the basic trigger done so now when you say what happens does it show or does it hide when the condition is met so we're gonna say hide when this is empty so say hide when condition met and the condition is going to be is empty you'll see we go little eye icon on the right-hand side now telling us that we've set up a condition and it links through to that will either display something or hide something we could do exactly the same now for the next option for the feature so we're gonna click on that to activate it over to advanced doubt the dynamic conditions set our Tag ups gonna scroll down a CF field click on the little wrench icon come with a key and this time it'll come down and choose features close that down and we're gonna say hide when condition is met and they say is empty so what if either of those empty it will hide that and close up the HTML gap as well so you can see we have a little toggles that says hide only content if you check that that will hide the content if it's basically empty but it will still show the code and this will be available inside the actual HTML code of your site which we don't want so that's that done we've set those things up now everything is in place for our loop template so we hit publish and because this is a template it naturally wants us to set a condition now we don't need a condition for this because we're not setting this up to display on various different pages we're going to do all of that manually so you can just completely ignore this add condition and just say save and close that is now I will loop built ready to start working with our next set of template pages just wanna quickly stop this video at this point and say that if you're enjoying in the content and what I'm teaching please consider hitting that subscribe button a smash in the bell icon below to be notified every time new content is released if you'd like to consider supporting the channel please consider using any of the affiliate links in the description below doesn't she was single penny more but does help support the channel and gives me the ability to create more content like this for you moving forward anyway let's just jump back in now and take a look at the next step so now we've created a loop let's go through and create the actual archive page which will show each of those individual vehicles and also be the placeholder for where we want to put our filtering and searching options in a little later in this video so let's create our archive called the archives tab I wanna say add new archive and from there we're just gonna call this default default vehicle archive I will hit create template once you do that we'll go into the template chooser and we can choose blocks and predefined templates well we don't want any of that we're going to close that down we're going to build our own from scratch so first thing we're gonna do we're just gonna drop in something at the top that makes it look a little bit more visually interesting so we'll just drop in a new section we're gonna simply come in and we're gonna go into the Advanced tab style sorry I'm gonna come into the background and from there we're gonna just change this we're gonna put a picture in so we gonna choose classic we'll choose an image and we'll grab something that looks quite nice let's just say we'll grab this mini insert that into there I'll just quickly go ahead and style everything just so at least it looks a little bit nicer okay there's a little bit of a design okay so we're gonna do now is we're gonna add in a two column section we are set this to be mostly on the left-hand side and let's just add a little bit of spacing around this we're gonna add some padding at the top and bottom so we'll say 50 top 50 bottom to give some breathing space and we'll just adjust this a little bit so it's about 25% somewhere around there there we go that'll do okay so first section this is gonna be where we insert our loop now to do that we've got a couple of different ways we can work the easiest way is to set this up as the posts widget and the reason we do that instead of the archives is because it gives us more control over how we can do different things including filtering and searching so your normal thing would be well I'm in an archive so what a drop in the archive posts but don't say we're gonna come down we're gonna choose posts from the list of options I'm gonna drag and drop that into this main area and you can see it tries to pull in what it considers to be the right data which is a normal post entry but we don't want to do with that so first thing to do is set up the query then I connect the query option at the bottom and you see it says the source is posts well we want to change that to vehicles once you do that you can see that now pulls in our vehicle so we've got the basics set up next thing we're to do is scroll back up to our layout option and from there we're gonna change the skin now currently issues in the classic layer which just gives us this normal pretty boring look we want to reference our custom loop layout so gonna do is change that skin and come down and choose custom once we do that it opens up a series of additional options which were all part of elements or custom skin and if you've got the pro version installed then you'll have access to all of these pro features we don't really just close that down to get rid of it so you don't get confused next that we're gonna choose what we want to use for the loop we've already got one template that we've created so we'll just choose default loop you can see that pulls that in and looks absolutely awful because currently is trying to display three different columns so we only want to set this to be one so in a choose one and you see that now pulls in the data for our layout now currently it doesn't look at that great because we look around quite a small screen as you can see as we scroll down our vehicles will pop up our little thumbnails will pop up this is what I said about the lazy load as you can see as we scroll down on the first time we get this blank space and it'll it'll open out so it's up to you if you wanted to keep it like that or if you prefer to do something like I said write disable the lazy load just so it looks a little bit neater and tidier but that's I want archive page basically set up just waiting for our filters which we'll take a look at once we've said that the individual sort of like single post page so now that we have the basics in place there's a couple of little things I want to tweak just to make sure it's laid out the way I want so the posts per page we're going to change that to be ten but it come to the pagination we're gonna expand that out and we're going to specify that we want to have a pagination setup on it it's up to you how you want to work with this I know say previous and numbers now currently nothing was short because we didn't have three different listings on here and we've set this to be ten however as your database grows and the vehicles grow then you'll go past ten and you'll have those sort of pagination options at the bottom of your page so with that in place we've done all the basics everything isn't the way we want we can now hit publish and we can specify what condition we want to apply to this particular template now because this is a specific template for an archive we can set that to be the archive but we're also then do something else and I just explained that once we get to it the first condition we're gonna setup is to be an archive now by default you can see it thinks you want to do all of the archives that's not the case when you expand that out then scroll down until we find vehicle archives and we're gonna choose that so this now will set up and work with the vehicle archive in any other archives if we had they could blog on here it wouldn't affect those so they could have their own dedicated layout or they would fall back to the theme default whatever you set up now you could leave it at that if you wanted to however we also want to set this so our search results will also be displayed in exactly the same fashion we don't have a different layered so we're gonna have a second condition making sure it says include we expand this out I'm gonna say search results so now we'll use the same page layer at the same template same archive template for both of vehicles and the search results will research our vehicles now we can hit save and close and that is now all in place all set up now next on our list is the single post template and this is where we're going to display the details of the individual vehicle so again we enter the theme builder we're gonna choose single this time and we'll say add new single single is fine to select the post type because we have multiple different post types we're gonna choose vehicle once you've done that we're just gonna give this a name of default vehicle a single create our template that'll take us over into elemental and if we wanted to we could choose over any of the pre-designed layers you may have created previously however we don't have anything so we're gonna close that down start with a nice clean blank slate okay so now we can start pulling in the various pieces of data but this is where it starts to get a little bit more in-depth because we're not just pulling in basic ACF data we're also pulling in things like repeater regions and things like that so this is gonna be probably the most complex part of this entire tutorial so let's just start off by creating something that looks a little nice and neat to start off with yes it click to add in a single row column and we're going to start off by putting the actual vehicle details at the top so we're gonna have the name of the vehicle and the nice big thumbnail image so how do we do that making sure we select this we're gonna come over and we're going to go into the style option and from there we're gonna choose our background then choose a background type of classic come down to our image and click on the dynamic tags from there we're gonna just choose a featured image and then we'll set the basic parameters and for that so so position is going to be sent center we're gonna leave the attachment as default repeat we don't want that to repeat so no repeat and we're gonna set the size to be cover make up the background overlay we're gonna apply a nice little background overlay to this just so we don't end up having this displaying a little bit too bright before we do let's just jump back over and into the layout we're going to do is we're gonna set this to have a default height so I'm going to say height is going to be minimum height and we're gonna adjust that to a value that we want to use so we'll say about 525 that looks okay jump back into our style option come back into our background over layer from there we're gonna apply a very simple gradients we instead any car we want does the top color and we'll set that to be fully transparent background color for the bottom is going to be black once we've done that we could then adjust the opacity of this so we could adjust this we got a nice dark section at the bottom which is where we're gonna see the name of the vehicle itself okay so come back into layout we're gonna say the column position we're gonna set that to be bottom so any content we put in there will be at the bottom we just change this kind just adjusted that by accident okay so once you're done that come into our widgets and we're gonna drop in the post title that will pull in the name of the vehicle at which point we could then style that however we want so there's the basics we've got the background image is set up to be the featured image and we've got the name of the vehicle that we're dealing with now we can start pulling in the extra data for the various different parts of this so let's just create a new section we're gonna set this to be two columns we leave what about spacing and things later on so next thing I'm gonna do is come over from our widgets and now we can just reference a lot of these different single post widgets because we could poison basic data so let's kick this off by just dropping in a simple title we're gonna drop that in there and we're going to just put this to be vehicle details we'll set that to be h3 because it's not that important then to come back into our widget so we're gonna just grab simply our post content drop that underneath there pulls in the content we do the same again now we can just duplicate this heading well drag and drop that underneath there we'll just change that this time to a h5 is a little less important and we'll just put in optional extras included now this is the area that we go into drop in the repeater region where we had the different actors you could have associated with each of the vehicles things like leather trim tinted windows like wheels and so on we need to create a template for that so I'm gonna leave that until we've setup the basics and then we'll come back create that template and drop that data inside there so for now we're just leaving that as it is next up we're gonna just duplicate that and we're gonna just change the text on there and this is now gonna be the image gallery so image gallery come out to our widgets from there we're just going to search for gallery and again we're going to use the same kind of galleries we used for the loop template it's going to drop that inside there do the same thing again choose dynamic ACF gallery click on the little wrench icon and then choose the relevant gallery from them so that will then load that up with the vehicle details the vehicle images now quickly you're just gonna tweak the way this gallery looks we're gonna just change this from three to two and we say it's a one to one and we'll just set the images to be medium so they're slightly higher quality and also specify this code to be three so we get nice large thumbnail images to click on okay so that's the basic parts now on the right hand side we're gonna add some extra things inside them so the first thing we're gonna put on the right hand side is going to be the manufacturer but to do that we've got to work in a slightly different way because this is pulling data from a taxonomy so we can do is we can use the post info so we can drag and drop that over to the right hand side not pulling where it thinks is the basic info so things like the author the date and so on we're gonna get rid of all of these except for this one I'm going to just change the details so currently it says comments we can click and we can come down and choose terms next type we says what term do you want to choose taxonomy we're going to come down we're gonna say manufacturer you see that now pulls in OD so before we're just gonna put in manufacturer full column in a space the link we're going to disable that we don't want this to link to anything at this point but if you wanted to you could link it through to have a custom listing for all the vehicles that are OD I can't we're gonna change that to be none so we now have the manufacturer information listed inside there now we can just kind of proceed on from the add in extra elements in so they come back and this time we're just going to come in and we say we want a text editor we're gonna drag and drop that over to the right-hand side click on the middle dynamic tags option scroll down to a CF field click on the wrench icon and this time we're gonna grab in the engine type so we'll scroll down and you will see vehicle engine click on there before we're just going to put engine type a colon and that will then pull in the relevant details now you can use HTML code inside these Advanced section so the before and after so if you want the style these were making the bold you could do exactly that just simply by putting in the code strong we'll just close that out which is just the standard HTML for creating something or making it bold so you can see that pulls it up makes it bold inside there so you could repeat that as you needed to so for ease let's just duplicate that so just copy that click to edit it will change the ACF field data we don't feel called engine this time we want color and we'll just change the advanced for color and to exact the same thing again we're just going to duplicate this click to edit it come up change this from color to price and just change that over as well so jus price Col on space and the pounds thanks we dealing with pounds and there is the price that we're working with so there's the basics next we're just going to drop in the specifications for the vehicle so we're to do the same again we're going to just duplicate this heading drag and drop that over to the right hand-side change that specifications there we go we're just gonna come back in we're going to come into the widgets I simply got to grab the text editor drop that and these specifications click on the little database icon kind of a CF field - the same again expand that out choose vehicle specifications now we could keep on doing this for the other options that are part of this as well so the other things we put in so it's just the same repetitive thing over and over again so all if we didn't have to do on there now is to style everything so before we do that I'm gonna hit on publish so we've got this saved so going to publish this include vehicles all for the condition and that's perfectly fine it will say save and close so we've created a template we still have a few things to put in this so what we're gonna do now is we're gonna take a look at setting up that basic template so we can include that as part of our repeater region so let's just exit out of this single post template and we need to come into the save templates option that isn't part of the theme builder so if you go to the theme builder you won't see this listed there you won't see the option to create this listed there so you look at the saved templates and from there we're gonna create a new template now we're gonna call this is a section template and we say add new section template and we're just gonna call this dynamic repeater template and we just put a space like that and we'll just call this options create our template and this is just gonna be a very very simple template some really basic data to close that down from there we don't want that we can ignore all the different elements on this page the title has been displayed at the top the header and footer none of that is actually gonna be pulled in whatsoever so what do we need to do what we're going to create a simple section so we can set this up in multiple different ways we're going to click to create a single row column we're gonna nest inside there what we want so I'm going to just come down and we're going to say we want to have in a section drop that in there to is perfectly fine once we've done that we no need to pull in the data we can't do this with the normal fields we need use one the special fields that are part of dynamic content for elemental so to do that we're to come over to our widgets click and we'll just type in ACF fields and you can see that now pulls in a dynamic content for element or widget you could drag and drop that over onto there now we can select the ACF field that we want and click on there scroll down until we find exact we want so you've got vehicle options so you want option name first of all which are pulling the name of the actual option so things like tinted windows and so on and then we can go to the next field and do the same thing again so I want to do is I need to just duplicate this drag that over to the right hand side and just change this then from the option name to the number text before we're just gonna put in the pound sign and all we're gonna do then is just specify we want this to be over the right-hand side we create a style set the Enlightenment to be right now currently you can't see anything so we could do is we could come at the settings in the preview settings and we can select we want from there so we've scrolled right the way through we find a custom vehicle post type click on vehicle we can just change this to one the vehicles will just say the focus for example say apply and preview to a moment or two we should then see there we go tinted windows at five hundred pounds so we'll click on publish on that and that's created that template now you could apply any other styling you wanted to this in entirely up to you how you want to do it but we've got the template now basically created so all we need to do is come out of this exit back to our dashboard come into our theme builder I want to insert our theme builder we're gonna come back into our default vehicle single edit that with elemental once we've got that we can then come in and we can start changing or drop it in the details we want so there's our optional extras included heading so we're gonna do now is we're going to go and search for that repeater so we're gonna come into our widgets and we're just gonna type in a repeater there we go there's our ACF repeater drag and drop that into position first thing you want to do is tell it what repeater do we want to use we're gonna click on the we only have one which is the vehicle options so we can click to choose that and you see where it does is then it pulls in a basic amount of data you can see the alloy wheels the satellite navigation doesn't look very good we can expand these out and we could configure these if we wanted to however we can't just take advantage of our custom template so we click on the template option you can see it says select a template you can click on there and we can just start typing in what we want so there we go repeat a template click on that once that's done that should then load in the relevant data for us now it still doesn't look great and that's because we still have some other options we need to change so we cover the option set and you can see we can choose the column space near the row space in and we come up the render section we can choose how we want to render things out so at the moment is set to grid and that's going to try to show five different columns of the information which is not what we want to do we can change that you can see we could choose things like the table and it'll for a nice table in there or we could just choose masonry if you wanted to or we can choose natural I'm serious man to be natural and that would allow us then to use our template that we just created we can get rid of this separate that we don't want that so that will put the data in there and now if we want to we can easily just come in to our styling and we could do things like set background colors and all those kinds of good things so we could go back home for example we can change our background type to a color set that to be a very very pale gray like so we could put a border around it then if we wanted to it's a type you want to sort of style it we just take an advantage of using those custom layouts and there's custom templates so we can control exactly how we want things to look inside our design so that's I will repeat a region basically set up so that's the fundamentals all in place we need to just sort of tidy up the styling and everything on there the next thing we need to do is link up the actual places the dealerships where you could buy this particular vehicle from so we'll hit update on there just to make sure we save those changes and the next I'm gonna do is move on to take a look at how we can link those through and build out that relationship we set up earlier on in this tutorial ok so we're ready now to build our dealership template so let's exit out of our single post for now come back and or save the templates options again we're going to create a template that's a section 10 so I'll come in a section and we're just gonna say add new from there we're gonna give this a name of dealership and template create our template once that's loaded in we can get rid of any messages we have any options there we're going to create our basic template against we're gonna add in a new section and from there we're just gonna come in and we're gonna add in a nested intersection and again we're gonna set this have to be three columns so you say duplicate corn and it's up to you how you want to set this out so the first column for me is going to be a little smaller because that's just simply gonna have the dealership logo inside there which is the featured image then the dealership details and finally we're gonna have a map over on the right-hand side so I'm not too bothered how this all looks let's just click on the first one and just take off any padding on there okay so once we've done that first thing I wanna do is just drop in an image so we're gonna come in choose an image widget drop that in site they click on the little dynamic tags and say featured image and again as always we're not seeing anything because we haven't set it up on how we want display it so again we can count up the settings in the preview settings click to expand this out and we're going to do is with a scroll down until we find the dealership the container ship and we'll just put in a Ford find one there and say apply and preview on that then we'll pull in and it's the sample data for us to see so there's the logo for the Ford dealership we're working with next up we're gonna drop in just a simple heading so I'm gonna drag and drop the heading inside there dynamic options again scroll down until we find the option for post title click on post title add that into there we're gonna add in a text area now so we're gonna come back out of this text editor drop that into there and we can do is we can click on a little icon and we can grab any data that we want so we can say the post summary click on that that's perfectly fine and I'll just put in a summary and exact the same ways we saw earlier all we're dealing with the loop template so that's the basics and any other data you want to put in there like the location and stuff like that telephone numbers and things all that data that we pulled in the exactly same way we just created a template use an advanced custom fields data please we would have done before so the last thing I want to do is just come in and we're gonna drop in a Google map drop that into there we're just gonna set this zoom level to about 14 and we're gonna set the height a little bit smaller say about 200 run day there we go change the dynamic tags I'm gonna do is I'm gonna come down we're gonna drag in a a CF field click on the little wrench icon click I will choose dealership details location so that's just gonna create a very simplistic map that'll have the location and in this example all I've done is I've used the city I haven't used it any closer to that but you could put in whatever kind of full address that you want we'll hit publish on there and that's the basics now for our layout so I'm gonna quickly just set up a few things on here to make sure everything is laid out nice and neat and tidy and then we can move on and see how we can pull in this relationship into our single vehicle template okay so there's a little bit of formatting later donate we're gonna come back out of this now exit to our dashboard go back to our theme builder and from they were gonna come back into our default of vehicle single edit by with elemental and we're now ready to drop in the repeater or the relationship field at the bottom so who's going to come down add in a new section and we're just gonna set the styling up on this we're gonna do so advanced content on there so we'll have a little bit of spacing above and below so we'll have 50 at the top 50 at the bottom we'll set the style on this will have a different background color so we'll set the background to be a lighter gray color just we have some kind of separation between the various different elements on screen okay so that's now the placeholder for our relationship we're simply gonna drop in a title on there so we'll just say we want to drop in a heading and that we're just going to say we want to have this as our dealers so how can we do that it's very easy it's quite cool way of doing it we're gonna drop in a post title like we've done now click to edit it we're gonna come up to our dynamic contents we gonna click on me and we just scroll down until we find the post title so this is gonna be the name of the vehicle so I click on that you see it says TT Roadster so what I do now is I'm gonna click on the little wrench icon but before we're just gonna what I say after we're just gonna put in dealers put a space before it and what that'll do now is you can see it says TT dealers so it's a nice way of incorporating both dynamic data and Static data to make your just layers look a little bit more interesting so that's the first part next thing we need to do is paulien the actual relationship data it's going to come back out of this search in our widgets for relationship between your type in relation and then we up a CF relationship then drag and drop that underneath thee and now we need to set up that relationship and tell it what template we want to use to display the data so the first thing it says a CF relationship field list click on there and any relationship feels you have as part of advanced custom fields will be listed including in brackets where it's coming from so we're gonna click on dealer relationship dealership you can see it says Dave's used all the Audis so that's the right information but we're not using the template so we need to change that so we're gonna come over I'm gonna click on template I'm gonna choose the template name so we're just gonna type in dealer or start typing there it is dealership template click to choose that and you can see that now pulls in the relevant information for us display Road natural HTML tag we're going to change that to div or you could use span if you wanted to so you can see now we've got the dealership is now inserted into this area for us and everything is in place so that is pretty much the entire single post template created will help update this and what I'm gonna do now before I move on is I'm gonna quickly run through some styling to make sure everything looks nice and neat and tidy however like I say you should be more than accustomed to setting up styling to make sure everything looks the way you wanted to wanted on this we're ready then to move on to the filtering searching and sorting options that we have as part of this particular design okay so all the styling is now been finished for the individual page you can see everything is in place including our dealership information so we've done that we've got everything in place the next image to do now is go through all that searching and filtering options so to do that we're gonna use search and filter prompt gonna come out of this exit to our dashboard and we're now ready to start actually putting all the details together for this particular vehicle so we're gonna do we're going to come down to search and filter at the bottom we're going to new search form once we done that this will bring us into the search form options where we can go through and configure everything we need now I've covered this in its own dedicated tutorial which I will link did the description below because there's probably a little bit too much to cover in this one video today just to show you how it all works but this is going to be something that when you get into it you'll realize that it's not as complex as it may first seem but there's still quite a lot going on that you need to get your head around so I'm gonna go through this quite quickly no one that I've already covered this exactly the same thing using this particularly example with the cars its own dedicated video so check that out link will be down below ok so the first thing going to do is give this a name so we're gonna call this vehicle filters so let's just drop in the name there next up we're gonna choose exactly what we want to filter now you can see it says search in the following pulse types well we don't want posts or pages what we want is vehicles so we're gonna check off vehicles from our list of options results per page 10 is perfectly fine order submit form all that basically means is that instead of you having to click a button to submit the changes you make to your form it will automatically do it when you make changes if you want to change that so you have a button then by all means uncheck that and do what you want to enable it the way that you want to work the field relationships how each one of the different filters that we're going to create will interact with each other you can set that to be and/or set it to or if it's and it will stack one on top of the other if you set it to be or it will use one or the other or the next one or the next one it just has to match one criteria out of all the options that you have available so auto count we're gonna enable that so we can see how many vehicles are in any particular section especially we go through the process of filtering things out later if we scroll down you can see we've got available fields and the search you I before we do that we need to set some other things up at the top so we have display results first of all so we will click on that I'm gonna say what are we gonna use to display the results now by default it says as an archive but we want to use the same page that we've got the vehicles listed on so we don't want to go to another page we want to keep this all on the same page so we'll do is going to click on and I gonna say I want the use custom now from there we next thing we need to do is drop in the full URL to the page that we've going to use so for this example I'm gonna drop in the full URL which is the URL the domain for this particular site /v a' khals forward slash now if you are unsure what to put inside they you always start off with your full domain with the forward slash at the end but then when we have it says vehicles whatever you name your archive page in this example vehicles that's what we're going to be using so if you'd name this vehicle results then you'd have vehicle results for slash hope that makes sense then we've got the options for how do we want to load these different values and so on you see it says lowest using Ajax and voila block we'll leave all those set to their defaults the only things we need to change are the Ajax container and the pagination selector now if you don't know what to put in there I'm going to point you to a page in the description below that's the help page for how you use search and filter Pro with elemental you have to use the values that are being inserted into there so I'll put a link to that in the description so check that out but it'll give you all the details everything you can see what I gotta cover in this it'll give you all the details there so if you're stuck follow those right the way through those step-by-step to make sure you've got everything exactly as it should be so the HS container is going to be this particular short code and the pagination is going to be this option now if you kind of look at this thing and you don't know what to do like I say just copy and paste these over from that help file and what's really doing is is saying that instead of use the default values you're gonna be using this particular placeholder which is an elemental widget and it's the posts widget which is remember back to when we took a look at creating an archive page we used the post widget in there that's all that's really doing the same goes for the pagination it tells it we use in the elemental pagination not some other pagination we may have set up ourselves so hope that makes sense so other than that it's not really much else we need to sort of configure inside you we're gonna join at the post section we can just configure another thing when do we want to actually or what do we want to include what status do they have to have to be included in the search results well logically it says only display the published ones and you see that's the default value so we are going to do exactly that everything else we can leave pretty much as it is now underneath that we've got the available fields and this is where we build up our search we're gonna have in this example four different criteria we're gonna have a search we're gonna have a filter we're gonna have a sort and we're gonna have a taxonomy filter you can create a lot more and I would advise you to do just that your database of vehicles is gonna have a lot more searchable filterable data this is how to do it you can build it up using the skills you learn in this particular section so first of all let's just create a sort order you know try the sort order down into this search form UI now the search form UI and these available fields we're effectively creating a group of filters and searches and then we're gonna use a short code to put those into our design so when you create this you're not creating an individual search form UI for each separate filter or search you're creating it to group them all into one hope that makes sense okay so the first thing we've got is going to be the sort order this allows anybody to see the results and then sort them how they want to based upon their own particular criteria so gonna do it say we're gonna add a heading I'm gonna say sort by change all item labels well it's up to you if you want to change the values and so on in the next up we've got the sort option so this is where we set up all the different values you can basically sort your data in we're going to keep this like I say fairly simple we're gonna sort it by the highest value vehicle and the lowest value vehicle so we're gonna add a new option in we're gonna choose where we want to pull the data from I can't scroll the page unfortunately but down the bottom we've got the option for meta value and the meta fatty was basically a meta field as part of a CF so we will choose meta value we're gonna set that to descending and then we're gonna drop in the label we want to use so for this example we're gonna just choose by price highest to lowest now we need you to use the meta field we've got a search against then a scroll right the way down until we come across the option that's which you can't unfortunately sees at the bottom of my list vehicle price so I set that numeric is exactly what we want we do exactly the same thing now for flipping this the opposite way so we're gonna say add an option from there we're just gonna choose the same thing again so meta field or meta value this time I'm going to change this to ascending we're going to change the text that's going to display in there to the opposite way around so from lowest to highest change the meta key again to a vehicle price and numeric is perfectly fine so all we've done now is we've created a simple sort we can go from the highest price to the lowest priced or from the lowest price to the highest priced so to close that down so that's our first set of options the next that we've got is the search option so going into the same thing we did grab an available field drag and drop that underneath and this time we're going to just call this a vehicle search so drop that in there and we're going to Steve search that's perfectly fine and we're just gonna come into this one and we can use it as screen readers I'm gonna say vehicle search form that's it that's all you really need to do nothing more we need to worry about and close that down next up we're gonna put in a taxonomy option and this is gonna allow us to use any tax honor we've got created so we're gonna grab the taxonomy drag and drop that underneath and now we can go through and tell it how we want to work what we want to pull the data from and all those kinds of things so the first thing to do is change the format or the taxonomy you want to change this to manufacturer so we can search based upon the vehicle manufacturer so Mercedes BMW or those kinds of things click on that input type we're gonna just choose a checkbox so we can have multiple different values the heading we're just gonna drop in there is going to be manufacturers the search operator is exactly the same kind of things we saw just know we're said will we stack these on top of each other but for this example we're gonna set this to be all we don't want to have multiple one stacks we can say all on there then you can just choose the options you want on the right hand side display count so it's going to display in brackets after the vehicle manufacturer the number of vehicles inside that particular section hide empty terms if you wanted to have this you had no vehicles under a particular section it would hide it you know up to you hierarchical if you've got things set up in a hierarchy you can do that and then you can also work with include children in parents which is part of that hierarchy structure so that's that I'm going to close that down and the final one we're gonna do is the for the slightly more complex option which is the post meta so this is where we can create a slider a range slider so we can filter out based upon price so we're gonna do is we're gonna come over and we're going to choose post meta drag and drop that underneath and as you can see this looks a lot more complex but in reality it isn't that complicated we've got three different options of the cross the table which is number choice and date we're working with a numeric value so we can ignore choice and we can ignore date in this example so range slider is perfectly fine for the type we want to use for the input type we'll drop a heading inside there display values we're gonna set that to plain text we just want those to display a nice plain of value and we're just gonna put in the screen reader friendly version next step we're going to choose the meta key in other words again where are we gonna pull the data from what are we filtering against gonna click scroll right the way down until we find vehicle price again because I'll say this is all to do with the pricing choose that option we'll use the same four end key we'll leave that as it is we're gonna uncheck data is decimal because we're working with whole numbers we're booking with thousands we're not working with units or smaller values so we're set the minimum to 1000 and the maximum to 40000 now you could if you wanted to order detect this but because I want to have control over exactly what values I want to have inside this filter I'm gonna put them in myself then the step value is how big a step you want to use for this range slider and I said that to be thousands but you could set it to whatever value works for you value prefix we're gonna put in the currency symbol inside there decimals will lead everything as it is so that's how we set up that particular filter so there's all of our filters and searches and everything all in place let's hit on publish now just to make sure that everything is saved and then we could move on okay so that's our filters all set up you can see we now have the short codes that we can reference these in various different places so as worth making note of these on a separate little notepad drop it into notes or whatever you kind of want so you don't have to keep jumping back and forth into this section now inserting this into your template is a little bit more long-winded than if you've seen my videos with searchwp and faceted WP but once you know what to do it's actually really really simple and straightforward so what we're going to do is we're going to open up the templates I'm going to come into our theme builder from there we're gonna edit our elemental archive open that up and we're then ready to drop in the relevant pieces of data so there's our page we've got our space on the right-hand side for our filters so before we take a look at that I want to draw your attention to something inside the actual documentation of this particular plugin so I'm added the documentation for elemental pro and there's a reason I'm showing you this there's a couple of things we need to do before we can actually work with this inside our design so you see the basic setup it tells us before the post widget tells search and filter that it needs to filter the grid by adding the text area don't use a HTML element and then we're going to grab this little bit of code so I'm gonna do is gonna grab that from the copy it come back into a template we're gonna come over and we're gonna just grab a text editor drag and drop that into the select this get rid of that and drop in a little bit of shortcode now this won't display this is just there to be used you can see it says search a filter ID one two three four five six and this is why I said make a note of your data for your specific search of filter come back in I was is number 81 so what I need to do is change that 1 2 3 4 5 6 to 81 we've now referenced our specific shortcode for that filter setup so that's the first thing next thing we need to do now is drop in the shortcode on the right-hand side and that's where we're going to put in the actual filters themselves next thing we need to do is drop in the actual search itself so you can see it says we can use the search ID and we need to drop in the shortcode widget so we come back with our search we can use either this shortcode which is the numeric version or we can use this shortcode which is the name of the filter it doesn't really matter which one we use it kind of interchangeable so they'll copy that from the jump back into our templates I'm gonna just drop in that short code widget on the right hand side so short codes drag and drop that over there and just drop in what we need which is this particular field and you can see it immediately pulls in that filter including all the data that we need as part of this layout so obviously you can style this and you can drop in titles and all those kinds of things just to make this a little bit more user friendly but we're gonna do is gonna hit update on me and we'll take a look now we'll jump over and take a look at this in action itself okay so I've hopped over now to the archive page and you can see there's all our vehicles we've got everything laid out the way we set up we've got our filters now on the right hand side so let's just say we want to change the sorting order you can see currently we've got a mismatch with the actual values of the vehicles so we just choose the sort by it will say highest to lowest it'll refresh there we go so now for 30 2010 250 225 thousand flipped out the opposite way you can see it updates we can search if we want to so we can just say we'll type in focus for example and that will then filter and show us the focus and if we had multiple focuses this other filter for the sorting by price would also take effect we can then also see that the manufacturers updated in real time to show us live data currently because we've chosen focus as a search word focus isn't made by Audi or by BMW or Mercedes it's only made by Ford so you can see it shows us forward and there's only one value available inside there because when you actually have one listed in our database so that's clear that filter from there clear our search results at the top and once we've done that you can see we can easily come in now we can fill these based upon their manufacturer if we wanted to we can also use this range at the bottom to adjust the pricing so we say we want to go to a maximum I'll say 26,000 that'll filter that money show us one vehicle now you may be notice him that we've got that little weird glitch that I said about with the lazy load option as part of creating our template this is something that we bear in mind you may not notice it it might not happen on yours you might just be the way that I've got things set up but it is with bearing in mind that is a bit of a weird thing going on with those lazy loading of those thumbnails for the gallery but part of that let me say everything else is working exactly as we'd expect it to we've got all of the relevant data our fill doesn't work in everything set up we click to take a look at one of those vehicles we can see you got the Roadster all the details are specifications I will repeat a region our gallery we can see it's available at Dave's use Odie's so all the things that we needed to be set up all fully set up inside this layout now this section is a purely optional section you don't have to follow all this you don't even have to install the plug-in this is how we can use admin columns to create a much nicer way of listing vehicles dealerships all those kinds of things so if we take a look at our vehicles listing at the moment we see all the vehicles it's a pretty drab place we could see the name of the vehicle or the title of the vehicle we can see what manufacturer it is and when it was posted but that's it I just makes when you're looking through fifty a hundred different vehicles it can be quite difficult to find exactly what you're looking for so we're going to use the free version of admin columns and we can use that to great effect to do that all we need to do is come into settings and down to admin columns once we're inside there you can see it's pulling up the first option which is my templates we don't want that we want to change this to vehicles it's gonna click on vehicles that will then show us those fields we just saw now we can get rid of some of these I don't want dynamic content we're gonna remove that completely the title we're gonna edit that and we're just going to change that to vehicle just cuz it makes a little bit more sense manufacturer is perfectly fine so the next I'm going to do is add some extra columns in so let's say we're gonna add a new column but from there we're going to just set this to use the featured image so a featured image on there we can set this up we said with something if you want to we can do all that kind of stuff so we can just say let's just say 10% and 60 and 60 for the image size is perfectly fine we'll say save on there will reorder this now we'll drop that so it's the very very first thing we'll see inside here so let's just drag and drop that update okay let's just update this just make sure everything is in place so we're to do is going to jump back go to all vehicles now and just see those little changes we've made and how already makes a big difference so now you can see we can easily pinpoint which vehicle it is we're talking about we've renamed this we can sort of sort these based on that we've got the manufacturer so all those kinds of things are in them we can still go further than that though if we want to let's come back into our admin columns and let's just say we're gonna add something new in so you see how a new column this time we're gonna set the actions I would say use icons we'll leave that at the end and we'll hit update again come back into a vehicle list in and we'll refresh this page now we've got these actions over on the right-hand side that do the normal things you'd expect which is edit quick edit delete and to view it does the same as hovering over the name of the vehicle however it just makes it a little bit more user friendly in my opinion you can immediately see those icons you know you can click on them and someone that's not used to working with WordPress may not even notice the fact you've got quick edit and things along those lines so you can if you want to come back into your admin column section add additional columns if we want to we can reference various different pieces of information from advanced custom fields so if we come in and we just say we want to use advanced custom fields we click on there and we get an error master saying you need the pro version to do this and it's right you do need the pro version to do it however we can't still bypass that to a certain extent if we choose custom fields the kids click on custom field we now have the ability to choose various different custom fields so you can see we can choose from dealer but we can also open that up and we've got a ton of different options so if we wanted to we say we want to list the vehicle price display options beforehand we'll put the pound sign inside there and we'll just change the custom field label and we'll put a price for the pound after that and we can't do sorting and editing and so on because they are pro only features but we've already made this whole section just a lot more user-friendly so let's just drag that up now and we'll just put that prices next to the vehicle name we'll hit update on the jump back over and refresh this and now we have a much more user-friendly location to work with our vehicles we can just check the vehicle image the name of it the price the manufacturer the date is published and we've got all those quick actions available so you can keep on adding more columns to this rearranging things setting it out however you want to to make this just a much more useable location you could do the same thing with your dealerships you could drop in the featured image for their logo all those kinds of things just makes the dashboard of WordPress a lot more user friendly moving forward so we've covered a lot of different bases in this particular tutorial hopefully has opened your eyes to some of the things you can do with this combination of tools if it has let me know in the comment section below I love getting your feedback now speaking of feedback if you've got ideas for future tutorials or different topics on the same vein as this let me know in the comment section drop in some links in there to some sites you think are a good source of inspiration I'll take a look and if I think they're viable I'll take a look at creating more content like that moving forward as I mentioned all of the applicable links are in the description below for both the content I've referenced any videos playlists and so on and if you consider using any of those affiliate links you get my gratitude and it cost you no more money whatsoever but does help me create more content like this moving forward as always mind if you're poor see this has been wptouch until next time take care

Channel: WPTuts

Views: 40,219

Rating: 4.98 out of 5

Keywords: WPTuts, advanced custom fields, advanced custom fields elementor, advanced custom fields pro, advanced custom fields pro how to use, advanced custom fields pro plugin wordpress, advanced custom fields pro taxonomies, advanced custom fields pro tutorial, advanced custom fields pro wordpress, advanced custom fields tutorial, advanced custom fields wordpress, wordpress advanced custom fields, wordpress custom fields, elementor pro, elementor pro templates, cpt ui taxonomy category

Id: 8B9Pb8JZouM

Length: 85min 39sec (5139 seconds)

Published: Fri Mar 27 2020