Advanced Custom Fields Pro & Elementor Pro - Advanced Real Estate Website

so a few months ago I released a video tutorial on how to build a real estate based website using WordPress elemental pro an advanced custom fields alongside some additional plugins well a lot of questions are raised on there and how do you take this to the next level so things like how do you upload your own listings how do you manage those listings how do you create more complex filters and searches and a whole range of other questions well instead of going through an answer to every single one one by one and I create another video tutorial few today there's gonna take you through one answer a lot of those questions and also go through a lot more techniques to take it to the next level again now even though it is based upon a real estate website you could use this on a multitude of different topics however this is not a beginners tutorial so if you're not accustomed to using Elementor Pro the theme builder advanced custom fields custom post types and all those kinds of things have already created a range of tutorials to get you up to speed on how to do those that'll get you that ready to jump in and create more complex websites like covered in today's video tutorial if you want to check those out there's a list in the description below so you can follow those get yourself up to speed with that being said let's hop over to the dashboard of WordPress and start taking a look at some of the tools we're going to be using to create this real estate based website so we jumped onto the dashboard now of WordPress and we're going to take a look at the plugins that we need to get this real estate website realized now the alot of these plugins are commercial plugins as in you have to pay for them but the one thing I've found is that they're a great combination of tools that work flawlessly together this is something this worth its weight in gold now could you find it free or cheaper alternatives to some of the tools we've used if on all the tools you've used well you probably can however would they all work so well together this is something you'd have to test out yourself like I say I know this combination works well so we're gonna stick with this and all the applicable links are in the description below so if you want to grab any of these or find out more you can do that to perform in those links now first of all we've got admin columns this is the free version and we're gonna use this just to make our dashboard just a little bit more user-friendly next up we've got advanced custom fields Pro now you can do a lot with the free version however the pro version gives you extra tools things like repeater regions galleries and so on next up we've got anywhere Elementor Pro now this plugin allows us to do a lot of things when we work with elemental that go above and beyond what you can do with elemental Pro I'm going to go over what these do we're going to take a look at them as we go through the process of using those different tools and we'll see exactly how to use them then custom post type UI and classic editor both free both very useful we need custom post type UI to create the custom post types for our properties and also for our ages the people that we sell in the properties we've then got le custom skin which is the free version because this allows us to create custom loops for our layout elemental the free version and Elementor pro the pro version because obviously we need to tap into the ability to create our own theme files we've then got a faster WP and so the extra things we want to use the map such as the elemental plug-in and the hierarchy select option we've got searchwp which is a great way of working through and created a search function that will search your entire site and also apply in what weight you want to the various different aspects or the various different pieces of information that you have is each individual post and post type now you could if you wanted to oh we've got facet WP and searchwp you could take a look at search and filter Pro which is another WordPress plug-in that does a very similar type of thing however I don't think that it has all the same functionality that we have things like the Elementor integration and the hierarchy select however I could be wrong I haven't tested this out now if you'd like me to take a look at search and filter Pro and let me know in the comment section below I'll grab myself a copy and we'll take it for a spin and see how it actually stacks up against this combination and the final thing we have is WP user front-end and use a front-end Pro now this allows us to create a user section if we want to I'm not going to cover that in this particular video but what this allows you to do is create that should you want to but what we are going to cover is the ability to add in new listings into the database so this is a nice way of letting someone on the front end add in a new property and then you as the admin can confirm or delete that entry and then lay the show up on the site or be deleted from your database so these are the tools were going to use when it comes to the theme we're gonna take a look what we're gonna do is we're gonna use the hello theme which is the completely free and basically blank theme as part of Elementor and if we jump over to our site you can see this is what we're currently working with I've created the header I created the footer and we use it a default basically blank template for the loop in other words whatever posts we currently have on here now before we go any further in this video tutorial we've covered what we're gonna use but we also need to cover what you need to know now this is not a beginners tutorial by any stretch of the imagination I'm gonna be assuming a lot of prior knowledge and understanding when it comes to working with advanced custom fields creating custom post types using elemental procreating theme files of all those kinds of things I'm not gonna cover those we're gonna fly over those various different aspects when we're using them however if you want to find out how to use any of those core skills I've got videos that will take you through every single step on how to use the theme builder with elemental Pro and also how to get right from the beginning with advanced custom fields and custom post type UI there are links in the description below to those videos so you can find out exactly how to get yourself started and then come back to this video and start following along with all the more detailed content inside this tutorial and speaking of the description below we'll have time stamps inside there for each of the core sections inside this tutorial so if you want to jump around if you need to go back to anything to go over it again you can do that very easily from there so now we've gone ahead and set all the plugins haven't got everything ready we're now ready to start working with the custom post types so the first thing to do is go through and set those up ready to move on and start working with advanced custom fields and tie in all the meta fields into those custom post types so let's do that right now now for this website we're going to have two different custom post types we're going to have a custom post type of properties and we're gonna have one for agents or agencies this is gonna allow us to link those two things together and do some really creative things now I'm not gonna cover that in this initial step but you'll see as we go through and start working with creating the properties and then linking them through to the agents you can see how useful and how powerful of these tools and this particular technique is going to be for you and hopefully what you'll see is you can use this in future projects in million different ways okay so let's start off by creating a first custom post type so the color to the custom post type UI from our dashboard and from there we're gonna come down to add edit post types I'm gonna click once we've done that this will take us into the add edit post type section from here we're just going to put in the basic details so the slug is going to be property then we're kind of do our plural label which is going to be properties and finally we've got the single which is going to be property so once we've done that we could add the posts that we want or two however we're going to come down and we're going to take a look at some extra options that are gonna allow us to kind of configure the various different aspects of this custom post type now you can if you want to like I've covered in the basics videos you can put in additional labels however for this example I'm gonna leave all of those blank so to scroll down until we get the setting section in here we're gonna set up some basic settings that we need to make sure it operates in the way that we want so we're going to leave most of these things as they are however we say we're gonna come down until we find has archive we're gonna set that to be true if that's set to false you're going to find that when you try to create the custom archive as part of Elementor pro for your website and then you try to assign it to this particular custom post type the option won't be available that's because by default see ptui says there's no archive okay so we want to make sure that it's not excluded from search i'm going to scroll down and you see we've got hierarchical again it's set to false we want to change that to be true because we want to create a hierarchy of information and then we've got some other things we can do which is more cosmetic and features inside the actual dashboard and allow you to sort of get a bit more creative with various different aspects so we're going to do is we're gonna come down and you can see first of all we've got menu position so we're gonna set that to be positioned too and that just says where it's going to be displayed in this left-hand section in your dashboard then you see it says show in menu again we're gonna leave that set to true we can put in a menu icon if we want to now I've already gone ahead and created a link through to the actual icon I want to work with and these are just the dash icons so I'm gonna do is gonna come to the menu icon drop that inside there you could if you wanted to just say choose an icon yourself from your own uploads and to you want from them okay so the next thing gonna do is we're gonna come in and we're gonna say supports you can see it says title editor and featured image that's perfectly fine we're going to leave those however if you wanted to do extra things like excerpts custom fields comments revisions and so on you could enable or disable anything you wanted from them so now all we need to do is say a post type once you've done that you can see we now have the new section in the left hand side called properties are we can come in and we say all properties or add new so there's the first custom post type we're gonna come back in again I say add edit post type and this time we're gonna create the link through to our agency or agent custom post type so again we're going to drop in the post slug so we're going to just say agent plural is going to be agents and the singular is agent so that scroll down again then to our settings just make sure we've got everything set up as we wanted here so we say we want to just come through and say we want as archive is true and we also want to make sure that hierarchical is set to true so that's basically all we need to do but obviously if you want to make changes or you need to add anything you can simply come back at any point come up to the edit post type tab choose the option that you want and then you can make any changes you want to any of the details there so if you miss anything out or you just make a mistake or want to change things you can just come in and do that so there's the basics now we've created our custom post types the next thing we need to do now is create the taxonomy z' that are associated with these custom post types as I do that is also very similar to what we've just done we come over this time to add edit taxonomy z' click on the taxonomy slug we're gonna call that a property type clear label property types and finally the singular label property type so this is just gonna be how we kind of group these different properties together and you can create multiple different taxonomy if you want to to sort of group things in any kind of logical fashion you want I'm just gonna show you some simple ways of doing things but you can and I would recommend you expand upon this to get exactly what you need to create a very simple structured way of creating content okay so the next thing we need to do is specify what these taxonomy Zoar what this specific taxonomy is linked through to so you can see andy says attached to post type we can see we've got some of the basic core functions that we have as part of WordPress we've also got some things inside here so they're specific to some of the plugins we've got for example AE global templates is anywhere elemental and my templates is to do with elemental pro what we want though is the properties section so we're going to save properties and we've now associated the property type with the properties custom post type again we've got the additional labels should we want to use those we're come down to the Settings section and we're gonna just set a few things up inside you to make sure it operates the way we want again we're gonna set hierarchical to true you can see then we've got a lot of other options we can also configure we want to specify show an admin column it's gonna be useful so we can say true it just means that in the admin column we take a look at all our properties it will list the property type inside there if we scroll through you can see we've got a lot of things like show in quick bulk edit panel so we're gonna say we want that as well and that simply means that when we're editing all quick editing anything inside our custom post type we can go in and we can specify and change any of these taxonomy details specific to that particular post it's just a quick way of editing so we're gonna say we want that I'm gonna say add taxonomy now if we come over to the property section again you'll see we have property types has been added in there however if we kind of the agent section you see property types not listed there because obviously we didn't associate it with that custom post type so with our custom post types already configured and set up ready for both our properties and for our resellers or agents we now need to go ahead and start populating those custom post types with the advanced custom fields that are related to each one of those so we're gonna do is we're gonna take a look at doing that next so from our dashboard we're gonna come down to the custom field section and we're gonna come over to add new and what's inside there we're gonna go through the process now of creating our custom fields so firstly what I do is just give this a title so I'm gonna call this property details before we start setting the actual fields we want let's just set the location for where this is going to be used so post type is equal to post we need to change that to property so this just means that any other custom fields we now create will only be available inside property is custom post time we can come down if we want to as well adjust any of the settings inside there so we can fine-tune and tweak the look and the layout of this however we're gonna leave everything as it is for now so we're now ready to move on and start creating the actual fields themselves now we're gonna do a couple of things inside you we're gonna create fields but we're also gonna start grouping things together as tabs now this isn't something you need to do but when you start to create more complex advanced custom fields and you use those inside your custom post types you can get a lot of data all in one bit of a mishmash this is just a nice visual way of changing the way things look so the first thing we would do is say add a new field from there we're just gonna say basic details and this is just simply going to be the name that's going to be used on the tab so a field name is basic details that doesn't really matter though because once we change this from anything we have listed here to tab which you can just about see right at the bottom under the layout section you'll see that disappears anyway because this isn't data we can pull in this is simply a visual way of grouping things together so once we've done that we push to eat and everything we need on there so we're gonna come down now I'm going to close this up second say add field and the next field we're gonna add in is now we start putting in the details for our property so the first thing we're gonna drop in is the property price you can see the automatic pre fills out the field name next up we need to say what field type this is and we're gonna set this to be a number scroll down and if we want to we can set any other details up so we're gonna say this is required the prepend is basically just what we want to put in beforehand so we're gonna say we want to put in the pound sign so drop the pound sign label obviously if you're working in dollars or yen or anything else you can drop that in there and again this is just a visual thing it's not really gonna do anything else other than that we're gonna set this to be a 30 pixels wide or 30% wide I should say just to make sure that it isn't huge on our screen now we're gonna close that up we're gonna come and add another field in on the next field we're gonna add in is gonna be the property address field so again we're just simply gonna put in a title that will pre-fill out the field name change this this time to text area to give us a bit more space again we want this to be required we can if you want to set up things like the Rose we're going to set that to before we don't want this to be too big and we're gonna say everything else it looks pretty good on this we'll close that down again and the next field we're gonna put in is property features now property features is a way of allowing us to select what kind of features we want to have so these are prefilled out you could just select those features so again we just have a prefilled the name of the field type we're going to come in and we're going to change that to be checkbox so let's just scroll down now and let's go through and set what values we want so choices there's two ways you can do this you can either put in just a value or you could put a value and a label together as you can see there's a little example of what I'm talking about there all we want to do though is we want to drop in just the actual choices the name of the choice we want now the reason I'm doing this is because we're not assigning this to anything really important this is just gonna be output for the end-user to see what we're talking about so it's a very very simple way of doing things we don't need to pass data over and do anything with that data other than just output it allow custom this allows us to let the end-user or anyone's actually input in data to do with a property they can add extra choices in so as new choices become available they can be added in directly inside the dashboard so we will say allow custom and we'll also say save custom default value we're gonna leave that empty as is we're gonna set the layout to horizontal and then we come down you can see we've got the return value now you've got value label or both in an array now because we're only using a value in other words we've got a conditioning BBQ and so on we can just leave that set to value if you want to or you can actually choose label doesn't really matter too much to be honest so that's what we want to do this we're gonna scroll back up I'm gonna just close that down and finally we're gonna drop in the map option so gonna say add new we're gonna drop in map and see prefer the field name come down we're gonna just choose Google Maps from the list so scroll through until we find google map and there we go so we're gonna leave everything else set inside there as is but obviously if you wanted to you could change the zoom value the height you and so on I'm gonna close that down now so we've created our first basic details tab we want to now create another tab so we're gonna do is a add field this time I'm gonna call this gallery so say gallery inside the field name again pre fills it out but doesn't matter choose the type scroll that up a little bit so you can see what I'm doing and we're gonna come down and we're going to choose tab okay so there we go so you can see that's done that the next thing I want to do is just choose what we want to put inside there so this is gonna be our property galleries this just where we're gonna show more images of the actual property itself so it's close that down add a new field in call this property gallery come down we're gonna just choose a gallery as our option and this is like I say this is the reason why you need to have the pro version of advanced custom fields because you don't have galleries an option inside the free version so once we've set that gallery option we can now come over and set any kind of values that we want we've got image array image URL or image ID we're going to leave that as image array the preview size is just the slightest call it display inside the dashboard not on the front end of the website so don't worry about that now the only other option I want to draw your attention to is this live research and it says all upload to post now this is depend upon how you want to operate within your actual website itself within dashboard of WordPress if you do all it means that any images you upload as part of a custom post will be uploaded to your media library and accessible throughout the entire website that's great if you want to make those images accessible to pages outside this specific listing however if you are going to end up with potentially thousands and thousands and thousands of images it may be a better option to say upload to post that will upload the images and only show them inside the post area itself for this specific property up to you how you do it depending upon the complexity and the size of your site storage and a whole manner of different reasons why you may want to choose one option of the other I'm going to leave it to all just for simplicity because I'm gonna reuse the images various different times as I demo this however normally on a more complex site I would choose the upload to post option okay so that the gallery everything is in place there we don't need to do anything more on that finally we're gonna come down we were to choose the agent details so gonna close this down add another field in and this field is going and gonna be a just tab just so we can separate things off so we'll do that I'm gonna come down then we're gonna choose tab as the option but this time we're gonna check the endpoint box because this is the last tab we're going to use inside our custom post type so with that done we just in time in now and add in our final entry which is going to be the property age and this is where you can choose a relationship status between the property and the agent now this is something that may be a little complex if you've never used it before however once you start to get your head around what's going on it actually is fairly simple and straightforward however we're going to do is gonna come an arrow a new field we're gonna drop in the name which is property agent but we're gonna choose the field type let me just scroll the page you can see this a little better from there we're gonna scroll down and we're gonna choose the option for relationship so doing that opens up a range of options now that were specific to these relationships so we no need to configure things the way that we want them to work so into the filter section we're gonna come down and I just want search so we're gonna uncheck post type uncheck taxonomy we're going to select featured image now if we go any further we need to say filter by post type we need to say well where do we want to pull this data from if we click on there you can see it gives us all of the options that we currently have what we want to do is choose the agent option because this is where we're gonna link this property to a specific agent so we just choose agent once we've done that we've now told it where we want to look for this information so finally we're gonna come down and we're gonna say what's the return of format we're gonna say post ID we want this to use this specific ID of the custom post type in this example we're talking about the custom post type ID for a specific agent that will be linked to this particular property ok so once we've done that we've pretty much got everything we want inside there so we can come back up close this down and let's just take a little look at what we've done we've created three tabs we've got the basic details tab the gallery tab and the agent details tab inside there we've grouped together various different aspects of the property and also the agent now again like I say these are probably a lot less than you'd normally have as part of a property but they just demonstrate the different kinds of ways you can set things out you would in a real world scenario have a lot more fields but the process is going to be exactly the same for not only creating these custom post type fields but also how you actually output those and display those when we take a look at the templating section so with that all set up we now just have to go to the process of publishing this and we've created our first set of custom fields just publish that and once we've done that let's just take a look at this inside the actual property section and then we'll come back and we'll set things out for our agent so come over to our properties we're going to come in to add new and inside there you can see we can have all the normal things we'd expect to see we've got a couple of extra fields inside here that are specific to the fact we've got things like any where element or install we've got sort of WP use of front-end forms and so on so these are things that you can see they're specific to that particular set of functionality however we scroll down you can see we now have our property details section set up we've got basic details gallery if we scroll down we've also got the agent details now you may notice that we've got the Google Maps set up inside the dashboard however we're not seeing the maps displaying correctly and this is because we need to tell advanced custom fields Pro how to use or what the API key is for our specific account inside the Google Maps API now this is something that is specific to you you're going to need to set this up and get access to your own custom API however the process of that integrated into the advanced custom fields it's fairly straightforward what we need to do is we need to come in and edit the functions.php file now normally I would edit that inside the actual FTP account or via my hosting account however you can if you want to come into the theme editor under appearance in your dashboard and from there you can say you understand the warning come over to your themes function and from there you can scroll right the way down to the bottom and you can simply drop in the code then I'll give you a link to in the description below which you just need to insert your custom API key into and then you should have access to the functions so I'm gonna drop that in there and save this and jump back out before I do that the reason why I would generally recommend you don't go about doing it directly inside WordPress itself is because if you make a mistake and you corrupt your functions.php file then it means that you can potentially get locked out of the dashboard and then you'd have to go in and get access to that file and edited via either your hosting account or via FTP much easier to do it that way if you make a mistake you're already in there and it just makes the whole process a lot simpler okay so I drop in my details and then we'll save this and we'll take a look at the dashboard and there we go just by doing that you can see now we now have access to the Google Maps API and we've got the map we can go through and search we can do all the kinds of good things that we want inside them so that's the property section setup the custom fields the custom post type and so on next we're going to go through the process of creating our agents custom fields so again we will do the same thing again we're gonna come back out we're gonna go into our custom field section we're gonna say add new and from there we're gonna start creating our agent details now I'm keeping this really really simple and straightforward we're gonna come through we're going to say the rules gonna be again like we did last time we're gonna set this post type is equal to agent we leave all the settings as they are however we're just gonna added some really basic details about the agent themselves so you say add field we're gonna add in the telephone number we're gonna set that text is perfectly fine so we can these spaces however you can set that to whatever you want required is yes we're going to do we're gonna add another field in and this one is simply gonna be the agents email address and we say agent email drop that in there we'll say we want this to be an email field we're gonna set that to be required and other than that we're gonna leave it as is so if we take a look when we created the custom post type we set that up so it would have the title which we can use as the agents business name we've also then got the details so we could put in a teach as we want and finally we've also got the featured image which we can use then for the logo or so on whatever you kind of want to use let's head publish on that once we've done that if we come over now onto our agents section we come in to say add a new agent you can see we've now got those extra fields for the agent telephone number and the agents email alongside the featured image the actual details and the title so you can set this up in any way that you want you can add in any details that you want so you can make this as comprehensive as you need to okay so with that in place we've now created the ACF section we've linked those suit our custom post types we're now ready to move on to the next stage so next up we're gonna take anywhere elemental Pro and start building out some of the templates that we need to work with both our properties and also to do with our actual agents now we're going to use this because we don't have native support in sight Elementor pro for these kinds of features so we have to use this plugin for that so let's just jump over now into anywhere Elementor pro and start taking a look at how we build those template files so we need to do now is create a couple of agents just so we can use that data when we're actually going through and set and the templates up so there we go there's the data for the first person so we're gonna do is we're just gonna publish that to be our first agent and then I'm gonna quickly just go through and do exactly the same thing now for another agent once I've done that we're gonna crack on there and start taking a look at how we start to pull things together using anywhere elemental and some of the templates in functions there we go there's our two agents all set up so now with that in place we need to go over to anywhere Elementor so come over to the entry for a e templates and from there we're coming in and we're gonna say add new once with the add new section we can go through the process of creating the various different templates that we need now elemental approach theme builder has a lot of options available but there are still some areas that it really just doesn't work with one of those key areas is things like repeater and relationships and things along those lines now this is why we're going to start using anywhere Elementor Pro because this gives us that extra functionality and fills in those gaps that we currently have now again as with everything I hope this is something that elemental Pro will address in the near future but until then we have to rely upon third-party tools like anywhere Elementor Pro so the first step we're gonna create is the agent template now just show you what I'm talking about first of all so you can see what we've got to be building if we jump over and take a look at one of our property entries you can see this had all the details description and so on if we scroll down at the bottom we've got the agent details block and this is where we're gonna use that relationship we just set up and created inside ACF with that in place we just need to make sure that we have that link and we have the template set up that'll do all the things that we want so if we jump back over into our dashboard into anywhere element or template section I'm going to drop in the title for this we will leave the edit with elemental a second we're gonna come down to the anywhere element or settings now this is where we can configure quite a few different things I'm not gonna go into too much detail about this we have two areas that we can choose at the moment which is the render mode and the usage area however that second section will change based upon the render mode that we choose so at the moment it says normal and usage area nothing none so what that basically means is we would just be working with Elementor as we normally would there would be no kind of link through to anywhere element or settings or if we click and change that you can see we have a range of different options what we want is the block layout we're gonna choose that and it changes to a preview post and this is where we can preview one of the posts we want to work with expand that out now with us just start typing something as we will type in Betty and you will see that now pulls up Betty loop which is the example that I just created for one of our agents so I click on that and that's now gonna use that as the data we want to pull in and it'll be used as the preview data when we create in our template so with that in place we're simply gonna hit publish or save draft if you're working on a live site doesn't really matter too much which one we use we're never gonna come in and say edit with Elementor once we've done that that'll take us into element or like you'd normally expect if you wondering why my Elementor is darkest because we're using 2.8 this is now the latest version of the time record in this video and it allows us to kind of work in a slight dark mode so we've got that set up all we're gonna do now is we're gonna just change this so we've got a blank template so you know counter to the setting section underneath there we're gonna say the page layout we're gonna come in to that and we're gonna say element or canvas and we're just gonna make sure that hide title is on as well so that just gives us a completely blank canvas with nothing to get in the way when we're setting things up okay so we can come back out of that we come back into the widget chooser so first thing I'm going to do is just put in a simple plain heading and this is just going to be the title for this particular block so just drag that over there and we just going to drop in and we gonna just change this to agent details let's just change that to details okay so we were styling that later now I've already gone ahead and done styling and so on I'm going to copy those details over after I've shown you how to set it up the styling is something you should be more than accustomed to when working with element or an elemental pro okay so next we want to do is now go through and start pulling in the details so first thing let's just come back over to our widgets and we're gonna drop in an inner section go drop that at the top and we could style that and set that up however we want to I'm going to simply come in I just leave it kind of as is at the moment just gonna move this over a little bit and we gonna set this unlike 20% over on the left hand side that'll do and from there now we can start pulling in the relevant details so first thing we want is the actual photograph of the age and themselves so going to come over to our widgets and from here we're gonna just choose what are the AE widgets so we will type in AE and that should then filter things down so you can see we've got all the AE widgets we want so we want is the post image so gonna drag that from there and drop it up into our area and you see that now pulls in the details we can change the image some size we can change that to whatever we want the image alignment where you want to link it to something all those kinds of good things what we're gonna do though is gonna set this to be none we don't want that to link through to anything we can change the image ratio if we want to and all those kinds of details so I'll just leave it as is that looks perfectly fine for this so once you've done that we're now gonna pull in some additional data first we want to do is pull in the title so in other words the name of the person we work with so again we're gonna do ie from there we're just gonna pull in title so with a drag and drop that over there and you can see that pulls in the name of the individual the next thing we need to do is insert the telephone number and the email address for this particular agent or any agent as part of this template so we're going to do is we're going to come back over to our widgets on the left hand side and we're going to simply come in and search for custom and from there we want to make sure that we choose the AE custom field option can drag and drop that over underneath their name and for me here we can now go to the process of adding in the relevant different data now you can see it says name and we've got my key well what we need to do is we need to make sure that we use in the right key for the specific field that we want the reference now I know that my fields are agent underscore telephone you see that immediately pulls in the phone number however if you're not too sure there's a very easy way to find out any of the keys for any of these particular custom fields all you need to do is head over into your dashboard over into your custom fields open up the field group that you want to reference and then you'll see that next to every single one of the labels we have the name and this is basically what you want to copy so you can see we've got agent underscore telephone agent underscore email for the email section so it's very easy if you're ever unsure simply have two windows open or just use a notepad and just simply make a note of what any of these meta field names are so what that in place we've got the right field in there we can now just go through and specify the different values for it so at the moment it says type is set to default and that will just simply output the text however what I want to do for this particular one for the phone number is I want to make it a link and this just really means that if someone's on the website using a mobile phone instead of them having to make a note and try to copy and paste that telephone number they can simply click on it it'll ask them if they want to dial and then you just make their life a little bit easier so we need to do is change the type from default we're going to change that to link once we do that we now have extra options available so we're did to do is tell it what kind of link this is so we're open that up and you can see we've got default email or telephone so we're gonna select telephone that now sets that up to be a phone number links to static where we can change that to whatever we want to we'll just leave that as is though because we want to use it with this link static text basically all these values as they are the only thing we want to change is the icon and from there we're gonna come in and we'll search for phone choose phone is the option and you see that now puts the phone in front of our telephone number we're pretty much done that's all we needed to do obviously we need to go through and style things but we'll do that a little later on I'm gonna do that behind the scenes you don't have to watch me doing something you're probably more than comfortable doing okay so we're gonna do the same thing against we're gonna come back out we're gonna choose custom and then we gonna drag and drop in this custom field and this is we're gonna put the email address in this time so using the same logic we just need first of all to take that name for that field go take out the mikey with a drop in agent underscore email and you can see again it pulls in the right data now I don't want to make this a link because that's the whole point of why we're gonna have a form underneath so we're going to leave that this time as just simple text however we're gonna come down and change the HTML tag I'm gonna set that to be P for paragraph and that will just make sure that the sizing is done nice and neat and tidy so now we've got to put in the post data in other words the description of this particular agent so you're gonna come over and we'll just do a search for content and we want the AE post content we're gonna drop that underneath just to make sure what we want there we go as you can see that pulls in the data so we've pulled in all the dynamic data the final thing I'm going to do is create a contact form that link through to the email address of this particular agent we don't want to sort of generic one this is pretty straightforward first I'm going to do is just gonna duplicate to this heading we're gonna pull that down underneath there and we're gonna say inquire about this property there we go change that we got okay so well that in place we no need to drop a form in so we're gonna use the normal form that we have as part of Elementor Pro and drag and drop that underneath thee we can quickly style out and put whatever we want in we just simply want to create something very very simple and we want name email and phone number so we're gonna add an extra field in this will duplicate the email we'll change that to a phone telephone there we go we're gonna put change that to a phone and we'll change the placeholder there to phone as well now we're going to do is going to set these to be 33% so we can quickly make these all look nice and neat and tidy a nice simple clean form that doesn't take up too much space on the page okay so there we go there's our basic form and what we're gonna do now is we're gonna set up how we want this to be sent again I gotta come back in a little later and we'll style this all nice and neat tidy so we want to do is we need to put in a hidden form first of all which is going to be the details for the email address of the agent so we're gonna do is gonna add a new item inside there from there we're gonna choose the type and we want to set this to be hidden this is one of those really cool features inside the form editor inside Elementor pro you can do quite a lot of really cool things so and the content we're gonna leave that the hidden we're gonna put the label and we're just gonna call this agent email then we're gonna come over and just make sure we've got everything set up the way we need it to be so under advanced default type you can see is empty we need to change that now to be an ACF fields we were scroll down choose ACF field click a little wrench icon from there we're gonna say the agents email so that will now create that link through to the agent email at the moment it says field to which doesn't really mean a lot to anybody so we're gonna change that just to make sure it makes more sense I'm gonna call an agent email and you can see that now it gives us this short code and this short code is what we need to be able to send this data through or set use the email address then as these sort of recipient so with that all done we're now ready to go ahead and just drop this in where we need it to be so gonna close this down come over to action after submit and you can see we can choose email from me now if you don't have email setup which is normally the default you can simply just click and choose what you want from them what I would also recommend doing is to redirect this to another page and maybe even send a second email to the actual owner of the site so someone knows that something's been sent or maybe even to the person to send in the details through lots of different ways you could sort of set this up and you know make it a sort of user friendly as possible for this though we're gonna leave this set to email then we're gonna expand the email option out now at the moment it says to and that's going to use the normal default admin address to set up as part of WordPress when you created when you set up install it we don't want that we want this to be sent through to that email address for the actual agent so we'll do delete that from there jump back onto our form fields and from there we're gonna open up the agent email advanced and make sure that we copy there's short code once you've done that we can simply come back or the email tab come in to the two and we're going to simply paste that inside there that now is going to use the email address for the agent that's dynamically generated as part of this particular section this template then you can go through and you can set any of the other parameters that you can normally do the thing I would recommend you change is the reply to and we're gonna set that to be email field so when anybody receives a form from this they can reply back to the person whose email address is actually inserted into the form so it just makes the whole process easy but sadhana you can come through and take off these various different things now from gdpr point of view i definitely recommend you remove things like remote IP and so on you only want to collect the bare minimum of information you need to fulfill the request of anybody sending this form through ok so once we've done that that's the form now pretty much all set up in place the only thing that's left to do is just style everything to make it look nice and neat and tidy and I'm going to do that now when I pause the video so first of all let's just hit on update and that now is our template created for our agent is going to be used as part of the individual property details section so that in place I'm just gonna simply come over and quickly style everything okay so I've gone ahead styled everything and it's now the way I wanted to look so we've got that part done the next thing we need to do and to be able to use this template and to be able to use these relationships is use anywhere Elementor to create the actual single post type the layout we're going to use we look at an actual property so I'm gonna do is we're gonna simply make sure we've updated this code saved out and then we're gonna exit back to our dashboard and we're gonna create our next anywhere elemental base template now before we create that template it's going to make our lives a little easier if we have at least one property listed so why not do is I'm gonna create a property so we can use that to flesh out the template on how some dynamic data inserted into it just makes the whole process easier so we're gonna do is we're gonna come in at first of all we're gonna set our property types so from there we may choose property type I'm gonna just keep this simple we're just gonna put in house we need everything else as it is and we're going to come down and say add property type so we now have a property type set up now we are coming in and say add new for adding a new property and now we can go to the process of adding the relevant data into our property just to make sure that we've got something listed so I'm going to go ahead and do that I'm going to come back once I put all that data in ok so I've gone ahead input some data created our first property and before I save that and publish it just want to show you a couple of things now we've started to add some data into not only our properties but also into the actual agents so all the normal things you'd expect to see the name of the house the description and so on we come down to our section then for property details underneath the basics tab you can see we've got the price the address any of the features that are part of that property you can also see that we've got the map which is searchable and automatically pulls out the irrelevant data based upon the address that you put in fully searchable come down you'll see we have the property agents so you can see all I need to do is click and choose any of the agents that are part of this particular property so we know Betty loop is going to be the one that's gonna actually be the person selling this so I'm gonna click on there that will then put it over to the right-hand side she is now at the agent that's part of this property if we come back up and we go to the gallery search and you can see you've got a couple of images inside the gallery so we've got a nice simple clean interface to work with if you want to hide any of these active features we can simply come to the top we can say well we don't want some of these different things inside you all these W PUF these AE templates and so on and we get a nice simple clean interface so with that in place we're simply gonna publish this and we've now got at least one property that we can start to use as part of the template in okay so let's come back over now into our AE templates and say add new and from there we're now going to go to the process of creating our template so the template is simply going to be called property listing so we're gonna just put the title in they once we've done that we're gonna come down and we're gonna go through and set up the anywhere element or settings again so like we saw when we created the agent template we need to tell Ellie where anywhere elemental what type of template Oh going to be creating so first thing we do is change the render mode at the moment is still set to normal however we need to change that to the post template option click and you can see we have a lot of different choices we're going to choose post template because what we're doing is we're creating that single post template next step what's the post type by default is going to choose posts however we want this to be properties now click on that then we've got preview posts and this is where it's a benefit to have at least one post for the template that you go to create because it means that you'll have data to work with now click on there and I'm gonna start typing in home and you can see it pulls up homely house which is what we just put in and I choose that but I say Auto apply to make sure that it applies this template to any of the properties and then the template we're gonna leave to theme default so we've got the basics in place we can now either hit publish or save draft save draft if you working on a live site will say publish because this is just a demonstration and now we can go into Elementor and start working with that so we're click to open with Elementor and we can start working with the editor to create the template and pull all the data that we want into it so you can see it now pulls in the normal header and footer and the areas that we've got as part of our design just for simplicity I'm gonna get rid of those again later come up the settings section we're gonna make sure that we've got this set to page layout is going to be elemental canvas and if the title is still showing we can just simply choose to hide the title as well so we do that we now have our nice simple clean blank canvas to work with and we can go through the process now I start to fill out all the different areas so first things first we want to put in the title the address and also the price and the date that this was added so we start by creating a simple one row one column block an insight there we're going to drop in two sections with intersection but we're gonna get rid of any spacing first of all so select this and we're going to come over and we're gonna specify it column gaps are going to be set to no gap come back out drop an intersection insight there and leave that 50/50 and again we're gonna set this to have no gap so go select it no column Gaus this just gives us full control over then how everything is going to be laid out so they start off by dropping in the title I'm going to do is we come over to the AE widgets I'm going to just put in the AE title now we're gonna use the anywhere elemental which is for most of this because we want to make sure that everything would do it is working flawlessly with the anywhere elemental plug-in so with that in place you can see that pulls in the name of the property itself and then underneath that we're going to drop in the address so again we do the same thing again come back over to our widgets type in a e from there we want to make sure that we use the AE and we're looking for that custom field so we drop that inside there choose from the dynamic options so we're just gonna simply choose property address which is the meta field name for the address of the property we're working with and you can see that drops that inside there we change the HTML tag and set that to be P so we can control the styling on that now I'm not worried too much about the moment we're gonna go through and set the styling later on like I've done in the previous section cuz I don't bore you were just going through and just making things look nice and neat and pretty so let's come over to the right hand side now we're going to come onto there and we're gonna do the same thing again so we're gonna come back over we're gonna search for ACF and from there we want to pull in the ACF field so I'm gonna drop in an ACF field inside there so now we can go through configure things and specify exactly what's going to be used I'll tell you why we're using this plugin or this particular widget in a moment so first thing want to do is just drop in the field that I want which is the price we're gonna set the skin to be a numerical number there we go you see that now pulls in the value and also put in the comma for the 50,000 or whatever kind of numeric value you're working with and this is one of the key reasons why we use this particular function because it gives us more control over how we style the data that's being pulled up so the moment the 50,000 doesn't mean anything so we're going to put in a pound sign so we're going to just drop in at the pound sign for both the singular and the plural prefixes and you can see now that pulls up and puts in the right data and the right value we're gonna set this to be right aligned then that puts the price for this particular property over on the right hand side again like I say will style all this a little later next we're going to come back at our which is again and this time we're going to just choose post meta again this is one of the widgets we're gonna drag that over drop that on the right-hand side and we're simply gonna go through and choose what we want so we don't want categories so we don't want tags we don't want author and we don't want comment we only want to show the date so with the date set we can then go through and change anything that we want so we're gonna say just get rid of this icon we don't want the icon on there and we're going to do is we're going to specify that we want to put in the label is going to be added and you see that put in add it and then the date and pretty much everything else is perfectly fine the date time publishing you see that they type display published and also the date format so we can change that if we want to and you can see we've got a range of different options to choose from however I'll leave that as is and we'll just make sure we disable the links that doesn't try to link through to anything and whichever the styles would set that over to the right-hand side as well so that's put in the key data we've got the title of the property the address of the property the price and the date this particular property was added next up we want to drop in the featured image for this particular property when the do first of all is open up the navigator because sometimes it makes a little awkward to place things where we want them to be placed especially we have an intersection set up so with that in place it just means that I can make sure that this goes where I wanted to go so in the do is going to come over I'm going to search for post image and there we go there's our post image and again it's the anywhere elemental because it's denoted by the AE at the beginning so we're gonna simply bring that over drop that not really what I wanted to go so I need to do is just simply drag that down or position it underneath in the column and you see that now places it where I wanted to be placed obviously it's not looking the way we want it to at the moment so we need to change some parameters for that so it says image size we need to change that I'm going to come up we're going to set that to be full size and there we go that's put the full size image into place if you want to know we can specify anything as we want so we'll just set this to be imaged aligned we don't want this to link through to anything because obviously this doesn't need to link through it's just literally the image so we're going to change that we're gonna say we want that set to none if you want to set things like overlays and styles and all those kinds of things you can do whatever you want there but that's the basics now put into place next you want to do is drop in the description some recently added at the property location and so on of the details and then finally we're going to drop in the agent details at the bottom using that template we created in the previous step so like we did oh yeah we're just gonna drop in another section that's we're gonna create a new section and a click this time we want to make sure we have a two column set up so we're gonna have some details over on the right-hand side and the main description probably location and so on in this left-hand section I sound a little bit of spacing around that just so we go to breathe breathing space I'm gonna come up I'm gonna set we're gonna have padding at the top set to 50 and we can worry about the bottom should we need to a little later so that's put some breathing space in there next they want to do is drop in the description over on this left hand side so we go first we're going to just come back with our widgets drop heading inside there and we're just gonna put this as description we'll set that to be heading 3 and we'll style that a little later on we're also gonna drop in something simple like a little separate alliance with a drop in a divider line there I'll drop that in it will just change the styling on that get rid of the gap that's okay right so the next thing I wanna do now is drop in the actual details for this particular property so we're going to come back over we're going to search for post content again these are all AE anywhere elemental widgets we're gonna drop that underneath that line drop that in there and you can see that now pulls in the relevant information next that we want to pull into the property location so we're gonna do the same thing again we're gonna just duplicate this heading so gonna say duplicate that will drop that underneath there change that to property location duplicate this line as well so we'll just duplicate that and drop that down underneath and now we can just take our map widget to drop in the let's just grab our Google Maps so we'll just type in map google map and we're just going to simply drag and drop that down below the line okay so what we need to do now is just change this to show the actual location so you'll click on dynamic we scroll down find a CF field and from there gonna click on the little wrench icon and come down and choose property address now don't worry if nothing's showing up for your actual property map when you're creating the template once you actually load this into the light life site you should find everything is perfectly fine you can tend to find sometimes you'll have these little quirks when you're working with templates and any kind of plugin even elemento Pro itself doesn't always show the data as you'd expect it to so with that said let's move on to the next section which is going to be the property feature so it's the same again we will just duplicate this we'll just drag and drop that below and we'll do the same thing for the line we'll duplicate that just to make sure we have consistency okay so let's just change that now to property features okay so next thing we need to do is drop in another ACF field so going to come back over the search for ACF we're going to drop in the ACF fields and put that underneath there now with that in place we can go through and tell it what we want to actually pull in so this time we need to change the skin to something different again so at the moment it says text what we're going to do though is gonna come down and choose checkbox because this is the style we set things up inside ACF we chose the options the different features you can have as part of the property they're all checkboxes you can just check off the various different features that are applicable so once we've done that we've got a post field is fine for the source we're going to come in and choose our field which is a property underscore features like I've showed before if you ever stuck simply come back over and you can just take a look and the ACF field groups pull in the relevant data from them so that pulls it in you can see that pulls the data in doesn't necessarily look great at the moment so we need to style things out a little bit we will leave most of the values as they are however we're gonna choose an icon and we just could come on there and we're going to just type in check choose the check box and you can see that now just puts a tick in front of all the things that actually show a value now if you wanted to you could also put in unchecked items so you could have one color that's checked for anything that's actually included and then you have other things that are ghosted out in a light gray for example that don't have that feature and you might have an X in there instead of a tick it's up to you for this we just want to show the positives and not show the negatives so that's with that in place we've now got those relevant features in there and like I say if we wanted we could easily come in and we could fine tune we can also go sort of style things and do all those kinds of good things for now we're gonna leave that as it is so we're gonna do the same thing again we're gonna duplicate these headings so we're gonna duplicate these lines kind of getting repetitive here doing this kind of thing but it just means that the whole process is quick and pretty much painless so just drop that underneath it this time we've changed that and we're going to just change this to property gallery okay so once we've done that we're simply going to come over now and add in a gallery so we're gonna come over here widgets just search for gallery and for this we're gonna use the default Elementor Pro gallery there's a lot of nice features in there okay so type is gonna be single we're gonna change this now for dynamics we're gonna click on dynamic we'll come over to a CF gallery field then we gonna click on the wrench icon and choose the gallery field we want which is the property gallery so you choose that once we've done that we can close that down and we can set any parameters we want so we're gonna leave most things as they are we're going to set the columns to be three spacing is perfectly fine aspect ratio we're gonna set it to one to one and once we've done that we're gonna set this to medium large so we've got the basic things set up in there and if we want to change anything else like overlays and all those kinds of good things we can do that as well like I say you're not gonna see anything at the moment until we actually pull in some live data but there's our our set in setup already now for us we've got the key things that we wanted we've got the details about the property we've got the price the data is added the actual image the featured image the descriptions and all those kinds of things that's just delete that from there so let's just save this now and just test it out before we move on and add in the agents details so taking a look at our test site you can see if we look at the property all we're currently seeing is the title of the property or the name of the property and the description so let's just refresh the page we refresh that and as you can see absolutely nothing happens there's one reason for that let's come back into a dashboard when we're working with anyway elemental probe we have to enable it to be supported by the theme that we're using otherwise you're just going to see the normal default theme files even something as simple as used in the holo theme which doesn't really have much in the way of theme files associated with it still gonna have that problem so all we need to do is come out of our dashboard into the main area come into the settings section for anyway Elementor templates and from there we've got an option that just says enable theme support click on that hit update once we've done that come back over to our page and refresh and we'll find now that starts to use our template and you can see we now have all the relevant information so we have the property gallery we have the details what the property features the address of the property all those things are in place just needing to be styled out so what I do is jump back in now into the dashboard we'll take a look at how we add in the extra area specific to the actual agent that's selling the property ok so let's add a new inner section and this is where we're gonna house the actual details for our agent we get rid of the second column so we're just going to delete that from there and once we've done that we're just gonna simply select this and make sure that we have no column gap on it okay so with that done we now need to find a way of dropping in the details we want for the agent to do that we've got a dedicated widget so we come over and we going to search for post blocks and you see we've got element anywhere Elemental post blocks we're going to drag and drop that down into our new area and the first thing Isis do is select our template so if we take a look on the left hand side it says what is the source for this particular template by default is pulling in posts however we need to change that to relationship so we will choose relationship then once you do that you can see block layer and it says select the template we want to use basically so we're gonna choose that and there's our agent the template that we created earlier let's select that and that now pulls in the basic area however the next thing we need to do is choose the relationship field now what exactly is the relationship field well it's exactly as its name suggests it's the field that actually links the things through the name of the relationship field that you created earlier as part of your advanced custom fields meta fields so let me just show you how you can find that data should you need to we're going to open up our field groups from there we're gonna choose the property details open that up and you can see there's our property agent which are a relationship field and the name of that field is property and the score agent so we're gonna do is we're gonna copy that from there once we copied that we'll come back into our a e template and from there under the relationship feels we're gonna paste that in and you should find then that that will pull the data in and start to display it as you'd expect to see it so that's the data being pulled in we just now need to go through and style the layout so the moment you see says columns is said to three we want to set that to be one and you see that now pulls in our agent details including the contact form the contact details phone number all those kinds of things are set up directly inside there so now you can go through and you can style this and configure this any way that you want to to make sure that everything looks the way you expect it to and sits and fits nicely with your overall layout so I'm quickly going to change a few things on here I don't want the layout mode to be grid I'm going to change that over to B list so if we have more than one agent we can display those and just to make sure that everything else is set up the way that I want okay so that's looking good we're gonna hit update on me that will now save those changes so we're going to do is we're gonna jump over and take a look at this to see how it's all working come back over we're gonna refresh this it was previous example and we're gonna just scroll up you can see there's all our details our description our location map and now we have our agent details at the bottom now just to confirm this is all work in the way we'd expect it to work we're going to do is come back over to our properties come back in and we're gonna edit this and from there we're gonna change the actual agent you take that to Dave Doe update that come back over to our test page once that's updated and refresh and we should then find Dave Doe is the actual person that's going to be representing us to sell this property so you can see we've created that relationship we've linked everything through we've created the form down all those kinds of good things all we need to do now is quickly go through style everything now I'll show you just a couple more things to drop in on the right-hand column section before we move on to the next stage as part of this tutorial now we're nearly at the end of this section where we've gone over anywhere elemental on setting things up all I want to do now is add in recently added option on the right hand side this is something that's purely optional you can skip this step if you want to but it's a nice way and then people see the recent ad additions to your website whatever that kind of website actually entails so what we gonna do is we simply gonna drop in a heading so we're going to duplicate this we'll drag and drop that over onto this right-hand section that drops that into there next up we're gonna come in and we're gonna just add in a edit post section or a post section so we're gonna come back over to our widgets and search for posts from there we're gonna drag in the posts option drop that underneath description change description to be recently added there we go and we just need to change this then from just being the normal looking at the actual posts and choose our custom post type so classic is perfectly fine for this we're going to set columns to be one we're going to say post web page we're gonna set that to be four choose medium large for our images and we're going to do is we're gonna come down into our query section and from there we're gonna tell it what we actually want to display so the moment is choosing posts we want to change that to properties and you can see that pulls in the only property we currently have which obviously we don't necessarily want to include this specific property that we're looking at so we can if we want to change things on them head over to the exclude option and from there we're just gonna click and we're gonna say current post so that means we won't actually see anything on there when we've got this on a live site so that's pretty good we also say avoid duplicates a big sure we've done it with a duplicate content on there now what you can go to is you can go through and you can just style everything the way that you want it to be so again like I say I'm gonna come back out of this I'll style the way this all looks but what you'll find is we start to add in additional entries we'll start to see more data in there but we are going to do though is take off some of this extra stuff we don't really want we don't want comments we don't want the date that this was added in there we don't want the excerpt we just want the title and we don't want read more so we're gonna see is we're gonna see the actual property photograph and the name of the property not pretty much all we're going to see so we're gonna quickly style this column so everything looks nice and neat and tidy and then we are pretty much done with this template and there we go with a little bit of styling added you can see this our property all the details are in place I've added another property and now as you can see we've got a recently added all the details are there if we want to we can come and take a look at this recently added property jump over to that one and you'll see all the things are laid out the way we expect and the recent the added properties will show the homely house which is what we just added in there so very very straightforward but also a lot of really useful powerful techniques have been covered in this particular section so the next thing we're going to do is open up elemental custom skin this is the free plugin that allows us to create custom loop items now if you've never seen this before it's basically just a way of creating the individual listing items on our archive pages and we can then pull through data from things like advanced custom fields specific data that we want for our particular property listing and then we can display that in our archive post so let's just jump over into the dashboard and open up that and start building our custom loop elemental custom skin makes dealing with the loop inside WordPress very easy especially when you want to target things like advanced custom fields to do that we will come with the template section and come down the theme builder and once you inside the theme will let you see a new tab called loop now this is installed as part of the plug-in itself so unless you have that plug-in installed you won't see the loop option however with it installed we can now create our custom loop so we're gonna do is we're simply gonna come out and say add new from there we can select the type we want which is loop and we're gonna give this a name and we're gonna call this default property loop we've named that and you say create template and that'll take us into the elementary ed etre we'd normally expect to see now when you create in your custom loop item you create in just one instance of that now I've covered this in its own dedicated tutorial so if you want to check that I don't learn more about this particular plugin check out the description below I'll put a link in there so you can hop over and take a look at that once you've finished working through this tutorial okay so once you've done that we're now gonna get rid of this area we don't want any of the predefined templates we're gonna close that down and we now have the normal editor as I make life easier we're not going to be using the header and footer sections in this so I can easily get rid of those but come to the settings section and from there we say page they're going to change that over to elemental canvas that gives us a completely blank page and just makes the whole process a lot easier next we're gonna come with the preview settings and we're gonna specify what we want to use to preview the data now at the moment you can see is trying to pull in the hello world which is a normal post but because we're creating a custom loop for our properties we want to change that over so we can view some property data so we're gonna do is we're gonna click on this arrow and you can see that when we create our custom post types they become available inside this preview section so it'll come down and choose property and from there we can choose any other properties we've already got so let's start typing in one of the names and you can see there's our stack apartment so we're gonna click on that say apply and preview now obviously nothing's gonna show up because we haven't started creating the template yet for our loop once we do we'll actually have some proper live data to use to test that okay now we could if we wanted to just use the featured image inside this section for the first part which is going to be the image of the property that would take a look at and that's perfectly fine because you got anywhere Elementor installed we can actually use some of the advanced functions inside them so we're gonna do is we're gonna just do a e to search tool for that and we're gonna come down we're gonna make sure we pull in the anyway Elementor featured image so we're gonna do is we say we were pulling this post image drag and drop that over onto our page and you see this now drops in the image currently issues in the thumbnail so we're going to change that over to a larger version so we go for medium large so we get a nice resolution version and we'll pop that into the middle you've then got the option to link through so in other words we're making this a linkable image so we can click and jump over to that particular property so we're gonna say yes we want that we also specify that post is perfectly fine so we want that you could if you can want it so you can set this to none if you didn't want the image to be clickable or you could just allow the end user to click and see the full version of the image but it just makes more sense to use post I'm also going to use the overlay option now this means that we can just create an overlay over the top of our image and just make things look a little nicer now you can see it the more it says show overlay never we're going to click on there and you can see we have three options we're going to choose the always option so we can end up with a gradient overlay now currently this is a solid overlay so you can see we just need to change that so in a color style section and from there we can just choose any of the settings we want so we'll change this from a solid when you go to gradient and we're just going to change that gradient over so color for the first one that doesn't really matter too much we're gonna set that to be 100% transparent I'm gonna come down then to the second color and we're gonna set that to be black and we'll just make sure the opacity is set as we want it to be okay so that gives us a little bit of a gradient over there now so if we wanted to put things like little labels over the top of this for things like on sale special featured and so on we could add that in there and it gives us a nice overlay so they will stand down for the background just more of a visual thing than anything else if you want to you can also carry it and tweak any of the values you want to on here so just gonna adjust this a little bit set that to about 80 and everything else looks fine so we know the darker section at the bottom so there's the first part the next thing we do now is go and put in some data that's specific to this property that just tells people what it's called the location and the price come back over to the left hand side we're gonna click to open up all our widgets again and if we want to we can now use any of these single post options so things like post title excerpt and so on so let's start by just dropping in the post title it's going to drive that drop that onto our page and you see that now pulls in the name of this particular property obviously we can go through and style things on there we're gonna change the heading now from a haitch one because it's not that important on the page we're gonna set that to h4 and later we'll come back and we'll style this up next up we're gonna come over we're gonna add another widget in so we're gonna come in when scroll down and we gonna grow the text editor drag and drop that underneath and from there we're gonna use the dynamic option that allows you to put in whatever dynamic data that we want so we're gonna do we're gonna click on there that are scrolled down to the bottom and we're gonna choose a CF field once you've done that we can now choose the little wrench icon and click and choose what a CF key field we want to use so for this we're gonna put in the address so we can scroll through and we say its property address it's gonna click on that give it a second so and you can see that now pulls in the data if we want to we could put anything before or put a fallback value in there to title it to you what you want to do I'm gonna leave it as it is for now and we're going to close that down so next step we're going to just drop in another one so I'm going to come back over scroll down until we get to the anyway elemental fields I'm going to the same as we did earlier on where we created the anywhere element or single post where we want to put in the price so we're gonna grab the relevant field for that so what we want is the AE ACF fields so we're going to find that AE ACF fields drag that over underneath our location and from there we're now going to go through and specify the different settings so like we did in the previous template we're gonna come down and choose number as the option post field is perfectly fine and then the field if you remember from the previous one was property underscore price you see that now pulls in the price detail so we know that eighty thirty-eight hundred thousand with the comma separator all we need to do now is just simply drop in the singular and the plural prefixes for the pound sign or whatever currency you're working with for your particular site so we've now created our basic loop item we can go to install this a little later but all I'm gonna do now is set this up and show you how it works so what I do is going to help publish on here it says add a condition normally you'd expect to add a condition but because we're using this as a custom loop there's no condition to apply what we'll do is hit save and close and we've created the actual loop item so now we've done that we need to go through and create the archive page inside the normal template set up as part of elemental problem so now that we've gone ahead and used elemental custom skin to create our custom loop item we can now build out the template file using elemental protein builder and start building out our archive template specifically using that loop and pulling in the data that we want including things like price and so on so let's just jump over into the theme build of Elemental and start creating our template to start building the template for our archive all we need to do is come over into the template section come down to the theme builder and from there we can start building things out so enjoy the archives tab and from there we're gonna say add new archive now if you've already created an archive you're just gonna see the option to add a new one in you won't see that first off like we just saw okay so we're gonna do is gonna call this default property archive I'm going to say create template now our archive page is going to be a two and one column on the one side we're going to have a little section where we can put the filters in the search the other side the main section is where we're going to see the properties so we're gonna close this down we're going to create our own custom layout so we're gonna do is we're going to come over we'll say we want to add a new section and we're going to call this a section which is a two column section click and we're still going to come with the advanced and we're going to come into our padding and we're gonna add some space at the top and bottom so in 450 pixels above 50 pixels below so we're gonna leave this left-hand column for now that's where we're going to put in our filters no search and so on what we want to do now on the right hand side is drop in the archived listing to do that they'll come back over to our widgets on the left-hand side and you can see because we're creating an archive we're going to go through and we have three options the title the archive posts and the author box now if we drag over the archive post drop down to the right hand section you can see it pulls in by default the actual normal posts not our custom post type showing our properties so we can change that as we always then we're going to come to the settings option in the bottom left hand corner come to our preview settings and we'll change that from recent posts or whatever may be in there and we should you want to scroll down until we find our property archive click on there apply in preview and we should then find that I will start pulling in the relevant data and there we go you can see we've now pulled in two pieces of information the two properties we currently have listed however what's happening is it's using a default layout so we need to tell to use our custom loop to do that we're going to select the widget again from the left-hand column where it says skin we're gonna change that from classic or from anything else that may be in there and what we want is custom once we open the custom option up you can see it now says select a default template in other words please choose what template you've created to use so we click on there and we've only got the default property loop once we click on that that will then load in our styling so you can see that's loaded that in and we can now come through and customize things so if we want to we can come in and specify how many columns we can go through and do anything else we want to set things up if we went pro we'd have extra options available so there's a pro version of Elementor custom skin for links that in the description so if you want to grab that where you can do nice simple things like equal height layouts and so on that could be something that's very useful for you but as it is like I say we're going to keep this really simple you can get away with using the free version for most parts next I'm going to come to the facet WP and you can see under there we've got options to enable this now because we're going to be using this particular page to do filtering on we need to enable facet WP even though we haven't put on you yet we need to make sure it is enabled so I'm going to select that enable it and now we can start to use that inside our template next up you've got your pagination options and this is where you can choose when you have lots more properties in there you can choose exactly how to paginate to go to the next page the previous page and so on so you can set this happen a range of different ways I'm not gonna bore you but go through that if you're used to working with elemental Pro in the template structure then you should be used to working with these kinds of things so we've got the basics in there now our properties at this innate we've got our custom layout for this we want to go ahead and edit anything on there to just change the way things look at extra content in any advanced custom fields we want we can simply go back into our custom loop and make changes inside there but effectively that's the basic starting points for our archive page the final thing we need to do is just publish this page and set the conditions that we want for where to use it so we'll come over click on publish click to add a condition in and we don't want to use this on all archives we're going to click to open that up scroll down and you can see we can come to the properties archive and from there we're going to say we only want to use this for the properties archive click on the Save & close if you wanted to add a second or third condition if you want to use this in other places like search results and things you could do that directly inside here we're just simply adding another condition in to use it on those relevant pages we'll just hit save and close and we've now created the archive page ready to go through and add in our filters and our searches okay so we're getting close to the end now of this video tutorial but one of the areas we really need to focus on is the filtering and searching of our properties and when we use in two plugins for this we're going to be using Fassett WP to do all the filtering I'm gonna link that through the search WP which expands what you can do with facet WP and allows you to create more complex searches applying Vista from weights to the different kind of areas titles descriptions property details and so on so you can make sure that when someone's searching they can find the relevant data quickly and easily as if me senator works well with larger databases if you have a lot of properties this is something that's going to speed up the process of allowing the end user to search and to filter so let's just jump back over to the dashboard now start setting up faceted WP linking it through with searchwp and how we get that entire search and filtering set up as part of our website so we take this page as an example of what we're going to create you can see the kind of things that we're going to put together we've got three distinct sections in this example but obviously you could expand this to anything you want we've got a search at the top which links up facet WP and searchwp together which we'll take a look at in a little bit we've got a filter then for the amount of money any particular property costs which is a live filters you can see when we adjust that it'll then start to filter out live in real time we can also use that in conjunction with the search and also with this hierarchical filter below now this is one of those areas that a lot of people have asked about is how do you go about setting these things up so we show an example of this hierarchical search if we open the first option up you can see currently we only have residential as an option because we've got things set up in this test site as commercial properties and residential properties that's just them through a taxonomy so you can set that up if you want to to expand things out underneath that we then got two other filter options which you can see currently a grayed out and we can't actually click on them to do anything because they're reliant upon this first filter so I'm gonna do when choose residential once we do that that will then filter through to show any residential properties which currently are all the properties in this demo site now we've got the option for the second drop-down list where we can now go through and filter based upon different criteria again using a taxonomy so you've got apartments bungalows and houses if we choose bungalow you can see that we'll filter that out and we only see the bungalow and then the third and final option comes up with additional thing so again this is just a hierarchical way of filtering things down to get exactly what you want you don't have to use all three you can use one two or three in this example and like I said you can if you want to use them in conjunction with the other filters and also the search so this is what we're gonna do so we jump back over into the plugins section you can see we've got three different facet WP things installed we've got the main key facet WP plugin we've got the element or add-on and the hierarchy select the hierarchy select has to be installed if you want to use this hierarchical based filtering we've also got searchwp installed so now we've got those installed activated and set up the next stage is to go through we'll start setting up our facets now one we're setting up our hierarchical select we need to make sure that our data structure is all configured correctly so if we come back at our property section and come down to property types we'll see currently we have apartment and house these are both key sort of parent categories in other words there's nothing else below them they have no child categories now in the example we took a look at originally the residential and commercial sections these would be top-level categories now underneath a we'd have underneath residential we'd have bungalows houses apartments and so on and then we could break it down further so let's do that now so let's just change what we currently have so the first thing we're gonna do is we're gonna add in what we're gonna consider to be a new parent section a new parent category so you'll call this flats then leave the parent property type to none now you can ignore these AE pro global templates and the dynamic templates and so on this is just some extra functionalities been added in with some of the plugins like anywhere Elementor pro and so on we don't need to set anything up inside there so we say add new propertytype and we've added that in but we want to make apartment sit underneath flats so to do that we're simply going to click on edit and once that opens up we're gonna just tell it that the parent property type is now going to be flats so we're gonna update that our we've now started to create our hierarchy to come back to our product property categories you can see we have flats and we have apartment if we want to we can add another set in there and we could just call this bed sets make that all one word and we can do property type under these flats again we just add property type so we've now started to create a hierarchy you can create these as deep as you'd want to go but don't go crazy with it end up with like five or six different subsections it all starts to get a little bit convoluted then so I'm gonna add a couple more sections and subsections into our property types then we're going to take a look at that just to recap and then we'll move on to start working with setting up our hierarchical facets our searches and so on so there we go I've added in some extra sections you can see we've got parents which are flats and houses and then we have subsections or child elements apartments bed sets bungalows townhouses terraced houses and so on now this also reflects when we take a look at adding or editing properties so if we come over to another property listings you'll see now because we set about custom post type our tax honor is to be hierarchical we now have this hierarchy available to us inside here so we can if we want to come in and just set things up to get exactly where we want these to be so homely house is fine I'm gonna say that's a terraced house you can see we could update that so we've now set that into two sections so we filter things out it'll then show up in two key different sections so that's the basics of setting up our different hierarchy for our property types the next thing we need to do is come over to a setting section and from there we're gonna come in to facet WP open that up and you can see it's already has one sample facet installed we're gonna get rid of that we don't need that to close that get rid of it don't want it I'm gonna say we want to add a new facet so from here we can now go through and set up what facets we want so for this one we're just gonna call this hierarchy and you see we then have the option for the facet type now as long as you've got the hierarchy installed the extra add-on for it you'll see hierarchy is an option and also hierarchy select so you choose hierarchy select and from there it says what's your date the source in other words where do we want to pull this information that's going to populate our hierarchical select boxes at the moment it says post type how are we need to change that and what we wanted me is the property types so let's just start searching we'll just type in property and you can see we've got a range of different options for property we come down to the taxonomy x' which is where you've got those set up we have property types I will select that so let me just recap quickly what we're doing here the label is just the name we're going to use to reference this particular facet so make sure we're there always unique the facet type is the type of facet or search or filter that we're going to use in this example we're going to use that hierarchy select so it'll be simple select drop-down lists the next option is the data source where we're gonna pull the information from to actually populate our hierarchical select sections and that's basically it the next option we have is sought by we can come in and we can choose highest count display value or row value we're gonna just set that to be wall value and we no need to worry about adding any depth labels and we leave that as it is so we're gonna do now is save the changes and we're gonna hit reindex and all that's gonna do is that's got to go and take a look at all the data on our site and just index everything that's currently installed as part of our content so in other words all the properties we currently have listed now if you want to check these out the easiest way to do it is come back to our facets and inside there you can see we've got hierarchy it tells us that the type is hierarchy select the source where it's coming from and finally the number of rows that have been indexed so it currently has four results for our properties now the reason for this it says for even though only you have a couple of properties we don't have four properties listed is because the property we do have listed appear in four distinct different categories so if you have a property that's in two categories that will show up as two results so if you see the disparity between the number of properties you have listed and the number of rows that's more than likely the reason why so that's the first of our facets done so what we can do is we can come back into our facet select and when we copy the shortcode this is what we're going to use to actually populate that filter section on the left hand side of our archive page so we're gonna do copy the shortcode that's now copy that in so we have the shortcode available to us we can now use that inside our template so the next thing we have to do is come out to our template section and come into our theme builder from there we want to find the property archive gonna hit edit with elemental to open that once we done that load the elemental and we could start putting these into the left-hand column start building at our filter section so we're gonna do is we're gonna come over to the left hand side win a search for shortcode and then we're simply going to drag and drop that over into the left-hand column this now allows us to drop in that short code that we've copied so all we're gonna do is right-click and choose paste and you see there's our short code for that facet now we hit apply even though we've add that in there we won't actually see anything at the moment because it doesn't have any date at a point and basically what happens is we just get this empty placeholder for this short code we need to go and actually test this on the page itself the most important thing you need to do when you work it with this is making sure that this section on the right-hand side which is where all the data will actually be displayed has been set up to use facet WP so if you haven't done that if you missed this in the previous section we've built this archive select the data source which in other words is going to be this archive post section come to the left-hand side and you'll see we've got a sectional they called facet WP expand that out and make sure that's selected and switched on as long as you've done that we should have everything in place it's going to update this page we're gonna take a look at this in action so let's hop over and take a look at the preview so we're gonna click on the preview option hit preview to open the new tab I want you done that we now have our two apartments or our two properties listed on the right hand side our filter is now set up with those two levels of hierarchy we click you can see we've got a flat and we've got a house if we click on houses that will filter things down it shows only the house and we take the next option you can see we currently have only one subsection inside there which is for a terraced house so we've seen that this is now working we can come back later and style this and update any styling we want to make sure it fits in perfectly but that's the first facet we've now created a hierarchical filter setup so that first step that's pretty cool and something that I know a lot of you have asked for on how do you do it well there's a great example of how you can use that but the best thing is this will all link through with the other filters we use as well so we can buying all of these to create way more complex filtering and searching options all done inside facet of the P and searchwp okay so you've done that we're gonna close this down come back in we're just going to close this up a little bit that give us a bit more room on the right-hand side so we've said that's about 25% we don't need so much room for our filtering update our page when did you know we finished with now we're to come back at the exit back to our dashboard and from our - we're gonna come back in to our facet WP settings so over the settings back down the facet WP and now we can create the next facet so the next I'm going to do is going to create a price slider which allows it to simply have a visual way of filtering out a bottom price at a top price so I'm gonna do and I say add a new facet again the first thing we're gonna do is put the name for this in which is just going to be price the facet type we're going to change that we want slider then see again we've got the data source post type well we don't need that we need to change this over to our property price so let's just search for price and there's our field advanced custom fields or the property price underneath they're both pretty much exactly the same thing it's gonna say property price is what we want or a data source we don't need to worry the prefix is what we're going to use before the actual numeric filter now because I'm working with pounds in the UK I'm gonna put the pound symbol in there but obviously if you're working with a different currency or different numeric values you could put either a prefix and or a suffix suffix just basically means he goes after the numbers prefix prior to the numbers we then got the format now you can set this up however you want and depends upon the kind of values you're dealing with so if you're dealing with massive values then you can set that up in a much more readable format or if you work with smaller values again in a readable format they're specific to watch it I can do the step then is how big each of the increments on the slider is going to be so I'm gonna set that to 1000 but you could set that 10000 110 whatever you kind of want so that's the basics we've created that so again we're gonna hit Save Changes hit the re-index to make sure it goes through and re indexes and finds that new facet and looks for any data that'll be inside that facet and applicable and then we come over and say copy the shortcode so you've copied that shortcode so there's just a repeating the same thing again I'm going to come back into templates into a theme builder from a theme builder back in and edit with elemental for a property archive and from there we're gonna drop in another shortcode widget so let's just search for that shortcode drag and drop that we're gonna put that above the filter this time and again we're gonna come in I'm gonna right-click and we're gonna paste that in there so there's our new facet again you can see it uses a pretty straightforward format we can apply that if you want to we'll hit update to make sure that that's now being added in and we can now jump over again and test that out to make sure that everything is working the way we expect it to such as preview our page open a new tab and you see there's our slider now we've have quite a big disparity between the prices of these you've got the 800,000 and the 50,000 so if we take that past 50,000 you can see that will immediately drop off that one because it's no longer inside the range value that we want we pull this underneath you'll see we get rid of everything and it says we can't find anything that kind of matches your criteria so we hit reset on there and it pulls everything back so now we've got two of our filters the third and final I'm going to use in this example is the search we need to link that through the search WP to open up more options and give us the ability to search through our custom data as part of advanced custom fields and custom post types now out-of-the-box WordPress does not allow you to search against content that's created as custom post types and or ACF fields we need to have that added in and search WP is a great way of opening up those search result options so we finished this template for the moment let's just close this down exit to our dashboard I'm going to come over and set things up now inside searchwp so again into the settings and choose search WP this time now from there we now have the ability to go through and set up how and what we want to search against now depending upon the type of site that you're creating and the content that you have on there will dictate what kind of things you want to search against now you can see by default it's going to search on the posts and the pages which are your standard content as part of WordPress itself for this example because we're not going to be using those pages and posts for anything at all we're just gonna be using our custom post types we're gonna get rid of those so what I do is I'm gonna click I'm just gonna say exclude and it's sending in four pages when exclude that will say add post type and a click on there and you can see this gives us all the options to the post types we can use you can see there's quite a few things that are automatically excluded and we're gonna leave those as they are all we want to do is come in and say properties so this just means that we're only going to be able to search against properties as part of the content if we expand that from there you can see we now have ability to go through and specify weight multipliers in other words what are we going to consider to be the most important aspects to search against from our custom post type now by default you can see it pulls in things like titles content the slug but we can if you want to add in additional attributes so we click on add attribute you can see we can choose from taxonomy x' and or custom fields so for this example let's just say we're going to search against a taxonomy we can click on there it says what taxonomy do you want to search against it's going to click to open that up and you can see there's our custom taxonomy of property types so we can add that in there and we can specify the weight for that so we can say how important is this going to be when you're searching against things so we can easily come in and adjust this so we say we want the title to be pretty important when I set that to about 90 so that gives that quite a lot of weight the content well I still need to be important we're gonna set that up to a 35 the slug not really important and the slug is just basically the nice friendly URL for that particular page so there could be a useful keyword or something in there go search against but again like I say it's one those things it comes down to how important you feel it is now you can't like I say come through and keep on adding custom fields add in taxonomy to anything that's available to you as part of this custom post type underneath the property section until you've got all the data that you want to be able to search against all listed inside there now if we take a look on the right-hand side you can see we've got the indexed progress and we've got the last activity which tells us what indexed what's an indexed and a main row count so we're gonna save this search engine once you've done that now you can see it tells it that's been saved it's gonna ultimately go through an index our content so it's telling us the last activity is right now it's indexed two entries because we have two properties listed and remember we're only looking at the property section not posts or pages tells us then that unindexed is nothing that's been an indexed and we've got main row count of a hundred and fifteen rows so we've done what we need to do inside this that's the first key part of this done now that's not all we can do when we want to configure this to make sure it searches and finds what we want people to find we also have things like exclude IDs we can add limits or exclude rules to various different things so if we want to we could say exclude by taxonomy and we can click on there and it says choose your taxonomy we've only got the one currently so you can see we open that up it says exclude property types so we could have we wanted to come in and start searching for things so if we said tavern bungalow you can see that would now exclude that property type so we could set this up to only include various different kinds of property types again we've got range of things so if we wanted to e goes to say limit by taxonomy as opposed to exclude by taxonomy so there's a lot of options inside here to get this ticket go through and just basically find exactly what you want the end-user to find we've also got more options if we generate the Advanced section you can see we can say search term handling we've got stop words and we've got synonyms so in other words words we should nor we stopped things and they're words very common words like again about above and so on so we can if we want to add more in here or we can take things away we've also got synonyms so you can see we can add our own synonyms if you want to so in other words sitting there like a replacement of search terms so if you want to find out more information about how to use that you can do that from there so that gives us a lot of options we also have actions and settings on the right-hand side so you can see we've got things like debugging enable so if you run in this and you're finding you're having a problem then you can put debugging on there and you can find out debugging information however there's kind of things that I want to set up in here we want to have automatic did you mean correction that's quite useful so say you search with no results and ultimately output results for the closest index match and a note will be enabled in the loop again if you want to find out more about that you can do that will say highlight the terms in results and finally say remove all data on uninstall so in other words if we want to remove this plug-in for any reason because we're testing it out it isn't do what we want by removing it all of the data that's associated this plug-in will also be stripped out which means we don't end up with a pile of fluff left in the database that can cause things to slow down now this is something that all plugins really need to have then we got the engine configuration transfer if we'd set things up in a previous website and we wanted to transfer that over we could import and or export the data from here so that's quite useful so once we're done with that we've pretty much set everything apps we'll say save if we've done any changes on they come back all the settings and we've got which everything is done so we'll save that just to double-check to make sure that everything is in place and we've now set up our search we no need to go ahead and add that as part of facet WP so how do we do that we'll take a look at that next let's just hop back over into facet WP to even come in today what I'm going to do is we're going to make sure that we've got everything set up the way we want it to be so I'm going to set up our first search I'm going to add a new facet from there we're gonna call this search but I want to just use an abbreviation because I don't want to cause any potential problems if the term search is used somewhere else facet type we're gonna change that from checkboxes and we're going to find the option for search it's going to click on that as the search engine is the WordPress default in other words it's only going to use the normal WordPress search options which means that it won't find data from our ACF fields so we need to do is going to change that because we have search WP installed now click on search no repeat now it's going to use that data from that search which allows us to go through and search using all the settings we've just configured placeholder text in other words what do you want to put into the search box itself I'm going to use something like find your happy place which is kind of akin to what you'd be doing if you're looking for new house and we're gonna say we want auto auto refresh so it'll automatically refresh any update so all right refresh the results while typing so it can be quite useful to update those results as it goes along save the changes once that's finished saving we're gonna hit re index and let that run through and just re index the content on our site and we're also going to do the copy shortcode it was a copy shortcode jump back into our template section in into theme builder into a property archive and open that up with Elementor and we're just gonna put in another shortcode widget just a search for that we'll just drop that at the top this time and right click paste and there's our search hit apply once that's finished hit update and we should now find that our search is all set up so as we did before let's come through and just preview this page and we should find now there's our search option so if we click in there and we'll just start typing stack we see that now filters it out show the results for stacks you can see we've got stack apartments so pretty cool and again like I say if we type something in and we've got more results we'll have options then for the slider for the values and also for these filters underneath you can see it's already gone through and filtered this down now to show only flats but if we had multiple different results that all started with stack for example then we'd have these filters available so we could then sub filter it down even further to get exactly what we want for the results of all the properties inside our database so what are the other questions that came up in the original video and also in the business listings video was how do you go about allowing an end-user someone who's not an admin or sort of content user inside your website to add in a listing of their own well in this section I gotta show you how we can do that again we are going to be using a commercial plugin I know you've shown you the basics of how you can do this if you want to add in extra functionality things like and making people pay you for adding listings and so on and manage their own listings this plugin can do it but we're not going to cover that in this particular tutorial that's something I'll take a look at in its own dedicated tutorial if you let's see more about that specific functionality if you would let me know in the comment section below I'll take a look at creating content specifically on that okay so we're going to be using WP use a front-end Pro to do this so we will jump back over to the dashboard we've got it installed we go to the process of adding that in and linking it through to our data so let's take a look at doing that now so we're now ready to start building that first form to allow us to submit actual content through our website we need to do come on the user front-end we set up a couple of settings first of all it's gonna go to the settings section and you can see we've got a lot of different tabs most important thing we need to do is start off with it set the ACF compatibility we need to set that to be yes otherwise we can't link this through to our advanced custom fields obviously there's a lot of other settings inside here as well which I would recommend that if you are going to use this plug-in that you take your time to go through and have a check to see all the things are set up the way that you want we're gonna hit save changes on there now for this example I'm not going to go to the process of setting things that where people can pay to have their listings and so on that's something that if you interested let me know I'll take a look at doing a dedicated video just to work in with user front-end Pro and we'll see how we can set things up on there for this example today we're just going to be and letting the end user add in their own entries and then have that confirmed before they'll actually be listed on the website itself so these are the general options I guess a take attempt to go through I would recommend using a recapture on there just to make sure that you don't end up with a lot of spam form submissions especially if your form is open to anybody ultimately the best way of doing this is to have a secure area that someone has to log into before they can start adding content in but like I say if you used to working with WordPress then I'm sure you can set that side of things up and make this a section that needs to be logged into okay so let's just take a check through so front-end posting you can see edit page we're not gonna worry about allowing edits and so on custom fields in post well we're gonna set everything and leave pretty much everything as it is for now we might come back and make a few changes to this later we'll just save settings just to make sure everything is in place and now we take a look on the left-hand side you can see the first option is post forms we're going to select that and this is where we can start creating our form to allow for submission so we go say add new form we don't want to work with any of these other ones cuz they're going to have some free filled out information however if you were just working with a normal post type as part of WordPress or WooCommerce or you know anything like that then you could use these as a starting point we're gonna say create a form from scratch once you've done that this takes us in now to the form editor before we start adding anything into this I just want to make sure we join with the settings and configure everything the way we needed to so what the settings tab and you can see the first option is post type by default this is set to be post now obviously we want to allow the end user to be able to submit property listings so we need to change that over and choose property from our options so choose property that now means that we're related to the right post type the custom post that we've created and you have a settings inside your post date as we don't want this to be published we want to make sure that it is confirmed before by the administrator of the site so we're gonna do is we're gonna put this into pending review post format we don't need to worry about that you can see there's nothing listed in it because our custom post type doesn't have any post formats associated with it default post category we're gonna leave that as is we can set a redirect up inside here so you can see we can redirect it to the newly created post so this will take it over to our custom post type template and show the end use of what they're listing would look like but obviously it isn't available to everybody if you don't want to do that you can say it'll just redirect it back to the same page to a certain page or to a custom URL so you may want to sort of set things up so it says thank you very much for your submission we'll take a look at it and confirm it bla bla bla then you can set up to a custom URL or to a specific page up to you how you want to work with that you can see it comment status we're gonna set that to be close we don't want comments associated with this particular listing I'm gonna change submit to submit new listing post draft we're gonna label enable saving as a draft so you may want the end user to be able to save their content as a draft before they submit it that's entirely up to you I'm not gonna worry about that then we're gonna form template well we're not gonna use that like I said we're creating this scratch do you want to use conditional logic on the submit button so if you wanted to you could enable this and you could setup them condition or conditions before that submit button will actually be visible this is a good way of making sure that any relevant data is filled out and you don't end up with blank or not completed form submit in this is something that's specific to the pro version so if you're using the free version then you can't have access to the conditional logic you also don't have sort of access to the ACF taxonomy fields that you may create as cut part of the custom post type you don't have that option for taxonomy as part of the form so it's worth bearing in mind if you are trying to use the free version there are some limitations that may restrict what you could do so we've set that to be no if you wanted to you could enable multi-step so if you have much more complex forms that you want to submit it might make sense to break those up into smaller pieces if we commit the EDD in settings then you can see that if you wanted to if you allowed editing this is where you could control exactly what's going on submission restrictions so you can say do we want to enable guest posts so you're an unregistered user for this example I don't say yes I do but this is something that I'm just using this as a demonstration site obviously if you're doing this on a live site you wouldn't realistically want to do that what you can do though is you can see it says requires name and email address before they could submit a post so that data has to be prefilled out we leave that as it is so we need to make sure that is all completed if you want to you can require email verification for guess this is a good way of restricting getting tons and tons of junk email through it has to be the email is verified before they can submit anything and I say this of other options on there if you enable payment options so you want them to pay to actually insert a listing you could enable that at this point and go through and configure that side of things then you have things like display settings how do you want your phone to display do you want to set up the label positions do you want this to be above left right hidden and so on so we're gonna say we want those above the element and you want to use the theme CSS so if you want your theme styling to override any other kind of styling then it's worthwhile said not to yes alternatively you could just pick from one predefined styles finally you've got the post expiration do you want to enable post expiration if you do and you can enable that and configure it as required and the final tab is the notification tab and this is where you can set up notifications enable and disable those four new posts or for updates and so on students specify who the email is sent through to so the admin for example of the website the subject and the content itself so you can set things up in here and you can see you've also got a range of different short codes that you can use to personalize and fill out the details from any of the form submitted or any of the users submitting content so let's hop back over to the form editor section and from there we can now start building our form so what you have is first of all at the top you've got the name of the form so currently it's set to sample form which doesn't really mean anything so we're gonna click on there and we're just gonna call this submit property form just so it makes a little more sense we'll check that off so we now have a name for this we got on the right-hand side now are all the different post fields we can use to pull data in now because we've set this up to use a specific post type and this in this example is the properties you can see it pulls in the taxonomy x' so let me just show you if this was set to post as opposed to being the correct format which is property if we come back over to the form editor you now see that the taxonomy czar the normal default taxonomy which is the category and the tags there's part of normal post inside WordPress so just make sure that if you don't see the taxonomy that you need inside here you need to come up the settings into the post settings and make sure that the post type is set to your custom post type that you using to submit this form to so we'll put that back to property jump out go to the form editor our taxonomy is now back in place so now we can do is we can build the form up so at the top you can see we've got post fields and these the default kind of post fields so the title the content and excerpt and the featured image these are default as part of the custom posts that we created so we can do we can just me drag in the post title we can drag in the post content and we can drag in the featured image that pulls in all the data and now we can do is we can click on any of these and open up the field options so from here we can edit all the things that we have available for any of these form elements so currently post title isn't really the right thing so we're gonna do is we're going to change that I'm gonna call this property name we're gonna set that to be required I'm gonna jump the advanced options and if we want to we can put placeholder text in there so if we didn't want to display this name we just wanted to have each of these fields having some placeholder text we could do that and I don't give us a nice streamlined form up to you how you want to set things up you also have a default value any word restrictions the size of the field itself and the field size in other words the dimensions of the field you can see we can set those up in any way that we want we've also apply CSS class name so if we wanted the target any of these field elements and style them independent of our theme or this particular plug-in we could do that by drop it in a CSS class name we've also then got the visibility option so this is who can see these elements of the form everybody so it doesn't matter if you're logged in logged out a guest anything at all you'll see that you set this to hidden logged in users only so if you're not logged in you won't see this specific form element or subscription users only so if you're applying a subscription model to this plug-in and making people pay you can then link this through to that so only subscribers will see this now with the paid for version we also have conditional logic so we can't we want to enable conditional logic specify where and when this form is going to be displayed we don't set that to no we're gonna leave it to everybody because we want everyone to see it because like I say I'm not gonna go through the time and effort of setting up a registration option all those kinds of things to restrict who can see this kind of form I just want you to see how this form works and if you want to get in there and restart to customize this and take it to another level you can do that kind of thing so that's the first one we'll click on the next field so we can come back at this Warfield's click on the next field click on edit and you see now we've got post content so we're going to change that to property details set as we required into the Advanced Options and you can see we can configure the rows columns default value the type of text area that we want to use so currently we've got this set as a rich Styria if we wanted to restrict some of those options we could say a teeny rich text area so we now get less options or if you just want to keep it plain and simple you could just set that to normal it's just a normal input box with no formatting options whatsoever in this example the teeny rich area makes more sense because we can let people do things like bulleted lists bold and so on inside the description of their property if we want to we can enable image upload inside this post area for our example we're not going to but if you enable that it would work pretty much exactly the same way you expect inside the normal post area inside WordPress itself you can restrict the number of words again you can set this field size you can set CSS classes the visibility conditional logic so all those things are pretty much the same no matter what kind of field that you choose a third and final option we currently have is the featured image we're going to click on that featured image is perfectly fine yes we want that to be required and on the Advanced Options we can now set things like the maximum file size that they can upload and again we've got the CSS classes and so on so there's the basics of our form all set up now that we've got the standard WordPress fields set up inside our form the next thing we need to do is go through add the extra fields in and the taxonomy and so on and then link them through to the ACF fields so how do we go about doing that it's not as complicated as it might first appear I'm gonna do is gonna say add fields now before we go any further let's just jump back over into our ACF field group so we can take a look at what we have now there are a couple of limitations with this plugin there are certain field types that we can't link through to so we can't do things like the relationship this is something that would need to be set up manually or you'd have a different way of inserting this into the forms being submitted so the end user then the moderator of the site can go to the process of configuring that correctly so just bear that in mind that this is a good option but depending upon the types of things you create there are some limitations to it now with that being said if anybody is watching this video has found another plugin that is the same kind of thing like this but also works with map fields your google map fields work of the relationships repeat the fields and so on and allow that as part of the form submission please let me know in the comment section below so I can take a look at that plugin I'd like to see options that are available that does the same as this but also expands upon what it can do but that being said let's move on so the important thing is that we've got access to these meta field names we're gonna need those in a moment come back go to a post forum so the first thing to do is we're going to put in the property price so coming back over there that's set up as a numeric field so we're gonna grab that field type and drop that over on to this section come in and edit that so as you can see now we've got the field label which just says numeric fields we're gonna change that now to add irrelevant field name which is going to be property price I'll put the pound sign after that so people know that we're dealing with pounds property price you can see is almost correct so we gonna give her that little slash at the end of it property price so this is the meta key you want to double check come back over the issue property price making sure that's all correct that's all good so is it required yes it is Advanced Options do we want to put steps in there placeholder minimum value and so on so it's up to you how you want to configure this but obviously make sure you configure it the thing we do want to do though is where it says show data in post we want to set that to be no and all of your ACF feels you want to set that up to be no otherwise it just looks a little bit rubbish when you see the data's being submitted kind of double submits data so it's not what you want so all of your ACF fields set those to show data and post to be no ok so that's the first one so we're going to go through another process of adding the rest of those fields in so the next one we have is the property address so we're going to come over choose the text for this so you just drive text in drop under the price I will do is we'll just insert edit that let's change that to property address as you can see it thinks the right meta field is going to be the same only all underscore with all lowercase with an underscore between the spaces again just check make sure that's alright if it's wrong then replace it with the right value otherwise it won't link through correctly so address yes we need to make sure that's required and again any options you want to set up inside there you can set that up the only thing you have to do like I say is we says show date in post set that to know so I'm gonna do is I'm going to through any of the other normal fields inside you and then we'll come back and take a look at how we deal with attacks on amis and so on now the next field type that we have to put in is a little different we've got a check box set for property features so let's go and do that now now come back with our post form take a look at the custom fields option we're going to come down we're going to choose check box now drag and drop that over into position and you can see what that does is if we open up the options is it gives the ability to go through and add in the various different options that we want to allow the end-users to select now this is something that it would be nice to have this that will automatically populate from the list of details inside your ACF field unfortunately that isn't the case so like I say there are some limitations with this it's not perfect but for most use cases it should be perfectly adequate I'm going to do is change the name of this now to property features making sure that we've got that spelled correctly otherwise we're gonna have a little bit of a problem so there we go property features you can see it says show values as an option if we click on that you can see we can have the label and the value you know setting of the options there's a couple of things we need to be careful of because we need the label the value to match up inside this even though we didn't actually use a value as part of setting this up if you cast your mind back to the beginning we need to put both of these in there we need to make sure this spelled correctly now to double check this it's always worthwhile coming over to your field groups and there's a list of our choices so what we're gonna do is we're gonna make sure that everything matches up so I hide that a second so for the first option which is air conditioning if I show my values you can see it pre fills that out but does the same as it does with the matter field which is put a underscore conditioning so if you were using this way you use in both the value and you use it the label together then you can make sure both are the same however because we're only using the label we have to make sure that everything lines up so what I mean is that the value and the label are identical so you can see we've got air conditioning capital a capital C no space in between we now need to repeat that for all of the different sections inside this particular form so I'm going to do that I'll come back once I've inserted all those okay it's this all our values added we're to come down you can set this to require but in all honesty some properties may have none of these options so I would recommend for this example not setting that to be required now if it were the Advanced Options we can come in and configure a few bits and pieces so first of all it says show in inline list so currently we have this going down if we wanted to we can just set that to be inline just clears that makes it a little bit more sort of less space being taken up for this kind of thing remember showed Adrian post said to no hide field labeled in post well we can leave that as is so everything else on there now is all done and dusted let's hop back over now to our field groups now as I said we can't pull in the map data at this point this is something that doesn't work with this particular plugin but because we've got the address it's just the case of any administrator when something is added they can simply copy and paste that over from the address field into the map field and you should be much pretty much all set it's not ideal and like I say if anyone's got a great workaround for this please let me know okay so the next option is going to be the property gallery so we're gonna do is gonna come back over out of this come back to our fields and we're gonna find the option for image upload drag and drop that over into our area below now at the moment says it's select image you may be thinking you can only upload a single image well you're not restricted to that you can open up more if we edit this we're going to name this first of all so we're gonna call this property gallery so we've got the right name in there and again meta field is all correct required we're going to leave that set as no select image we're gonna put in brackets images and our advanced options we can set up a few things so first of all we could set the maximum file size so this is enter the maximum upload size limit in kilobytes now this says maximum file size of bear in mind this is a combination of all the images that can be uploaded as part of your gallery so I would recommend setting a decent value in there something that allows the end user to upload however many images you want to set say let's just say for example five images as a maximum you need to give them some space to be able to upload a decent amount so set that's all whatever value you think is going to be right for you we're going to set this to 2000 and the 48 which is two megabytes that'll do for this example maximum file size is we're gonna set that to be six and we're just gonna say no to show the field date or the data in the post okay so we've got the gallery option inside there so we come back over now into our field groups you can see we've got everything that we can actually set up configured and set up so the price property address features property gallery probably agent we can't because it's relationship field so with all those things in place that's the form set up and configured now obviously your form is going to have a lot more data involved in it because a property is gonna have lots more than what we got in this example so you just repeat this same process over and over again to make sure you've got everything laid out all of the data link through in exactly the same fashion so so we need to do so providing everything is in place now with hit save form that now saves the form and allows us to now start to use that embed that into whatever page you want to use and so on so now we put all these different custom fields in there's one more thing we need to do and that's put the taxonomy in and as you can see we've got a section on the right hand side called taxonomy for property type and we're sitting a drag and drop that way we're going to go so we're gonna come over and we're gonna say this is going to sit in between the featured image and the property price Drive that drop that into place are you see that just pulls everything in correctly for us so as edit that we're going to do is we're going to change this just so it looks a little bit nicer so we put property get for that underscore put a space in and type and there we go any Advanced Options we want we can set those up inside here but we're gonna leave it as is I'm going to say it is required and we're just gonna hit save for those eagle-eyed among you may be thinking well you created a select form but normally select forms when you like to select a single item and you would be right so how can we deal with that where a property could be in multiple different sections where we've got this hierarchy for example well we can do that all we need to do is count the Advanced Options I come down and where it says select we will choose that and you can see we've got select which is all we currently have multi select check box text input or Ajax so we could if you wanted to use check box or we can just send set that to be inline and you can see that puts it like so all we can use it to be not inline and shows us in that hierarchical fashion so this is a nice way of able to use that check box it's entirely up to you you want to set this up so you can if you want to use multi select which will give you that option then so you can just hold the control key down and select multiple different options or the check box option or you can you text input if you wanted to but that requires a level of understanding of what you have to type in so I would say the check box is the best option we can use on there we're going to set that to notice not show in line so it keeps the hierarchy of everything we're dealing with but you can set this up however you want to so with that in place I can resave my form knowing that we've got all that set up and now we're ready to move on and create the page that's going to hold this form and we can let the end-user then start to submit data so let's take a look at doing that next so let's go ahead now and create our new page go to the pages section and click on add new from there I'm gonna call this submit new property what's your than that we're gonna just say add form now obviously you could use Elementor if you wanted to no real reason why you couldn't I would recommend doing that just make sure everything fits in nice and neat to your design but for ease and just something to say add a forum post form is what we want submit property form is correct and insert form and there's our little shortcode like I say obviously you could tidy things up use this shortcode inside Elementor do whatever you want to make this look nice and neat tidy well I'll come back I'll edit that later you don't need to see that so okay let's hit publish now we're gonna do now is we're gonna take a look at that form in action so we're just gonna say let's view this come over and there's our form so you can see there's our property types everything is set up probably name details featured image all those kinds of good things are all set up so what I do I'll go through I'm gonna add some content into one of these submit it and then I'll show you on the dashboard how this actually all works so I'm gonna do that and I come back in a moment go ahead and filled out all the relevant data that we can associate with this property so as you can see the name the property details the featured image the property types price and so on there is our images from our image gallery which we can reorder if we want to so now at the point where we could submit this listing and then take a look at what happens once we submit it so because we've set this at the upon submission it takes you through and previews the post the new entry you can see that's exactly what's happened it's taken us over now into our new entry it showing us the template that we've set up for our archive for our properties and all the details are in place the name the address the price that data was added the image description now there is one little quirk if we care to the property features you'll see this three check boxes but no values being passed over and don't worry about this because when we take a look at the dashboard you'll see that those data values are actually in there for some reason when we get this preview it doesn't show that up correctly so with that thing in place we're gonna do is I'm going to jump over and take a look at the actual dashboard and see what's going on there so let's take a quick look now in the dashboard go to properties and say all properties and you can see there's our new entry timely house you can see is set as pending so it's not actually going to be listed the property types are all set up correctly and if you come in and take a look at the actual property itself we can see all the data is inside here so the property type is all set up the details the address all those relevant check boxes are checked so you can see the property features are included but for some reason it just doesn't show them on the preview and obviously if you're not doing a preview straight after actually inserting or uploading something you're just going to go through to a thank-you page that's not going to be an issue so what we need to do now as you can see is that it didn't take over the address so we just need to simply grab this drop that into that section they will say yep that's fine this rima too much for such as a partial address which is a sample address we could use it and find if we come down we can just load in the actual property agent so Betty will be the one that's working with this so even though there's a little bit of housekeeping because it's not going to take over all the details it does most of what we needed to do if we jump on the gallery tab you can see there's the images that are associated with this take either post and everything else is all in place so providing that you're happy with the data that's been submitted as part of this form you can simply go ahead click on publish and now that will be a fully fledged listing as part of your website so you come back out now and we say all properties will see it's no longer pending it's asking part of the site so we've now got that all set up well before we move on to the next stage I just quickly wanted to say that if you enjoy in this video and you'd like to be captive today with all the new content that we add on wptouch please consider hitting our subscribe button below smashing the bell icon to be notified every time new content is added the channel if you like to get our weekly newsletter and be automatically entered into our giveaway every single month use the subscribe link in the description below head over they once you finish watching this video put your name your email address in and you ultimately be added in to that list well let's move on to the next stage in this tutorial so got a few more things I want to show you before we complete this video tutorial got a little bit of housekeeping to do if we take a look I've gone ahead and added in a simple navigation section things up so we've got our hierarchy of flats and houses and then underneath those we have various different subsections I've created a menu structure that displays exactly that however what happens is if we go and choose one of these for example apartments what'll happen is it takes us through to the default plan layer template that doesn't really display things the way that we want so how do we deal with that there's a couple of things we could do we could create a dedicated template that would only show those particular property types and that's one way of doing it or we could do it a slightly different way come back at the dashboard I'm going to come to a template section and then back into our theme builder once we're inside there our default property archive mesopore not up ended up with Elementor and currently the set up to only be used in one location throughout our entire site so we come down to the conditions I'm going to click this little arrow next to the update option and say display conditions currently that's only being used for the property archive we could if we wanted to use that template in other locations so let's say add a second condition and from there we're going to click to open up all the conditions that are available we're in scroll down because we're dealing with the property archive and order to do with the properties that's what we want to look for what we can do so you can see currently we've great setup for the property archive but we can also set it for property types so we click on that and just say save and close now at the moment is set to all so that's going to do any of the property type so flats bungalows houses all those kinds of things hit save and close we don't need to update this because with updates in the condition and it automatically updates it will we say save and close anyway now if we come back to our apartments instead of this bland boring layout if we refresh what we find now is we get that template layout that we've said that for our archive so let's just take a look if we cover the bungalows which I know we have none listed I can click as you can see it tells us it seems we can't find what you're looking for and the search option is available now because I mean the search option is available because there's nothing to filter based upon price and anything else so that's the way we see in that however if we come to something that we know this for example a tile house click on it and you see that now pulls up the townhouse bring back those filters so if you want to filter things down we can do now obviously at the moment we still have some styling things we need to do for this section with our facets well-known aware with that in this tutorial I could say that's up to you to deal with afterwards but what we can do now is we can leave it in this way and as we have more properties and start to flesh this kind of website that these different sections will then start to populate with information and become a lot more usable currently we only have a handful of properties for demonstration purposes but let's just say we had a hundred or so on there within these different sections then we have a much different scenario we're just building the infrastructure to take care of that when data is added so that's the easiest way of doing this like I say if you wanted to you could create a section that doesn't have the filters and just has this basic layout all you need to do is create another archive template name it accordingly and then just apply the condition to only show this with the archives like we just done to sort of show it with everything we'd simply come in under the display conditions and we just say property types all hope that makes sense to you so that's the first bit of housekeeping the next thing is we don't really have a home we go back you can see we just get the default hello world page so let's rectify that let's make a home page that's actually quite useful now there's a couple of things I want to do to expand upon this and these things that are entirely up to you if you want to do them and there's lots of ways once you realize what you can do to build a structure organize and categorize data throughout your entire site so let's just take a look at how I'm gonna do one simple thing we're gonna create both featured and recently reduced options let me show you hanger to them now I really do like taxonomy when it comes to WordPress especially when you use those with custom post types it really allows you to categorize and group things together and get really creative on how you work so we're gonna take that one step further come into custom post type UI and add edit taxonomy but from there we're gonna create a new taxonomy we're just gonna call this special it doesn't matter what you'll call this it's entirely up to you because you can set this up in any way you want so we would call this special I'm going to the same underneath we're tie this through them to the properties I'm gonna scroll down leave all these labels as they are not important to us couple of things we want to do though is set up how the settings for this actually work we're set to hierarchical so say true now one thing I would suggest you take a note of is that when you set things to hierarchical you don't actually have to create a hierarchy one of the major benefits of just setting it hierarchical is it means that it pulls up and gives you check boxes as opposed to you having to type anything in some reusability point of view hierarchical is just easier to work with next up we're going to scroll down a little bit and what we want to do is specify this is going to be shown in the admin column so we set that to true what's gonna set the show in quick bulk edit panel to be true as well another taxonomy once you've done that we're now gonna cut to the property section you can see we now have special inside there and open that up I'm from there we're gonna create two new taxonomy x' we're gonna call this featured have that I'm gonna call the next one recently reduced now you can add in as many of these as you want we're just using these to group things together okay so let's just jump over now to our properties and from there we're gonna just update some of the features so apartment of dual we're gonna quick edit that and you can see now we've got special so we're gonna set this to be featured will update that one will do the same then for homely house so we'll quick edit that and we'll say that's featured and finally we're going to come to Townley house quick edit that one and we see that's recently reduced so what we've done is we've applied those taxonomy x' to a couple of different properties well now we can use that and we create our home page so speaking of our home page let's come in and just say all pages are from there we're gonna add a new page in so we say add new gonna call this home page let's start to make the home page a little bit useful let's publish that edit it with elemental quickly just get rid of this title okay so what we'll do now is we're gonna create a home page that has some content on this quite useful before we take a look at those featured and recently reduced we're gonna drop it at the top a map that shows all of the locations for any of the properties we have that becomes clickable and we can just jump straight through to that property direct from the map then we'll take a look at doing the featured and finally we'll take a look at the recently reduced you can obviously create this in any way you want this is just an example of some of the features you could add into your home page okay so first things first let's create a new section at the top let's select that we'll set that to be full width we don't want any column gaps on this you say no gaps then it kind of search for our widgets and we're just gonna put in maps and what we're looking for is this dynamic content for element or ACF Google Maps so you can tell it's the dynamic content for elemental you can see the little red D logo in the top right hand corner so to grab that drop that onto our page and you will see that pulls in a blank map now it's blank because we have to do a couple of things you go tell it where we want to pull the data from and what post type we want to pull the data from so first of all we got data type you can see it defaults to a CF map field but we do have options for address or latitude and longitude because you want to put in dynamic data we're gonna leave that set to a CF map field and then the ACF map we're gonna click and drop that down and currently we only have one map field associated with any of our custom fields so we can choose that obviously if you had more than one name them accordingly makes sense and then you can choose them from them again now you can see all that happens is we get a little pin that drops in the middle of it and nothing more so we've told it what we want to do we no need to tell it where to pull the data from so we ignore all these options and come down to the post type query at the bottom click on there you can see we've got the option to say use query select that and we now have three different query types we can pull in from we've got custom post type we've got a CF relationship and we've got from a specific post we're going to use custom post type we're going to change this from post type of posts and we're going to come down and choose properties because that's where our map details are located now click on that and then you can see it immediately opens a map up and starts to drop pins into the various different locations now at the moment it's a little bit on the small side so we're gonna do is going to come back up to this and we're going to make it a little bigger so we're set this to something like 600 pixels there we go next thing you can see is a red marker is where there's an individual property this little blue symbol is gonna denote the fact there's more than one property or more than one entry in that location as you zoom into that you'll see that things will become broken down into you're close enough to break things down will show you all the pins in that location so that's already pretty cool problem is we need to make sure that when we click on any of these entries it takes us through and views the property so what we can do is we can come over to the info window and you can see we've got some options but once we enable the link to post all these will disappear so going to click on that now that makes each one is individual little pins when we move into sort of what these clusters we can click on them and go directly to the post itself and show the details for that particular property now you can if you want to come into the Styles option and currently is set to Road map you can change that to any of the four options that are default with Google Maps you also come into the Style section and you can choose to a custom option where you can go to the snazzy Styles comm website configure things to where you want or you can use one of the predefined snazzy styles once you do that we can just choose one of the styles we want I'm going to go this light gray and you can see that now makes it a little bit more ever where the different locations are and kind of sits in a little better with our particular page now if you wondering how this all works there's a couple of things you're going to need to do you're going to need to have a Google Maps API this is something you have to have a credit card associated with and I'm not gonna be the detail with this because if you are going to start working with Google Maps API there's a lot of information out there and I've done a dedicated tutorial on how to work with this particular plugin in more detail I will link that in the description below so if you want to find out more about this it is own dedicated tutorial you can do that what you need to do is have two things you need to have the Google Maps API which you've already done to work inside the ACF area of our custom post time because I'd allows us to see the map inside there and also when you use in this particular plugin the dynamic content for Elementor in the settings you need to drop in your API for you google maps inside there as well just good the settings so ordinary pulls up whenever you install and activate this plugin drop in your API and you are then good to go so with that in place we've got everything set up I can commit the controls I can enable or disable anything I do or don't want on there so you can see the marker cluster I can disable that if I want to and you can see we now get a little group there of various different pins I think the clustering looks better because if you did it with properties and you zoomed out on your map you may have a lot of properties in one given area and I think a lot of pins in there will start to get a little unwieldy full screen control well we can disable that if you want and you see once you do that the little symbol on the top right-hand corner disappears same goes with things like the street view control scale control rotate control pound control and so on so we can just enable or disable any of the features that we want or don't want in this particular map setup once you've done that we can save that if we want to is all good to go but we want to go on and start to create a couple more steps got more entries into this home page to make it even more useful so let's come in and add another section now underneath this we're going to click to add drop in a new section and make a little bit of space above and below so we'll just set 50 pixels of Verve 50 pixels below to give us some breathing space on there next up we're just gonna drop in a heading that tells it what exactly is going on with this particular section I will say properties will duplicate that and underneath we'll just set this as recently reduced properties capitalized that we worry about styling those a little later come back out now I'm gonna come over and we're gonna grab the posts option and drop that underneath our featured properties section to start off with now you've seen this before we did this with the archive page we're going to do pretty much the same thing gonna change the skin to our custom option and from the new option underneath we're gonna say in default property loop you can see that now we'll pull in the styling however obviously as you can see it's pulling in the wrong data so we will come down to query from they're going to change that from posts to properties and you can see that now pulls in well pretty much all the properties we have listed which isn't what we want we do want to do though is include by so we're going to set a filter up inside here to only include the ones that match a certain criteria if we click we've got two options term and author we're going to choose term and then we open up another option D that says what is the term your search inform now this is features we will start typing in featured and you see that now searches through says special featured special be in the taxonomy that we've created featured be in the actual taxonomy entry so going to click on that and you see that now we're pull in just the ones that we marked up is featured so now we can go through who want to adjust a layer to make sure we got everything laid out the way we like it to be so we wanted two or three or one however we want to set that out the maximum number of posts we're gonna set that to be two as well so we're going to show the two featured posts do the same thing again I'm going to duplicate this it's going to duplicate that we'll drop that down to the reduced section underneath if we can get that to go down there actually let's just move that up there we go so we're gonna click on this I'm gonna come down to our query we're going to change our query to a change from special we'll just type in reduced and you see it now says special recently reduced to click on that and that will now show us the recently reduced items so anything this we marked as recently reduced will now be listed under this section so see what I can do now is I can go through and style things out and I could create as many as I wanted on here and again going back to my comments earlier on we have a handful of properties so you're not really seeing this in the best light if you had hundreds of properties you start to see that this all lays out nice and tidy and you could then easily go through configure this to have more or less entries if you wanted to put sliders in there you could do all kinds of really cool things but this just gives you an idea of what you could do just by scratching the surface of some of the things we can do but ultimately just showing you how easy it is to start tapping into taxonomy x' filtering things and creating much more feature-rich websites as well so I know quickly style the entries on here and then I'm going to take you over to the page and show you how this all works so set this up now as our homepage and as you can see our map is at the top our featured properties or recently reduced properties I can click on any of these go through and do the details for that specific property or I can come back out I can zoom into the map I can come into Cardiff for example find the properties that I want inside they click on one and that'll take me through the end to the property and I can go through the details if I like the look of it I can inquire what the property by contacting the agent so you can see the home page already becomes a lot more useful that map with the multiple pins featured properties using the taxonomy all those kinds of things aren't pretty cool so we're almost at the end of this deep dive video but there's one more thing I want to show you and this is using a free plugin we're gonna be using admin columns there's a pro version available which opens up a ton of extra functionality and if there's something you want to tap into it's definitely worth checking out links in the description below so take a look what we're going to be using the free version because we can use that in conjunction with advanced custom fields and just make our listings on the dashboard just a little bit more intuitive doing things like adding the categories or taxonomy is that they're listed in applying the featured image a whole range of different data we can pull all that in and just make finding properties filtering properties and just editing properties considerably easier so let's just jump back into the dashboard now let's go through to the admin column setup and let's start off figuring things to make it just a little bit more usable for yourself or anybody that actually manages and maintains the listings on your website so we take a look at our property section quite uninspiring and not really that health especially when you're looking for properties so how do we go about making it easier well let's take a look at what we can do with admin columns this is the free version like I say so if you want the pro version with a ton more options and it especially if you're running a properties based website I would recommend grabbing yourself a copy that I've got no affiliation I get no money from them it's just a very very powerful useful tool but the free version still gives you a ton of options so let's take a look at what we can do once you've got it installed whenever you come into any of your sections like this your taxonomy is your listings and so on you see a little cog icon this allows you to edit the columns they click on that and that takes us through to admin columns as you can see we currently look at the property section but you can if you want to come in and edit pretty much anything on here but we're going to focus on the properties at the moment we've got title property types date and dynamic content well dynamic content doesn't do anything for us so let's remove that completely probably type is useful the date that it was added is also useful however let's come in and take a look at the add columns now even though we've got ACF installed and you need to have Pro and the ACF add-on to actually really take full advantage of all the options you can do with advanced custom fields we can still do a couple of really useful things so first of all let's put the featured image of the actual property itself in so we'll change this from actions with a scroll down until we find featured image click on that we can set up any parameters we want on there we'll say that I only set that to about well let's set a pixel value so we'll set that to be 80 pixels because the width and the height of the thumbnail is going to be set to 60 pixels this is going to give us a nice little area so we'll drag that to the top so that would be the first item on there I'll close that down so we now got a featured image title of property type and date what else can we do well we could do lots of different things 40 types is perfectly useful we wanted to though we could easily come in and set up some actions so instead of us having to go through and do various things like the quick edit and so on we could set up action calm up inside there we'll say we've got to use icons as well and we'll leave that at the end so let's just update this just make sure that everything is saved out going to do is gonna view that property screen so going to click back on there and look what we've got now something that's a lot more useful already we can see a thumbnail of the apartment itself the name of the apartment the property type the date that it was published the actions we can do so we can do edit we can do a quick edit we can delete we can preview so all these things you can only see when you mouse over just by putting these icons in there makes it a more user-friendly interface now obviously you can if you want to come in and start editing and add in anything you want inside you so let's just say let's add another column in we're going to do is we're going to come down and we're gonna say we want to add in a taxonomy to choose taxonomy and the next thing with this is we can still reference custom taxonomy we don't have to be limited only to those taxonomy is that a part of WordPress itself the core WordPress so property types is being pulled up and as you can see that's perfectly fine however let's just change that to special so we can see what the specials are taxonomy we can change the label if you want to which is just the name of the top of the column and the number of items we can specify how many maximum we want on there so we only got two in there anyway so we can leave that to whatever what we other do though is we're gonna come and say we're going to change property title or the title of this and we're gonna change this to be said there's a bit more useful we're gonna call this property name so it already makes it more sense so we can rename these we can change the labels we can adjust things we can reposition things any way we want so we're going to do is we're gonna grab this special we're gonna put that next to property types and we'll just update this again jump back to our property screen and you can see now we have a much more useful layout they say we've got the property types in there we've got the featured these recently reduced and so on property name is being pulled up the date you've added all our actions so we've just created a much more usable admin dashboard for dealing with properties straight at the box that cost of a single penny well that's how we go about creating a much more complex much more comprehensive and a much more powerful WordPress based website focusing specifically on creating a real estate site and like I say at the top of this video you're not limited to doing this for just a real estate site all the kind of skills the top the plugins the tools the things that we've covered in this video but I opened up a ton of different opportunities so we will create business listings you want to create more bespoke websites car sales websites whole range of different things you now have the tools and the knowledge to really expand your skill set into those areas and ultimately charge more for your work as always all of the applicable links are in the description below and if you'd like to use any of those if their affiliate links cost you know more money but does help support the channel and give us a little bit of support to create more great content like this to help you get more out of WordPress as always I'd love to get your feedback on what we've covered in this video do you find useful anything you think I've missed out or you'd like me to expand upon let me know in the comment section below so I can take a look and ultimately make more content for you as always - impulses been wptouch until next time take care

Channel: WPTuts

Views: 55,864

Keywords: 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, advanced custom fields elementor, advanced custom fields tutorial, advanced custom fields wordpress, wordpress advanced custom fields, wordpress custom fields, elementor pro, elementor pro templates, cpt ui taxonomy category, wptuts

Id: wah4W3XuDzE

Length: 152min 2sec (9122 seconds)

Published: Tue Jan 07 2020