Create a Listing Website WordPress & JetEngine _ Real Estate Website in WordPress Elementor

Welcome to new masterclass tutorial .

This time I'll be taking you through the process of building a real estate listing website using jet engine , jet smart builders , jet search and elemental pro .

Now , even though I'll be using a real estate business as the backdrop for this master class , the most important takeaway and the tools and the skills that I'll be covering once you work through the topics covered , you should be able to take those skills and apply them to pretty much any other type of listing website using WordPress and the tools we've covered .

Now , before we get started , though , there is an important point I do need to raise .

This is not a beginner's tutorial .

I will be assuming a certain level of prior knowledge .

If you're new to the world of dynamic websites , using the tools I'll be covering today , you may want to go over my introduction tutorials to get more comfortable with the technology .

Before diving into this particular masterclass tutorial , I'll drop links to those as well as a lot of other invaluable resources in the description below , so check those out .

OK , let's get started by taking a look at exactly what we'll be building in today's master class .

So here's our key starting point .

This is what you would expect in a typical kind of real estate website .

However , techniques can be transferred to pretty much any kind of website , but what we're gonna be covering today .

First of all , let's work our way from the top down .

First off , we have a full Ajax search .

So we started to in for a apartment , for example .

You can see we now get a really nice looking search .

We can click and we can take a look at that particular property .

Or we can skip through if we have longer lists .

So we have a really nice looking philtre at the top .

Then we have all these options to sub philtre any of our listings out .

So , for example , we can choose between the different types of properties so we can say we're only interested in apartments and you can see that updates in real time .

If we want to change that based upon a location , we can do that inside there as well .

You can see we end up with just one property or we can step back out of that now these are dependent upon each other .

So let me just show you what I'm talking about .

If I choose condominium , you can see Dublin and London .

If I choose an apartment , you can see Dublin and London inside there .

However , if I choose a house , you can see the only option inside there is Cardiff .

So these are taking a look at the information , the properties that are listed inside there and then when we choose the property type , that will sub philtre the property location .

So I'll show you how to set all of that up .

I know that's a really popular thing .

We've also philtre based upon prices and you can see we've got a range of different prices .

But if we say well , 1.5 minutes just a little bit too rich for our pocket right now , let's just philtre these between 257 185 and you can see now we just get those in that particular range .

So we have a lot of different options .

These are stackable .

So you could say you're interested in apartments in that price range and you can see that philtres it down again .

So really cool to see .

We have all these philtres based upon various different criteria inside there .

Now , this particular section inside you is an injected advert for the particular listing or properties .

I'm not going to show you how to do that in this particular video , because I've already covered that in this same template set up .

I'll link to that in the description below , so you can check that out if you want to know how to do that .

But we are going to take a look at how to build these listings .

We're going to take a look at how to build this philtre the Ajax at the top for our search .

We're also going to come in and take a look at a property .

So let's just say we like this relaxing apartment .

If we go in , you can see we now have all the info across the top .

The name .

It's a new build the location .

We can share this through various different social media platforms .

We've got the price .

We've got a gallery of images which we can click and open up .

We can step through those you can see .

We also have information about the property and some key info .

The number of bedrooms , bathrooms and so on .

And I'll show you to do all that .

The description , all the kinds of things you'd expect to see .

If you take a look on the right hand side , we can see this is the agent that's actually selling this property so we can find out some pertinent information , the name of the agent , the telephone number .

We can even send them an email directly saying that we're interested in this property and that property information will be transferred it into the email automatically .

You don't have to do anything .

You can drop your name , your email and so on inside there .

And you can even select the type of inquiry that you're aiming for , whether you're a buyer , a tenant or something along those lines , and then you can send your message and they'll get an email with all the relevant details .

We can also click on the actual agent themselves to see what other properties they may be selling so we can click , and you can see this now gives us a brief buyout over this particular agent .

We can find out if they've got any reviews and ratings , we can find their contact details , the areas they cover , their position inside the agency that they work for .

We can also then see all of the different properties they have listed under their specific account .

If you want to take a look at the agents themselves , we can click on agents , and this will give us an agent listing .

We also take a look at Appliance and Philtres to these agents .

Just haven't done that in this particular demo set up .

We can now find out all the different agents again , the same information we just saw .

But if we want to view their listings , we can click on that , and now we can see that page .

We can find any reviews that are associated with that particular agent and all the properties associated with them .

You can also see that each of these individual listings have some relevant information , the type of property .

So it's a for sale and new build , and so on .

Some information about the name of it photograph the price , and we can also drop in these icons to say , like the number of bedrooms number of bathrooms and so on .

You can set as many of those up as you want inside your design , so I'm gonna show you how to do all of that as well .

So by the time we've worked through everything inside you , you should have a really solid understanding of how to integrate the various different parts of jet engine , jet smart philtres and jet search as well as jet review together to create something truly unique and something that goes way beyond what you can do with just WordPress alone .

Now we've seen what we be building .

Let's briefly look over the tools you'd be using to build it .

All links to everything are listed in the description .

If you want to find out more or grab yourself a licence for any of the tool tools now for what is a pretty comprehensive website , we're not using that many tools elemental and elemental pro , because obviously we're building inside elemental .

We're using the pro version because I want to have access to the theme builder .

Jet engine could be the backbone of all of the data we're going to be working with inside this particular website .

Jet reviews because we want to apply the reviews to the agents .

Obviously , this is an optional step .

You don't need to include something like this Jet Search and Jet Smart philtres because that's how we're gonna do the Ajax search and the whole filtering , which you need on a site like this .

Finally , we're gonna be using for elemental only reason .

I'm using this because it makes the whole process of laying things out in columns so much easier .

But there's so much more you can do with that particular plug in .

So I would recommend checking that out to see the kind of things you can do totally free plug in .

That's what we're going to be using to do all of that sort of like the back end side of things and for the design side of things , we're simply going to be using the hello theme from Elemental because it's basically just a blank theme and allows us to create every thing that we want to from scratch .

Jet Engine recently released a new update that includes a real time saving feature called glossaries .

Now , glossaries are basically a centralised location for repetitive lists of data .

For example , If you want to use a list of property types in your custom post types or your forms , you can now leverage the power of glossaries and only have to input that information once , and then you can reference it in all of the above scenarios now .

Better still , if you need to amend or add to the list of data you can add or edit your glossary items , and that will flow down to everything referencing that particular glossary .

It's a real time saver , so let's start by building out the glossaries we'll be using in today's master class .

To do that , we will simply come to Jet Engine and choose the first entry , which is jet engine , and you should see glossaries listed on the left hand side .

If you don't see that , you're probably gonna need to make sure you've got an updated version of Jet engine installed .

With that being done , let's go into glossaries , and we can now start to go through the process of setting our glossaries up .

So the first thing we're gonna do is add a new glossary and we're just gonna give this a name and this is gonna be the features , and this is just basically a list of features that each individual property may have things like air conditioning , you know , those kinds of things .

So once we've set up the name for this , which is going to be a group of glossary items , we're gonna start by adding a new field in , and each of these field is basically just a list item inside our collection of features .

So for this example , we'll start off with air conditioning and this is the field value .

But then you've got the label , which is what will be shown to the user in the front end .

So the first part of the field value is what's stored in the database .

The second part is the value we're going to see on the front end of the site .

Now these can be the same , or they can be different .

It doesn't really matter , and then you can actually set up how if you want to output this when you create the template and actually output the glossary information .

So if you want to see more about glossaries , I'll put a link in the description to the jet engine A to Z video that I'm gonna be releasing soon via the the Crocker Block website .

So check that out .

If you want to see more about how to use these , the final item is is checked .

In other words , is this item gonna be checked by default in this example ?

We don't want to do that .

We're gonna leave that as it is , So that's all we need to do .

So now I can go through and add in several more for different features that we've got for the property .

I'm not gonna bore you by doing this in front of you .

I'll just quickly do it and then we'll come back and move on .

OK , so there's all the features that I want to add in .

As you can see , it's just repeating the same thing over and over again .

So that's our first glossy set up .

I'm gonna go through and create a couple more glossaries now , and I'll quickly go over those after I've set them all up just to explain what they're there for and why I've created them .

OK , so here's all the glossaries I want to set up .

The property type just basically allows us to use this inside the listing , and it kind of replicates what you'll see as part of the Taxonomies .

Then got the property status , which allows us to specify if it's things like for sale for rent , a new build , an investment property and so on the agent service areas .

In other words , where do the agents actually cover inside their business ?

In other words , the locations that they cover .

And we've got the agent specialities so you can see we've got different things , like property management , real estate development and so on .

And then finally , we have the agent position , which is where things like client managers , senior sales negotiators , those kinds of things .

This just makes the whole process easier and allows us to quickly create very , very rich listings without the need to kind of go in and keep replicating the same data on over and over again .

That's the benefit of using glossaries .

Next on the agenda is setting up the post types for our real estate website to access the post types .

All we need to do is come in a jet engine and choose post types , and we're gonna create our first post type , so we'll say add new , and this is going to be the post type for property .

So we're gonna choose property being the post type name and a slug , which we're going to put in to be properties .

Don't worry about checking this box .

We're gonna leave that as it is .

We're gonna leave the labels as they are .

You can change those if you want to , but we're gonna just fall back to the default options , advanced settings .

We're gonna just make sure everything is configured the way that we want inside here .

So we do want to make sure that this is a public option .

We want to make sure that it's not excluded from a search , so all these options can stay as they are .

We're not going to worry anything inside there making sure that has archive is selected .

Otherwise you won't be able to create the archive as a template file , which is the last thing we want to sort of miss out on .

And we're gonna just specify that this is hierarchical .

The menu position will just drop that in position two and we're gonna do is we're gonna change the icon to have something that's a bit more in keeping .

So we're gonna look for this little house symbol and that kind of makes a lot more sense .

The last thing we kind of need to do in this section is to say that we want this to support the featured image as well .

So by default , it's supporting the title , which will be the name of the property , the editor , which will be the content .

And we're just going to select the option for thumbnail featured image , which will be , as his name suggests , the featured image for this particular property .

Next up , we're going to go in and start creating the meta fields that we want .

So click on create new meta field , and then we can go through and set everything up .

So the first one is going to be the property ID .

Now , this is gonna be this is going to be the unique identifier for each of the properties .

So this is more of an internal thing than anything to do with the database itself .

So property ID , that's perfectly fine .

The field is going to be a normal field .

We need this set as text because it's gonna be a combination of text and numeric information , and that's the first field .

Let's go to our second field , and this is going to be the property status .

So this is going to be grabbing information from one of the glossaries we've just created .

So first of all , let's just drop the label inside there .

The name ID is perfectly fine when it come down .

This is needs to be a select field type , so we're going to just choose the option for select .

Once we do that , we can now say we want to get the options from a glossary .

Check that option .

All we need to do is choose the actual glossary we want to use .

So this example it's going to be the property status , and that's pretty much all we need to do there .

We don't want to allow multiple values to be selected , but you could do if you wanted to .

If that was relevant .

Next up , let's just add our next field in which in this example , is going to be our property type .

So we're gonna just do the same again .

Label property type name ID is going to be prefilled out .

Field is fine field type is going to be check box .

We're gonna just select option for glossary as before , select our glossary , which is going to be property type and just make sure everything else is fine .

That looks good to me .

So we're going to come in and we're gonna say , had another field in .

You kind of get where I'm coming from with this .

So what I'm gonna do is I'm gonna quickly go through to the rest of these so you don't have to sit here and watch me doing one after the other , OK ?

Before we save or update this , let me just quickly go through a couple of the different fields that you probably may not be aware of .

First of all , we're gonna take a look at this features one which , as you know , is taken from the glossary , which is just the features that the property has things like air conditioning , those kinds of things .

So we've got that from a glossary .

So what you've seen me do at the beginning of this section ?

However , I've set to save this as an array because we could have multiple values inside here , So we need to make sure that we set this to save as an array .

That's the only thing you need to know about on that one .

And then the Image gallery is just basically an image gallery , and it just operates slightly differently .

So we can set that up to allow us to upload multiple images .

And we can choose value formats and different things like that .

So you can see we can do media ID all those kinds of things .

But we're gonna leave that as it is for now .

And we're just gonna say , update or create this particular post type .

We'll now go ahead and set up the taxonomies we'll be using to group all of our properties together .

So once again , we're going to be using another one of jet engines features .

And this is the taxonomy option , which is accessible from the jet engine menu in the bottom left hand corner .

So this one is going to be the option for our property type and property location .

So the first thing we're gonna do is just choose to create a new taxonomy .

We're gonna set this up to be our property type .

Let Prefill out the next option .

And this time we're just gonna link this to our property .

Uh , custom post type .

So what we're basically saying is that the property custom post type has a new taxonomy called property type .

Just a great way of allowing us to sort of list things together .

Next up , we're gonna come into the advanced settings and make sure everything is configured the way that we want .

So what we need to do is just check .

Everything is enabled .

You can see all these options are perfectly fine .

What we do want to make sure we have enabled is hierarchical now , more a case of from a usability point of view than from a function point of view .

It just means that you can easily select any of the different property types when you add a new property without having to know what the names of them are and then start typing things in .

For me , this is just a much more usable way of working .

We'll add this taxonomy , then we're going to come back and we're going to create a second one .

So again , we're going to come into taxonomies , and from there we're just going to choose the option to add a new option , and we're going to just add in property location , post type again .

We're gonna link this to our property custom post type .

We're gonna come into our advanced settings and just make sure that hierarchical is set inside here as well .

Add our taxonomy and we are done with the taxonomy .

So now if we take a look at the property section on the left hand side , we've got property a new , and we've got our two custom taxonomies property , location and property type .

So we hop into the property location , for example .

We can start adding in locations for where our properties are actually going to be residing .

So let's add a couple of options in .

Let's just say we want some properties in New York .

We'll add that in .

We learn something in Miami , add that in and we'll just add another option in for in this example Los Angeles .

OK , so that's added those in .

So we'll add those next up .

We want to we can add our property type options in , so we're just literally gonna mimic exactly what we did in that glossary .

So apartment we've got loft apartments .

We've got a house and we finally got a condominium condo .

There we go .

Add that in and we'll just say we are done next up .

We need to create the custom post type to hold the information for our sales agents .

So adding our agent or a custom post type is basically exactly the same as we did when we added the properties in .

So we're gonna add an agent inside there labels .

We're gonna leave those as they are , hop into advanced settings and just make sure everything is set up the way we want , focusing primarily on making sure it has archive set inside there as well .

And if we want to , we can change this icon over , and we'll choose this option same again .

We're going to make sure this has thumbnail associated with it .

And now we can just go ahead and start adding in our meta fields .

So we're just gonna go ahead and do the same thing like we've done before .

So we're gonna start off in this example with agent licence .

This is going to be a field , and this is just going to be a sort of the ID number for their particular licence , so it can be kind of checked out as it were .

You know , you kind of get the idea .

So I got to quickly go through all of these again .

Nothing's going to be any different to what you've already seen .

We're going to use some glossaries .

We're going to insert some basic text , some numbers , things like that or what you already seen me do .

OK , so there's all the meta field values inserted in there .

We're gonna add our custom post type , and we are done so we can check our custom post types and you can see we've got agent and we've got property all set up and all of the details and values inserted into each of those custom post types .

If there's one area that trips up a lot of people , it's setting up relationships between different post types .

In this section , I'm going to show you how to set up the relationship between the agents who could have multiple properties associated with them and the properties themselves .

So let's take a look at doing on that right now .

So next on the agenda now is to set that relationship up to do that .

We're gonna come into relations in Jet Engine and we're gonna create our relationship to say and new .

And this is where a lot of people get confused .

So the first thing we gonna do is give this a name , and I would say , give it a descriptive name .

So this example is agent property relationship .

So I know this is the relationship between the agent and a property or properties .

So then we've got to set up the parent and the child .

Now , the agent is the one that can have multiple properties associated with it in this particular set up in this scenario .

So we need to set the parent to be agent , which means that the child posts are going to be the property .

Once we've done that , we can then choose the relationship type , and we have three to choose from 1 to 11 to many and many to many .

Now , in this example , one agent can have multiple properties .

But if for this scenario , we're not having one property can have multiple agents , so that just means the whole process a little simpler .

So this means it's one agent to many properties , so we'll choose one to many , and then we just need to leave it at that .

We don't need to worry about doing anything inside the parent relation .

And if we expand the advanced settings out , we can basically just leave these two options set up .

This just allows us to have a kind of two way relationship .

So in other words , we can assign the agent to a pro a property when we create that , using the properties custom , post time or conversely , we can do the opposite way around , we can create a new agent , and then we can add what properties we want that have already been created to that agent .

So it just means we can go either editing the agent to add properties or add the property by the agent .

Hope that makes sense .

You'll see what I mean when we take a look at actually adding in a property , and I'll give you an example of how it works .

With that being said , there's our relationship done and dusted .

We can hit , add relation , and that's the relationship set up no more complex than that .

So now that we've done everything for the the relationship and we set everything up .

This is how a property looks .

You can see we've got the standard wordpress title content and also featured image .

However , we've also got a section at the bottom which in this example is called settings .

However , this is where our property ID our property status .

All those custom fields we've created are listed in inside here .

We're gonna come back to those a little later once we start adding some properties in .

But what I wanted to just show you quickly is the related agent .

So this is a property .

So the related agent allows us to choose the agent that will be selling this particular property .

If we hop over out of this and we just go into an agent and we just say we wanted to add a new agent , for example , we'll see again .

This gives us all those custom fields and we've got select property this time which would allow us then to find the property or properties associated with this particular agent .

So this is what I want to just show you that two way link between properties and agents and how we can add either or , depending upon which section we go into , whether we're an agent or whether in a property section , like I say , I hope this makes sense that how this kind of works and I will show you when we create our first property and or agent how we link them together .

Now , before we move to start fleshing out our real estate website , we need to have some initial data inserted so we can use that to build the templates needed with actual real world data .

So let's take a look at doing that next .

So add it in the property .

Really straightforward .

We're gonna come into our property section and we're simply going to choose the option for a new and inside there , we're going to just fill out some basic information now for ease .

I'm just gonna simply use some prefill out kind of false data just so you can kind of see how everything works .

But I'll take you through inserting the information for one , and then we'll take a look at how we can just add in some more .

OK , so the first way to do let's just put this New York Heights .

We'll just drop in some basic filler text inside there .

It doesn't really matter too much what we're going to say .

We'll make sure that our property is set in the right location .

So we're gonna choose property location , and we're gonna set that for this example to be New York property type .

We're gonna set this to be an apartment , and then we're gonna just scroll down and we're gonna fill these out .

We'll come back and set the featured image and so on in a moment .

So property ID , we're just gonna call this one ?

Doesn't really matter .

So property status , this is for sale .

It's an apartment .

So we're just going to mimic the property type with the property type , which is our taxonomy price .

Well , it's gonna be an expensive one .

This isn't it .

500,000 .

I'm sure it'll be a lot more expensive than that , and we'll just call this city view New York .

I have no idea if there's a place in New York or City view , but I'm sure there is four bedrooms , four bathrooms , two garages .

We're going to call this 15,000 square feet , so I have no idea how big that would really be .

And we're going to say this was built in 2010 our features .

We're just going to choose from here , so we're gonna say it's got air conditioning .

It's got a dryer , laundry , swimming pool , lawn balcony , security system and central heating .

Why not ?

Let's go to town , choose media .

So I'm just gonna choose some images that already pre uploaded .

It's not too important what they are .

So we're gonna choose this this , this , this , this this I'll do choose our media .

So that's all our custom information sort of set out on the right hand side .

Now , let's just set our featured image .

So you're just gonna choose an image on there ?

We'll choose this one because I think this looks really nice .

Now , the option that we can't actually do anything with right now is because we don't have any agents created , so we can't choose an agent right now , but we can add an agent and we can then associate them with this property .

So let's do that .

We're going to publish this .

We'll just get rid of this annoying thing on Gutenberg .

And there we go .

There's our property all set up so Let's just hop back out of this now and you can see there's our first item .

So what I'm gonna do now is just simply come over to the agents and we're gonna add a new agent in .

So as you can see , this operates in a very similar fashion that we've just seen with adding properties our custom fields are underneath and the relevant information on the right hand side .

So let's do the same thing again .

This time .

This is gonna be Samuel Palmer .

We're gonna add a little bio in for him .

We'll drop his agent licence in , and we're just gonna say , his agent licence number is that tax number again ?

Just making these things that might not even be relevant .

So the service areas , Well , obviously in New York , because that's where this particular property is .

But let's say he covers New York , and we'll say he covers Los Angeles specialities , property management , real estate appraising and retail leasing and email .

We're just going to put in email at estate dot com .

It doesn't really matter what we put in phone number .

There you go .

He's got a phone number and his mobile number and his website .

We'll just put in website dot com .

Now .

What position is this particular individual ?

We've got all those options available to choose from in there .

So we're gonna say he's a senior sales agent .

And as you can remember , these are taken from the glossary , which is a new feature inside jet engine .

So it just makes the whole process easy .

And the nice thing with working with the glossaries is if we want to add another position or change the details of any positions , we can simply just go into our glossaries , make the change , make the addition , the update and then be reflected throughout our entire site .

So pretty cool .

OK , so here's the basic info .

Let's just hop on now to the agent side on the right hand side , let's set up a featured image , which is going to be in this example .

This is gonna be Samuel , so we'll upload his image and we'll just give him some alt text and we'll just say , Let's set that as the featured image and there we go .

So now any related properties .

Let's just start typing in New York and you can see there's our new York Heights , which is our custom property we just created .

We'll select that and that's now been associated with him .

So we'll publish this agent .

All we're gonna do now is we're gonna hop back onto our properties and I'll just show you then how that's been added in .

So we go back to our properties and we take a look at New York Heights .

You can see if we scroll down , you can see there's our selected agent and Samuel Palmer has now been associated with this particular property .

It's as easy as that .

You can see that two way link is all set up and working .

OK , so what I'll do now is I'm gonna quickly go through and add a few more properties in and a couple more agents in follow the exact same principle that I've just shown you right now , we'll have some more data to work with .

We start building our listings .

A key aspect to working with dynamic data in jet engine is setting up the listings that will be used to display each one of our listing items .

Items like our properties and sales agents .

We'll start things off by setting up the properties listing to get started with listings .

All we need to do is come to Jet Engine and choose the option for listings .

And now we can start creating things .

So the first thing we're gonna do is our property listing .

So let's just select that listing source Post is perfectly fine .

We're going to deal with the Post in this example post type .

We're going to just choose this to be a property .

Gonna give this a name of property listing , and we're gonna use Element or to edit this .

You could obviously use blocks if you wanted to .

Through Gutenberg , we'll create our listing .

And once that's created , we're now ready to start building out how we want to style things out .

Now you can get as simple or complex as you want to .

With these , we're going to keep it straightforward .

But the skills you'll see in this section are easy to expand upon .

And just repeat what I show you to add as much data and information as you want to Now , first up , to make our lives just a little easier .

Let's set this environment up so it shows what we want to show and lays it out the way we want to .

So to do that , we're gonna come to the settings option at the bottom left , open that up and go into the listing settings , and this allows us to configure a few different things .

Listing source .

We can change that to post terms users .

And so on post is perfectly fine .

In this example .

The post type of property again is perfectly fine this example .

But you can see all of our options are inside .

There want to work with agents and so on .

We can set the templates up through that .

Leave that as property .

We're gonna set the width to be 450 pixels because that's kind of be close to what we'd expect to see in a typical listing layout .

And it just allows us to design things in a little bit of an easier fashion .

Make the list item , clickable .

This is something we want to do in this example because we want to allow the US to click the image and so on to go and take a look at the actual property itself so we can check that box .

Then it gives us the option to say , Well , what's the link source ?

Perma link in this example is perfectly fine , so we'll leave that and we'll just leave everything else as it is .

All those default values are perfectly fine .

So with that being said now we can start building the various different elements out to build up our actual listing layout .

So let's start off by dropping the image in at the top .

So we're gonna do is we're gonna just search for Dynamic , and we're gonna use the dynamic image , which is part of jet engine .

Now you could if you wanted to use the normal elemental image and then just set that up to use the featured image .

However , we just get a little bit more control over how things work using the jet engine option .

So that's what we're gonna do for this particular setup .

OK , so let's work through the options on the left hand side .

Image size full is gonna be a little bit big for what we need .

So we're gonna come in and say we'll try medium large , no loss of quality , but it should save us a little bit of load in time linked image .

We're going to select that option so the image becomes a link and you can see the Perma link is the same as we just saw when we set the settings up , and that's perfectly fine we scroll on through .

If you want to set any other options up like the alignment and so on .

You can do that inside here as well .

And you can even drop in a fallback image , just in case .

No images uploaded up to you .

If you want to do that .

Once we've done that , the next option we want to go through now is to set up some of the other things .

So let's come back into our widgets .

Let's just do a search for dynamic again , and this time we're going to grab the option for dynamic field .

We'll drop that into our design and you can see this now , says the source is going to be post term user or object , which in this example is fine .

We're just going to be using the default WordPress title for this , which is the name of our property and title is perfectly fine , so we can leave that set up as it is .

Next thing we're gonna do is we want to drop in the price .

So we're going to do the same thing again .

We can do a search for dynamic dynamic Field is perfectly fine and we'll drop that underneath and we'll come back to styling these a little later .

So don't worry too much right now , so we need to change this now because the price is a custom field set up through jet engine .

So to do that , we just change the source to meta data because we're dealing with a meta field and then we can choose the meta field , drop down underneath and choose the option that we want .

So under property , you can see there's our price would choose that and that pulls that data in .

It doesn't look very good right now , though .

As you can see , it just pulls in the number with no formatting or anything .

This is one of the reasons why the jet engine options gives us so much flexibility .

If we come down to the options for philtre field output and select that we can choose an option for call back and the call back just basically means how do we want to handle the data that we're output at the moment , You can see it's now just for grade this out because it doesn't really know what we want to use .

So let's expand the call back option , and what we want to do is choose the format number .

We'll select that , and that opens up a lot more options .

You can see our numbers come back , which is perfectly fine .

So we're gonna do is we're gonna set the decimal places to be zero in this example because we're dealing with thousands and tens of thousands and so on , so we don't need decimal places on there , so that's looking better .

However , we're still not where we want to be .

Next up , we're going to use the customised field output .

We'll select that and this gives us this little macro this sort of percentage sign and S .

And that's just the macro to output this meta field data , this example , the number .

But what we can do is we can put things before and after this to expand upon .

So we're gonna do is we're just gonna simply put in the pound sign for this example and you can see now that makes a lot more sense .

We've got 340,000 .

We know it's a monetary value , so that's how easy it is to do that .

Next on our list .

We want to add in some information about things like the number of beds , bathrooms and those kinds of things .

So we're going to do it the same again .

Search for Dynamic .

We're going to drag in the dynamic field .

We'll drop that underneath .

And what we're gonna do is just change this to a meta data because it's a custom field .

Open this up and the first thing we're going to choose is the bedrooms option .

And you see that just pulls in the number three , which is OK and you can use the the different options I've just shown you .

However , if we open up the customised field output because we're using elemental and we've got that set up to work with font awesome , we can use font awesome icons inside here .

So all we need to do is hop over to font awesome , do a search for the icon that we want click on the icon and once we do that it'll give us various different ways of selecting it .

So you can see we've got the different types .

We've got these little codes , the uni code , and so on .

What we want , though , is this just a little bit of code and copy that HTML from there to copy it .

And we've got what we want now .

So we're gonna head back over into our page and we're gonna just simply drop this in .

And you see , once we do that , there's our icon we know and any spaces or do any format .

And we can do that inside here as well .

So really easy to do .

And now you can simply go ahead and style this the way that you want .

We'll come back to that in a moment , though we won't worry about it right now .

So what I do to make life easier is I'm just gonna simply duplicate this one , and we're going to change a few parameters on here .

So the first thing I'm gonna do is change it from bedrooms and we're gonna just set this to be bathrooms and we're gonna do is we're gonna hop back over into font or we're gonna search for Bath and we'll see what comes up on there .

If we get something we quite like , There we go .

This one will do it .

That's perfectly fine .

And we can do is we can just take that little bit of code .

And once we can jump back into here and we can just simply take this out and replace it with our new little bit of code and there we go .

So now we've got a bath icon and a bed icon so you could repeat this as many times as you wanted to , to lay everything out How you want .

So now we've got some of the basics in there .

There's one more thing I want to show you before we move on to formatting this and laying things out to make it look much nicer than it does right now , we're going to create one more dynamic field .

So again , same thing .

We're just gonna search for dynamic drag and drop this .

But we're going to put this right underneath our image because we're gonna place what we have inside you .

Once we change it to float over our image and we're gonna use this to sort of put in the property status .

For example , whether it's a new build , they say retail or rental property , those kinds of things .

So what we're gonna do is change this over to metadata , and we're going to just change the option over until we find property status and you see , this is for sale .

So before we move this around , let's just put a bit of style in .

So it just makes the whole process of seeing how it all looks a little bit easier .

So first things first .

I want to make sure that the HTML tag is set is either a DIV or a SPAN .

It just makes positioning things just a little easier moving forward .

Once you've done that , we're gonna hop over to the style section and we're going to just set up some of the colours .

Now .

I would recommend you probably set up global colours as part of your design .

I haven't done that in this example , because this is something that I'm sure you're more than accustomed to doing , and I'll add some colours as we go through .

OK , so the first thing we want to do is set a background colour on this .

So we change the background type and we're just gonna choose a colour .

So we've got no global colour set up , So let's just add some colours that I want to use .

We're gonna start by adding this orange in so we just paste this orange colour .

There we go .

And we're gonna add that in .

So we're just gonna call this orange and we'll create that colour .

So now we've got a background colour on this .

Obviously you want to change the typography and the fonts and so on and the colours and that .

So we're gonna change the colour over , and we're gonna set this to be white .

And again , we're gonna set this to be a global colour .

Always good to have black and white as global colours .

Um , we just set that to be white , create that colour .

Now , things are starting to look a little bit more interesting .

So the next thing we want to do is just change the styling of the font itself .

So I'm gonna do is come into the top .

We'll set this to be something we'll try about 12 pixels , maybe 14 .

That looks a bit small .

and we're going to just come in and we're gonna set this to be a little bit heavier .

And we're also going to set this to be upper case .

OK , so that's looking OK , maybe size 13 .

So let's put just a little bit of breathing room around this .

So underneath the style options and the field , we're going to come into the padding .

We'll try something like three .

That looks OK , actually , maybe even two .

OK , that looks pretty good .

So now we've styled it the way that we want .

We just now need to go ahead and position this way .

We want to actually display it .

To do that , we're gonna hop over into the advanced section .

We're going to come right the way down until we get to positioning .

Now by default .

This is set to be default for width and position .

But we need to change that .

We're going to change this to be in line , and you see , that kind of just closes it up and it just moves it from being just a sort of entire row section gives a bit more flexibility over how we can set things up inside you .

And now we're gonna do is we're gonna set the position to be absolute .

So when you choose absolute and you can see that pushes that right up to the top left hand side of the container that we have for this particular listing item .

So now we can just position that as we want to by using the offset options .

We've got a vertical and a horizontal offset .

And we can also set this up to be different on desktop and those kinds of different things mobile tablets and so on .

Now , I'm not gonna worry about showing you all these kinds of things .

I'm gonna show you one example of how we can do this somewhere in the region of about 14 , maybe 20 on there , and we'll do it the same there , So that looks pretty good .

Let's look in the way I want .

While we're at it , we're just going to select this entire section and we're gonna do is we're gonna change this over this entire block .

I should say , if I can grab it now , sometimes you see , you get this weird little effect because we've got this sort of absolute positioned element we can't grab this .

So if you get that kind of problem , just use the navigator .

Just come through until you find the item that you want .

You can see this allows us to select everything .

We're gonna select the section which is the entire area , and we're going to come to the column gap and set that to be no gap .

So we get that right the way to full width .

So now we're getting somewhere .

Let's just push this over the right hand side .

Now , we need to deal with the styling and the positioning of all these different items .

And this is where we're gonna be using the plug in which I say completely free just makes our life just a little easier .

So we're gonna do is we're gonna select the price to start off with .

Once we've selected that , we're gonna come over to advanced , and we're gonna come right the way down to widget stalker .

Open that up and we're gonna enable this and what this allows us to do .

It allows us to use either the flex box model or a units model .

Now , flex Boxx is very useful .

But for this example , we're gonna stick to units .

So we're gonna select the first one .

And what we're gonna do is we're going to basically make these three different icons and these three different elements line up with each other to the first one we're gonna set to have a value to allow us to have space over the other side .

So we're gonna set this to be something like widget width and we're gonna say 60% and you can see this little green box now shows us that this is only taken up 60% width .

We can adjust that if we want to .

Later , we're gonna come to the next widget .

We're going to select that , go to advanced , right the way down to widget Stalker and enable this set this to be units and we're going to set the max width or the width on this to be 20% .

You can see that now brings that up in line and we can do exactly the same thing now for the third and final one .

So again into advanced into widget stalker enable this units 20% and now everything is all lined up .

Now you might want to close the spacing up .

Make them a little bit smaller .

It's entirely up to you .

And you can do this kind of thing by using some of the built in options inside elemental .

But the boy just allows us to do this a lot quicker and easier .

And I think it just makes the whole process a little bit more visual , a little bit quicker to deal with .

OK , we're almost there now for this first listing .

So what we're gonna do is we're going to select the entire section and we're going to come over to the style option and we're going to give this a little bit of a a border radius and a little bit of a drop shadow .

Just so it stands off the background nicely .

So first of all , we're going to come into our border , and we're gonna set this to be a border radius of eight .

We're going to work on an eight pixel model now .

You're not gonna see anything because there's no way of seeing this .

There's no difference between the background colours .

However , if we just want to drop in a drop shadow , we can select this and what we can do is we can just fine tune this to what we want .

So we're gonna set our horizontal value to be five vertical .

We're going to be set into four for this example .

Set a blur of about six because I want this to be quite subtle , and we're gonna set our spread to be about minus seven .

Now you can possibly see it , but we're gonna make this even more subtle by just reducing the opacity of the shadow .

And there we go .

So next up , we're gonna come up and choose our image .

Because even though we've put some rounded edges on this , you won't see that because the image sits on top of the actual section .

So we're gonna just come into the image making sure that's the selected item , and we're certainly going to come over into our style option .

And we're gonna put a border radius unlink these we're gonna say top of eight and we're gonna say right of eight , and that'll just do with the top left and the top right options inside there .

So we're almost where we want to be .

We just need to apply a little bit of spacing to these items and then just a little bit of styling to make them look just a little nicer .

So let's just select our title .

Gonna come into advance .

First of all , let's give this a bit of space and check these .

We're gonna set 20 pixels left and right just to push it in to make it look nicer .

We're going to then just change the font standing on there a little bit because this is a title and it needs to be a little bit more heavy .

Weight set this to be something like H four , for example .

Probably a little too big in this case .

But we can style this individually anyway , So we're gonna come in .

We're gonna set this to something like , let's try 20 .

Actually , it's got a bit smaller than that .

OK , that looks pretty good .

We're gonna set our weight to be something like 500 .

That's OK .

I kind of like the look of that and I'm going to repeat the exact same procedure now for these other options underneath .

OK , so go ahead , apply the final little bit of style into everything inside you , and we've now created our first listing .

So we can update this or save it , whichever you kind of have to do .

And that's our first listing done and dusted .

Let's put our newly created properties listing template to good use our properties archive template .

So we're gonna build that Properties archive .

Next , let's hop over into templates into theme builder and inside there we're gonna create our first archive .

So we're just gonna call this default property archive and we'll create the template we're gonna put the basics in place to start off with .

So we're gonna ignore any of these prebuilt ones .

We're gonna start from scratch and you can see I've already created a head on foot .

So don't worry too much about what's going on there .

These are just template ones , and you could change these for whatever you kind of wanted to .

OK , so what we're gonna do is we're gonna create a section at the top , which is going to have an image in there and a sort of what this page is about .

You know , the sort of title , and then we'll take a look at creating the listings and some sorts and so on .

So let's just add in a new single section .

We're going to select that .

We're going to just come over to the height and we're going to set a minimum height on there .

We'll try something like about 600 .

It doesn't really matter too much .

We can change any of these values afterwards anyway .

Hop into style and we're going to choose a background image , and we're gonna find something that looks quite nice .

Let's just choose something like this Slate , that image .

Here we go Position that we'll do centre to centre , for example .

We don't want any repeat on there , and we'd want to do cover .

What I would suggest then we're gonna do is we're gonna come to background overlay and we're gonna add an overlay on here .

So we're gonna come in and we're going to just set a colour we'll choose .

Well , I just create just plain black for this example .

Actually , what we're gonna do is we're gonna set it to be a sort of bluey black somewhere around the just have a little bit of blue in there again .

We'll just add this to our global colours , and we're just going to call this blue black and we'll create OK , so these are our colours .

We're just gonna make this a little bit more solid somewhere around there , and we'll just grab a heading .

Drop that inside there , centre it .

We'll set this to be H one , and we're just gonna say this is something like Find your perfect home .

Doesn't really matter too much what we're gonna put in there , and we'll just quickly style this .

So our colour , we're gonna set this to be our global white , our typography .

We're gonna just set this to be about 400 upper case and we'll just push the size up just a little bit .

Maybe somewhere around 48 .

That'll look good .

OK , so there's our basic head in section underneath this we are going to drop in a search and philtre set up , but we're not gonna do that right now .

We're gonna come back to that its own dedicated section , so we'll add that in a little later .

What I'm going to focus on right now , though , is just adding in the listing .

To do that , we're gonna simply come over and we're going to do a search for listing .

And you see , there's our listing grids we're gonna drag and drop that into our page .

We're going to select it and make a bit of room .

So let's just say we'll put 50 pixels margin above and below .

So what we need to do now is select what listing we want to use .

We'll open this up and we'll just do a search for property and you can see there's our property listing .

We've only got one at the moment , but as we add more , we'll see more options inside you .

So select that , and what that does now is that will pull in all the different properties , and you can see now what that's doing is that's using the layout we just created through the listing so everything is laid out the way we want .

It was a bit squashed up at the moment because I'm on a quite small screen here just to demonstrate things .

But if I sort of close that up , you can see everything looks pretty good and if we want to , we can easily make the page a larger layout so we can select this section , come to our layout , and we're going to just say we want this to be 1400 for example , And then we squash this down .

We're going to get a bigger display .

And obviously with more modern browsers , that's quite a realistic starting point .

But it's up to you how you want to lay things out .

I leave it said to that looks pretty cool .

OK , so that's how easy it is to drop the listings inside there , and we'll just select the listing again and make sure everything is laid out as we want .

Column number you can see we can set the various different values inside you and three for this example is fine .

And we can obviously go through and set things up on mobile and tablet .

This two to isn't about setting up mobile and tablet set up .

I'm sure you can do that yourselves to fine tune the design .

If you want to , you can then control exactly what is going to be displayed now .

Obviously you want to show just the published , but you have all options .

If you wanted to inside there , scroll down and we're going to say we want this to lazy load so we can just reduce the weight of this page as we have more properties and you might want to sort of up the post number something like 12 .

So when you add more items in , you'll have more properties , and I'll just quickly fine tune a couple of the other options on here as well .

So we're gonna say we want equal column heights just to make sure everything lines up nice and tidy .

We're gonna say load more .

I'm gonna say infinite scroll as you scroll down and we're gonna leave it at that .

We don't need to worry about post queries and terms and things along those lines because we're just having this as a listing .

But if you wanted to use these , get a little bit more creative , you might want to sort of set the home page , for example , on archive page to have featured images , lots of different things you can do inside here .

We're gonna leave it set of that , though , so that's the first part we've now got our property listing .

Now , I also want to allow people to sort these in various different orders .

We'll start off with a really simple example based upon price .

But you could if you wanted to expand this to various different kinds of sorts .

And again , this is just something that we've got built .

The jet engine , jet search jet , smart philtres , those kinds of things .

So we're gonna do is we're gonna do a search for sorting .

And you see , there's our sorting philtre .

We'll pop that into the area above our actual properties .

And what we can do now is we can come into our sorting list and you can see there's some pre designed ones inside here .

We're gonna get rid of all of those and we're going to build our own from scratch .

So we're gonna do is we're gonna keep this really quite simple to start off with .

We're gonna set it up .

So we've got the ability to sort things from lowest to highest and from highest to lowest .

We expand that out , we're gonna change this title , and that's just basically what you're going to see inside the drop down select .

What do you want to order by ?

Well , we're going to expand this out , and we're gonna say we want to use a meta key numeric because it's a It's a number we set up to do it for the value of the property .

So we're gonna choose that option , and we're gonna put the key in for that custom field , which in this example , is price .

Now , if you're ever unsure what that meta key is , you can simply hop over into jet engine into your custom post type and then all of your meta fields and listed here and you can see next to them next to the name will show you what the actual meta field name is .

So , for example , we're dealing with the price you can see .

Price is the meta field .

So we open this up .

The name ID is price all in lower case .

So if you ever get stuck , just reference back to that and it's gonna make your life a lot easier .

Copy and paste , if you want to , to avoid any kind of errors with capitalization spaces and so on .

OK , so price is fine in there .

This example we want to set this to ascending , and that's our first one .

So we're gonna do is we're going to duplicate this now , and we're going to change this second option to be the opposite way around this time , so We're going to just change this to be descending , and we're gonna change the label inside there of the title .

And there we go .

So now what we've got is we've got a very simple sort that allows us to sort it by highest price to lowest price or lowest price to highest priced .

So what we're gonna do is we're just gonna just select this and we're gonna do like we've done before .

We're gonna come into advanced , we're gonna come down to Widget Stalker , and we're going to enable the widget stalker set this to be using units , and we're gonna set it to be 50% even though it's on the left hand side .

What we're gonna do is we're gonna come back up here .

We're going to drag a heading in above this and we're just gonna set this up to be a title so people will know exactly what they're looking at .

So we say this is our properties .

H two is fine .

Let's just quickly style .

This just set things up on here and let's just say something like 24 pixels , for example , and we'll make this just a little lighter , something like that .

OK , so what we're gonna do now is just the same thing again .

So we're gonna come back to our widget stalker , enable this set it to be units set this to be 50% .

And now we've got things lined up , and all we need to do now is select the second option where we've got our sort and we're gonna come into style , and we're gonna just make sure that everything is set up the way we want .

So we'll set our alignment to be right .

And we want to adjust the size of this .

We can do that so you can see we can adjust the width to make it just a little bit bigger .

So let's just say something like 300 pixels that look a bit better .

There we go .

If you want to style things and adjust the labels and all those kinds of things and buttons and all that kind of stuff , you can do that inside here .

I'm not gonna worry too much about it , though , right now , So now we've configured everything .

We just need to go ahead and make sure that this is gonna work the way we want it to .

So we're gonna come back over into our edit sorting philtre option , expand the content option and choose what this philtre is for .

Drop that option down and we're going to say this is jet engine because this is where the data is coming from .

Ajax is perfectly fine .

So this will just update when you make a change to it and you can see apply on value change .

But you could if you wanted to drop in a button after it show Apply button in this example we don't want to .

For this particular label , we're just going to simply drop in the sort properties .

And we're gonna say , Yep , label block is fine inside there , sort .

Everything looks good .

Just hop back over here and we're gonna go back to our label , and we're gonna make sure that's right aligned as well .

And we're also going to come into the typography and we're just going to put a little bit of spacing underneath it .

So we're going to let the spacing drop that down a bit , so it's not quite so in your face .

There we go and that's it done .

We've now created our listing we've applied sorting to it .

We've also gone ahead and set up our header and we're all ready now to test this out .

So let's just publish this page .

We need to add a condition to this now that to say where and when this is going to be used as an archive .

So we're gonna add our condition , gonna open this up and expand it , and we're gonna look for the property archive section and we've got the first option .

Inside there is property archive .

Now , the way this works is everything that sits below that unless you change , it will also inherit this template .

For most cases , that would be fine .

But if you wanted to change it to have a different template for various different setups , like the property type and so on .

You can do that for this example .

We're gonna set to be property archive , and we're gonna say save and close .

That's the archive created .

So now we've created the archive .

Let's add that into our navigation so we can reference it and then let's test it out .

Let's exit to our dashboard .

And from there we're going to come to our appearance and into menus .

If you haven't already got a menu created , just create a simple standard menu .

And I just call this main menu and you can see home is set inside there , and the display location is set to primary .

So now we need to reference and include the new archive .

But how do we go about doing it ?

Because , well , it's not actually available anywhere inside here .

You see posts , for example , and we've got pages and agents and property , but nothing to do with the actual listing for the archives .

So how do we go about actually setting that up ?

It's actually a lot easier than you may think , but I know this is one of those areas that a lot of people stumble upon because it's not really that clear .

So what we're gonna do is we're gonna come back out of this and we're gonna hop into our post types .

Our custom post type we created with jet engine .

There's our agent and our property .

And there's the slug for each of those agent and properties .

So what I'm gonna do is I'm gonna copy the properties slug gonna pop back over into our menus and we're gonna add in a custom link .

So we're gonna open this up .

We're simply going to drop in the link that we've just selected .

But we're going in case that with forward slashes , so we're gonna put in , like so .

And what this means is that it doesn't matter what domain it's on .

This will work regardless , If you wanted to put your full domain inside there , you could do that so you could put WWW dot my domain dot com forward slash properties forward slash would work perfectly fine as well .

The link .

We're just gonna put properties , let it say all properties and we'll just add that to our menu .

So there's our custom menu , so we'll add that inside there .

So now we hop back over into our test site .

We're on the home page where there currently is nothing , but you'll see there's our all properties option in our menu .

We'll click on that and that will take us through .

And you can now see there's our properties , everything listed inside .

They're all six that we currently have .

You can see they're all random in their pricing structure .

They're in the order that I added them in .

So what I can do now is I can come up to sort and I say , I want to look at the highest to lowest And there's our £15 million Miami views right the way down to our £340,000 manner View .

Alternatively , you can just simply choose the other option and that'll reverse it .

So pretty cool .

Our archive template needs to lead somewhere .

And in this example , it's our property single template .

So let's take a look at building that next back in the template section .

This time , we're going to just use the option for a single post .

We're gonna create our new template .

So this is gonna be a single property template , and we'll create our template from there .

And then we can start building things inside our templates .

The first thing I want to do is just close this down , so we're gonna start completely from scratch .

We're gonna hop over into the setting section for this particular page and go into our styles , and we'll set our background colour .

Now I've done this on some of the other templates as well .

I just didn't show it on camera .

But all it is is just to apply this really , really pale kind of colour to the background , which I can then use and put white boxes over the top because it just makes it stand out a little nicer .

OK , that being said , we're now ready to start adding things inside here .

So we're going to just choose the option for a two column section .

And this is where we're going to put things like the name of the apartment , the price , those kinds of useful things .

So we'll select this , make sure we've got it selected and add a bit of spacing around it .

So for this example , we'll just do 50 above and below .

Actually , it might be a bit too much .

Let's just do 20 .

OK , that looks good .

OK , so with that selected , let's just come back to our layout and make sure everything is now going to sit in the right position .

So we're gonna make sure that this is set to vertical align of top because I want everything to align on the top section .

Now we can go ahead and start adding all the items in .

So let's just come into our widgets and we're going to do a search for Dynamic gonna grab the dynamic field drag and drop that inside there .

And we're going to change this to make sure it's right .

Now you can see it's putting in Hello World , which is just the default filler , uh , sort of post that you have .

So we need to change that now to know that it's working with the right info .

So we're gonna come down to our settings in the bottom left , come to our preview settings , change the dynamic content to be previewed to property , and for this example , we'll just do a search for New York or something .

New York Heights .

There we go .

Apply and preview , and that'll refresh the page and you'll see there's the right information .

So now the preview information that we're gonna be using will actually be a property as opposed to a default .

WordPress Post Again .

This is one of those things that when you're new to working with this kind of thing , it can be confusing how you build things when you're not actually seeing the information that's relevant to the post type you're working with .

OK , so we're worried about styling these things a little later .

The next thing we want to do is to just sort of specify what kind of property this is .

So we're gonna do the same thing again .

We'll duplicate this so we'll just right click and duplicate .

Make sure this is selected and we're going to change this to meta data because we want to grab one of our custom meta fields , change our meta data over , and we're gonna use the option for property status so we can see whether this is for sale .

You know , investment , property , those kinds of things .

We're gonna duplicate that another time , and this third one is going to be for the address .

So again , we're gonna scroll it down until we find the property information .

We'll grab the address info inside .

There , Next up , on the right hand side , we want to put some sharing icons and we want to put the price and then we'll take a look at applying some other styling to this to make it all look much nicer than it does right now .

So with that being said , let's just select the first option and we're just gonna do a search for share buttons and you go , there's our share button .

We're gonna drag that over to this side .

Now , that looks particularly ugly , but we'll worry about styling those in a moment , But we will align those to the right hand side .

And what we're gonna do is we're gonna just duplicate this 1/4 time .

Drag that over to the right hand side and we're going to just change this , that the date is perfectly fine .

But we want to put the price in this time .

And there we go .

There's our pricing information and again we want to align this correctly so we'll hop over to our styles , set this to be aligned to the right .

So there's the basic info .

Next thing I'm gonna do now , like I say is go ahead and style this to make it look a little bit nicer .

Now , to make this section a lot quicker , I'm not gonna bore you by showing you how I set up all the styling for all this .

I'm gonna do that behind the scenes and we'll come back and we move on then to building out the next sections .

OK , so the styling applied to the header section Everything good on there ?

The next thing we're gonna do now is start creating everything else .

So we're going to just add in a two column section and we're going to set this up to be like so and we're just gonna select all this .

I'm gonna set this to be 1200 pixels .

Even though I did 1400 earlier on change it over to 1200 now because I think it looks better .

OK , so what we're gonna have is the left hand section is gonna have the information about the property .

The right hand section a little later on is going to have the ability to contact the agent that's selling the property .

So let me just demonstrate that this is what we're gonna be working towards .

So this is the main section we're going to start with right now , and later on , we're going to come back to this because we're going to build this out through some templating or options .

So this is the first focal point of dealing with the template .

Let's hop back into a design .

So we going to do is we want to drop in the featured image for this particular property , first of all , So again , we're just going to do a search for dynamic grab in the dynamic image .

Drop that inside there , and post thumbnail is perfectly fine .

And you can see it pulls in an image for us , which is great .

Next on our list , we want to add gallery of images in which is one of our custom fields .

So we're gonna grab the gallery option , drop that underneath , and all we can do is we can choose exactly where this data is going to come from , so we're gonna use the option for dynamic tags .

Select that , and you can see we have Jet Engine Gallery as an option .

We'll choose that .

We'll click the little wrench icon there and we'll select the gallery you want to work with , which in this case is the property image gallery .

We only have one right now , so select that .

And what that'll do is that will start to pull through the images for us , and then you go , there's our images .

So now we can configure this how we want now because we don't know if it be Landscape , Portrait square , and so on .

What we can do is we can just simply come to the option for grid and set this to be masonry .

We can set the columns in this example .

I want to stick this to three .

Follow just the space in which we're going to do set .

That's about 15 pixels .

That's perfectly fine .

And then you can choose what size images do you want to display so you can choose from any of the prebuilt layouts and depend upon how big you choose to have these images and kind of control exactly how good quality they are and what to choose from here .

You can also choose what link you want to do in our media file .

I would generally choose to be the option gives us the ability then to easily work with a nice light box effect .

And if you want to apply an overlay or control the way this all looks , you can do exactly that from inside here .

Other than that , we're going to leave that as it is , that's perfectly fine .

So looking at the finished product , the next thing we want to do is drop in this section for the overview , which is going to include the property ID , the details about the property , the number of bedrooms , bathrooms and again we're gonna be using icons like we've done before .

So let's just hop back into the template we're working with .

What we're gonna do is we're going to come in and choose an inner section , so we want to have just a little control over styling and so on .

So we're gonna drag and drop that underneath our gallery .

And you see , we've got two columns inside there .

We don't need two columns .

We're going to just get rid of one of these .

Just delete that completely .

So we just end up with the one inside there .

Now , let's just apply a little bit of styling to this .

We're gonna make sure it's selected .

We're gonna just hop over into the style option .

We're gonna set the background colour to be our global white colour .

And you see that because it's a nice white box there , and we're just gonna add in 20 pixels of padding inside there .

So we get this nice kind of boxed effect that we work with .

OK , so next thing we're gonna do is just simply grab a heading .

So we're gonna drop that heading inside there .

We're just gonna change this to overview .

We'll set this to be H three , and we're gonna quickly just set up some styling .

So we're gonna say the typography , we're gonna use primary colour .

We're going to use the secondary colour , and we're just going to tweak this a little bit .

So before we do , let's just make sure H three .

Yep , And we're just going to adjust this to make it just a little bit lighter weight .

So we'll set that to 300 we're going to reduce the size of this to say maybe 24 .

Something like that .

That looks OK .

She just make that 400 .

OK , so there's the first part .

Next thing we want to do is select this and we're going to use that option inside our advanced for the widget stalker .

And we're going to do like we did before .

This time we're gonna set this to be 50% width , and that means that we can line up this with the property ID , which is going to be the next option .

We're gonna drop in , so let's just choose Dina , we want to choose a dynamic field , which is part of jet engine , and we're gonna do inside .

There is .

We're gonna change this over now , so we've got the right information .

So change this to metadata .

We're gonna choose property ID , which is the unique identifier that we created as a custom field .

Once we've done that , we just need to customise the actual output .

Otherwise , it makes no sense to anybody what's going on .

So what we're gonna do is we're gonna customise this .

There's our little macro and we're going to drop in the property , ID and put a space .

And I'm also you can see I've just used the normal HTML tags to make that property ID just a little bit bolder .

So it stands out a little better , so that's pretty cool .

Now what we need to do is come over to advanced , like we did before , down to the widget stalker , and set this to be 50% .

So it floats on the right hand side .

There we go and we can just find it come into style , and we can just align this to the right hand side .

So that's made that look a lot nicer .

Next up , we're just going to drop in a separator just to give us a little divider area between there .

Drop that underneath .

Now you can see this now sits underneath the box .

And what I want to do is I want this to be inside this inner section .

Now it's a bit awkward sometimes when it comes to elemental , to try to get things where you want , especially when you're using this to kind of float your information left and right .

So the easiest way like we saw before is to bring the navigator up , and then you can use the Navigator to position things where you actually want them .

Now we'll set that inside there , and now we can just fine tune that to get exactly what we want .

So 100% it is perfectly fine .

We're gonna set this to be Let's go for dotted going to our style .

We're going to just adjust this to make it a little lighter , so it's a little less in your face .

There we go .

All we can do is we can just simply come into our style option and close our gap up there .

We go , That looks much nicer .

So next up , we're gonna add in some more of those custom fields .

So we gonna just repeat the process and I'm not going to go through every single one .

I'll show you the first two and then I'm just going to simply go and repeat that process for the remainder of this particular section .

So the first thing we're gonna do is gonna come back up , do a search for dynamic dynamic field , drop that underneath our little line , and this is now bringing in the default values .

We need to change this .

This is going to be the type of property that we're dealing with .

So we're going to just choose the option for metadata , and from there , we're now going to choose our property type , which is a multi select option .

You can see that gives us an error .

But don't worry .

We can deal with that quite easily .

We're going to come to philtre field output and from the call back option , we're gonna come down , and we're going to choose the option checked value list or checkbox field value , So check check box field values gives us any of those check boxes .

Now , obviously , we're only gonna have one in this example .

But you can see that allows us to put that in there .

And the next thing we're gonna do is customise this field output , and we're gonna just drop in some information .

So the first thing I want to do is kind of make things bold .

So we're gonna just type in the strong HTML code gonna go after our little symbol , our little macro , we're gonna close that up .

So we're gonna close the strong side of things .

Then we're gonna put a line break in , which is forward slash BR wrapped in our normal bras .

And then we're gonna put in property type and you see that now tells us the apartment is the property type so we can see exactly what that's like , so that's really straightforward .

The next thing we want to do is come over to advanced and under there , we're gonna use the widget stalker again .

And this is where we can just control exactly how wide this is going to be to allow us to get all the icons we want inside there .

So let's enable it .

Set it to be units and we're gonna set this one to be just 25% .

And there we go .

So we've done the first one .

The next one we're gonna do is along the same kind of lines .

And then , like I say , I'm just gonna get on and do the rest .

So we're going to do is we're gonna add in another dynamic field .

We'll drop that underneath there .

So the next thing I'm gonna do now is set this to be things like the bedrooms , the bathrooms and so on .

So we're gonna just use metadata .

We're gonna choose for the first one .

It's gonna be bedrooms .

Once we've done that , we're gonna come down to customise the field output .

And we can do is now we can just use that normal kind of information we've got to put in the font Awesome icon .

So I'm gonna just quickly paste in the little block of code that I've just copied .

And let me just explain what's going on here .

You can see .

Most importantly , we've got the little macro , which is that percentage sign in the S .

We've got a font , awesome icon like we've seen before .

So exactly the same as I've showed you where we've copied anything from you .

You just literally copy this little line item .

Once you've done that , we wrapped it in strong tags for the icon and the number .

And then the bedrooms underneath is just separated by a line break .

Nothing .

Anything complex in there at all .

You can simply pause the video if you want to here and copy exactly what I've done .

If you want to replicate this for yourself , Finally , all we need to do now is hop over to the advanced section into a widget store , enable that set it to units and then we're gonna set this to maybe 10% .

And then we go .

That's added that in and maybe 15% .

Just to give us a little bit of space .

There we go .

So now I'm going to repeat this process a couple of times with some different icons with the same kinds of data for bathrooms , garages and so on .

And then we're gonna move on .

OK , so there we go .

There's all of those next set of options inserted in .

So the next thing we want to do now is go ahead and get the description of the property in place .

So first things first .

Let's just set up a title inside here , so we're going to just grab a normal heading .

Drop that underneath There .

Now , again , you can see this is pushing it outside , which is one of the little quirks of trying to get everything lined up .

So we'll just use the navigator to get that what we want .

We're also going to duplicate the divide it and set that after our header .

I'm gonna change the heading inside there .

We'll set that to be something like H four and we're gonna do is we're gonna set this to be description .

OK , let's just quickly style that as well .

Just so we know .

Actually , let's just copy the styling from there .

So copy that , paste the styling .

There we go .

That'll do it .

We'll just remove that .

We just talk from there , OK ?

And finally , I'll just make it a little bit smaller as well .

Excuse me , being picky , but part of what I do , OK , so finally , we're just going to go in and add a little bit of space above that .

So maybe 20 pixels above so the next thing we're gonna do is just grab the data to drop underneath there , that'll have the description of the property itself .

And to do that , we're gonna come back out .

We're just gonna do dynamic , drag our dynamic field into position .

Change that over to have content inside there , and everything is now set up and good to go .

So that's the key information about the property all set up .

All right , let's just make this a little bit wider .

Maybe something like 25 and 75% .

That's a bit better .

It gives a bit more breathing space to make the design look a little nicer .

OK , so that's the key part .

Now we want to drop in the features and the location information inside you .

So let's just close this up .

We're gonna come back up and we're gonna just pull in another intersection .

We'll drop that underneath .

We're gonna get rid of one of those columns , and we're going to just add a bit of space above this .

So we're going to just put in a margin of , say , 30 pixels there , and 30 pixels top and bottom link those together and we're going to just do the same .

We're gonna 20 pixels of spacing around there and we're going to just change the background colour to be our global white .

So now everything is kind of consistent with what we're doing above .

So we kind of get these nice blocks that allow us to see what we're doing .

OK , so let's make our life just a little bit easier like we've done before .

Let's just duplicate this divider and let's just duplicate this heading and then we can just reposition those then in our new section .

So let's expand that out and we're just going to grab those and put them where we want them .

So put that down there and let's just drag down a little bit so we can see what we're doing .

There we go gets a little bit finicky when you start to get more complex designs , but that's part of the fun .

OK , so our feature section is now ready .

Let's just go and do a search for our dynamic fields .

Drop that underneath there again .

Position it where we want it .

OK , so what we need to do now is change this over to meta data and this is going to show our features .

And this is one of those little things I'm gonna show you something that's really useful if you're working with just repeating items just to make things look nice and again , one of the things the jet engine just makes super easy to do .

So the meta field metadata is fine .

We're gonna change this over now , and we want to find the option for features .

So let's just find that inside there .

There we go , which you remember , was just a check box .

And again , we get this error because it doesn't know how to output the data .

But as always , we can simply change that by filtering the field output and changing the call back .

This is pretty cool .

If we do the option for checked values list , what that'll do is it'll create a list of all of those values that's already quite cool , so it now replaces the array with the values that will actually be output .

However , we can also set this to go into multiple columns .

So let's set that to be two columns so it looks a little bit cooler .

And also let's give it an icon to say , Well , these are all the items and features it's got .

Unless you search for check and there's our checkmarks , we'll say , Yep , we'll use that .

We'll insert that into there , and if you want to , we can change the colour of this as well .

So we can style everything inside there .

But you can see now we've now got a nice looking check box list that says all the different features that this particular property has pretty cool .

So we're gonna do one more thing that we're gonna add the location at the bottom using the same technique we've just covered .

So just to make life easy , let's duplicate this entire section .

So all our padding and everything is in place .

We're gonna get rid of this dynamic data .

Delete that from there , and we're gonna change this to a location .

And finally , we're just gonna drag in a map .

So we're just gonna do a search for map .

We'll drag that underneath there , and all we need to do now is use the dynamic tags to reference our jet engine custom field .

And then we're going to choose the custom field , which is the address , and we'll check that option .

And there we go .

So we've now added in a map .

Now it might not show up at the moment because the address is a little bit sort of made up fictitious .

But , you know , you kind of get the idea .

And now I obviously I can set things like the zoom level that I want , the height of the map and so on .

So zoom level about 14 height .

Well , we could just adjust that to make it look a little bit better .

Let's just say about 450 pixels .

There we go .

That's pretty cool .

OK , so other than the agent information , which you need to add in on the right hand side a little later , once you've created that template , this is the basics of our entire single post template created .

So now we need to go ahead , publish this and set up the condition for when and where this is going to be used , says add our condition .

We don't want to apply this to all singular to expand that out .

We're going to find a property , and we're just going to choose the option for property , and then you can see we can philtre this down to various different types of properties , but we're gonna leave this set to all .

So this template now will be used as the default property template for all of our properties .

Let's hit , save and close on there .

So that's our template created .

So let's hop back over now to our test site where we've got our listing .

So we refresh this to make sure everything is in the right place .

So there's all our properties .

And now if we take a look at Manor View , for example , Click to go into there , we're now going to go through .

And this is our custom layout .

You can see there's our gallery .

We can click on our images .

We can scroll through inside there .

We can scroll down .

There's our description .

There's our features , our location map , everything is in place and working in the way we wanted it to .

Next on the checklist is the listing template for our sales agents .

Let's get stuck in and build that one next .

So we're back into the listing section now of jet engine , and we're gonna create our listing for our agent .

So we're gonna choose the option for agent and need the post type .

And we're just gonna call this agent listing or create our new listing item .

OK , so let's just insert a simple layout .

So we're gonna set this option for two columns , OK , so let's start on building everything out .

So we're gonna do is come back into our widgets and search for a dina image .

Drop that inside there and post them now is perfectly fine in this example .

And then we're gonna do is we're gonna come over and start adding the content on the right hand side .

So the first thing we gonna do is add in the name of this individual agent .

So again , dynamic widgets and we gonna do dynamic field .

We'll drop that into there .

You see , It pulls the name in , which is perfectly fine .

We'll just set that to be something like H three .

So it picks up a little bit more styling , maybe H four in this example .

OK , so next up , we want to put in some more dynamic data and you're gonna find this is kind of just a repetitive kind of thing .

We're just gonna pull in all the relevant key data .

So for this example , we want to find out the position they're actually undertaking .

So met the data to change this .

Now we're going to find the information for the agent , and we're gonna do is we're going to just put in the agent position .

And you see , Britney is a client manager .

So what I'm gonna do is I'm just gonna simply drag in the relevant information , and then we're gonna move on to the styling side of things I don't want to bore you with just going through the same routine that I've done before , which is aligning things left and right , putting the data and so on .

So let me just do that off camera , and then we can move on from here .

But before I do , go ahead and just start everything else .

I want to show you one more thing to do with glossaries , which is incredibly useful .

So what we're gonna do is we're gonna just do a search for our dynamic fields .

We're gonna drop that into the right hand section , making sure that it goes to the right place .

If it doesn't which it hasn't gonna quickly adjust that through my Navigator .

OK , so this section we're going to change this over to meta data , and we want this to sort of reference information from our services area , which is a glossary .

So we're going to just select the relevant field , which is going to be the service areas .

Can you see we get that error message like we saw before .

However , if we come down to the call back option enable the philtre field output open this up .

You can't see this , unfortunately , because it is literally right at the bottom of my screen .

But the very , very final item inside there says get labels from glossary data , we're going to select that .

That continues to give us a different error this time because we need to tell it what glossary we actually want to reference .

So you can see we get this new entry , we're going to just choose the option for agent service areas , and you can see that now pulls the relevant data in for us .

So now what you can do is you can easily go ahead and set the limit you want inside there , so you want to separate things by commas or slashes .

Whatever you kind of want to do .

You can do that .

We can also use the areas , the customised field output , and we'll just put areas covered .

And you see that now pulls in our list in a nice , clean and simple fashion .

And again , you can apply any styling you want inside you .

So I just wanted to sort of show you that because I kind of think this is an important thing .

If you're not used to working with glossaries as part of the new feature in Jet engine OK , so let me just show you what I'm doing here .

Just so you can kind of see what I've done with this and how I've laid things out because I'm sure I'll probably get questions on this .

So what we're gonna do is we're simply going to duplicate this , so all the first one is is simply a heading .

So I'm gonna duplicate that and reposition it .

So we're sitting there .

I just applied some negative margin to this to make sure everything sits a little closer , and that's basically it .

The next thing I've done is apply a dynamic field .

So we've already seen how to do this how to duplicate that and reposition that and all I've done with that is the same thing again when it comes to the negative margin .

And I've also for the mobile and the mobile number there , the two different fields we've just seen .

I've also used the option for widget stalker and set those to 50% .

So all I need to do now is change the content of these , for example , to email and the second one for the dynamic data .

That's gonna be just the email option inside there , and that's it .

It is literally just repeating the same thing with some negative margins , some dividers and so on to give us this kind of listing layout .

Sure , there's lots of other ways you could do it , but this is a nice , simple , clean or flexible way of doing it , referencing the dynamic data .

So the final thing we need to do is add in an option for viewing all of the listings for this particular , uh , agent .

So to do that , we're going to drop in a dynamic link .

Let's just search for that .

We're gonna do a search for dynamic and again , this is another one of those widgets to do with Jet engine .

We're gonna drop that where we want it .

Now , you'll probably find that when you start messing about with these , they don't always go where you want .

And like I say , this is where the navigator comes in .

Super handy .

Let's just make a little bit of space for this particular widget .

So we're just going to come into our advanced and we're gonna add a little bit of margin on this at the top .

Maybe , let's try 10 .

That'll do .

That looks pretty good .

Hop over to our style option and we're gonna align this to the right hand side , actually , and the content set this to the right hand side .

There we go .

And just change this to be the right kind of thing .

So permanent is perfectly fine , because that's gonna link through to the permanent for the single post .

That will be the single post template for our agents .

Hope that makes sense .

And then we're just going to say view listing .

There we go .

So what this is going to do is this will take us over to the detailed page about this individual agent and the view listings is just simply going to give us a list of all the properties that agent actually has listed under them .

So let me just show you what I'm talking about .

This is the sort of finished result there's our view listings .

So we're looking at Britney Watkins .

We click to go and take a look .

There's the bio for Brittany , all the details , including the reviews .

And if you scroll down , this will have all of the properties currently listed under that particular agent .

And that's all that link is going to do when we create the single post template for our agent .

So let's just save our listing in my case is , updates have already saved as I've gone through .

But there's our listing completed .

Any other style you want to do ?

You could do that here right now .

OK , so that's the listing side of things done .

As with our properties listing , we need to build an archive template for our sales agents .

So let's do that right now .

So we're back in our theme builder and we're going to create our new archive .

So we're just gonna select archive as the option and we're just gonna create a new one so we'll add new .

This is going to be default agent archive , create a template .

And as we've done before , we'll just ignore all the default options that elemental gives us .

And we're going to create this from scratch .

So , like before we're going to create a really simple layer .

Two columns add a little bit of space above and below .

I'm gonna drop a heading in to the left and the right hand column .

So we're gonna drag a heading inside there , and we're gonna do set this to be agents , and we'll set that to be something like H four .

We'll duplicate that , and we'll just put that on the right hand side and we'll just say philtre agents .

So we're gonna apply a philtre inside there if you want to .

OK , so the next thing we're gonna do is just find our listing .

So we're gonna search for listing .

There's our listing grade .

We're gonna drag that underneath our agents Drop that inside there .

Now we just need to select things .

So we're going to do a search for agent .

There's our agent listing .

We're gonna set this now to be just one column and you can see that's brought in our listings as we'd expect .

And now , if we want to , we can assign any other items inside you we can set up .

What data ?

If we want to sort of set published and so on the number of posts , those kinds of things entirely up to you .

We'll do lazy load .

We'll also do load more and we'll just say Infinite Scroll And that should be pretty much the entire thing .

So we can publish that .

Now we'll add a condition , and we don't want again to have this for all archives .

We only want this specific to our agent archives .

So we're gonna scroll through until we find Agent archive .

There it is .

We'll select that option and we'll say , save and close .

And that's our agents .

So the next thing we need to do is just quickly add this to our menu structure like we did before .

So we're gonna come over to appearance into menus and , like I've showed you before , if you're unsure what the actual code you're gonna use for this is head over to jet engine into your post types , there's your post type slug , which is just agents .

We'll copy that from there again .

Like I say So we don't make any mistakes .

Hop back in and like we did before with the old properties , we're going to create a custom link .

We're gonna do a forward slash drop in agent and another forward slash .

And then we're just going to say view agents and that's our menu .

There we go .

We'll just save our menu .

And then let's just take a look just to check .

Everything's working .

So this is our test site .

We'll refresh this .

There's our view agents item and click on there , and that takes us through .

And there's our agents .

So we've done that section .

Now we can move on while our sales agent single template is next and share some common features with the likes of our single property template .

It has some more advanced relationship features that I'll dig into and explain in this section .

OK , so let's create our template now , So we're gonna go to single post and we're going to create a new template .

So this is going to be default agent single , create our template .

And once we've done that , we're gonna just bypass any of the pre designed layouts .

As always , get rid of that completely .

And we're gonna start something completely fresh now to make my life a little bit easier .

The layout for this is basically going to be predominantly the same as what we've just created for the agent listing .

So I've already copied that .

So I'm gonna simply paste that design inside here , and that just speeds up the process .

So we're gonna do now is I'm gonna add a bit of space above and below this , so we'll put 50 above and below .

So there's the basic info .

Now , I can get rid of this view listing because that's not relevant in this example .

We're gonna delete that from there , but this just makes this part of it just a little bit quicker and easier .

And while I'm at it , I also realise I missed out the little divider .

So I'm going to duplicate that .

I'm gonna drop the divider at the end of that design .

There we go .

So that's the first part .

The next thing I'm gonna do now is add some more information in to do with this particular agent , so we've got their bio and things like that , and we'll come back a little later and also include reviews .

So what you can do now is you can go ahead and start adding in any more information you want , so we can just do a search for Dynamic and we'll just draw out a dynamic field inside there again .

Like I say , we get a little bit of a quirky thing going on .

So let's just drop that where that's good .

And we're going to just change this over now to search for the agent inside there and say , Post content .

As you can see , it's kind of pulled in the wrong data , and that's because we just haven't told this template what we want to use to output the data on here .

So we're going to come down into the bottom left hand corner in the settings like before into our preview settings and make sure this is set up to look at agent this time and we'll just do a search for Brittany .

There's Britain's details apply and we should then find that will update and refresh the page and put in all our relevant data , including now our buyer So it's just refresh that from where we just copied things over earlier on .

So that's that side of things done .

We're gonna select this option and we're just gonna come in to customise the output , and we're just going to put in short code the HMR code for strong .

We're gonna put bio inside there , and we're gonna close that out with strong Gant just so it gives us a nice bit of styling .

So now we get the bio for this particular person , and that's looking pretty cool .

OK , so we'll worry about the reviews a little later .

But the next thing I want to do is something that is a little bit more advanced , and that's where we need to link this particular agent to their properties .

So this is where that relationship we set up earlier on actually comes into play because obviously we've associated certain properties with different agents .

So Brittany has her collection of properties and then an example .

Samuel has his selection of properties , so I'm gonna show you how we do that next .

So let's just add a new section in underneath , and this is going to be where we'll see all those properties .

So we're going to select this .

We're just gonna make sure that everything looks the way we want it to and we're gonna grab a listing .

So we're gonna cut our widgets .

We search for listing the drag and drop that inside there .

What we're gonna do is we're gonna reference our property .

So we're going to property list in because this is the kind of design that we set up originally , if you remember , So that's now put in the properties .

But this is putting all the properties in , so we don't know who they're related to or anything else , so that's not gonna work for us .

So what we need to do is set up some kind of philtre that specifies only the properties linked to the particular agent .

We're currently looking at a visible .

So how do we do that ?

What we need to do is come into some of our options where we can go ahead and we can just set up a post query and we're going to use one of the macros that jet engine has and there's a lot of macros and they can be kind of complicated , but I just want to show you exactly how this works , and I'll show you where you can get more information about those when you're ready to sort of go a little bit deeper into what you can do .

OK , so let's expand this out a little bit .

Just so we've got a bit more real estate to work with when it comes to creating this query , let's add a new item in What we're gonna do is select the type of parameter the type of query we want to work with .

For this example is post and author parameters because we want to deal with posts that are associated with a particular , uh , agent .

So we're gonna select that option , and then you get all these different things , which can look kind of daunting , but we don't really need to deal with most of these .

We only realistically need to put one value inside here .

And that's where we put in this .

Include posts by I DS .

Now , if I hop over and show you the macros , this is going to give you a load of information and you can see the macros are all made up with a very similar style you've got the little percentage mark that opens and closes the macro .

You have the first part of the macro in this example .

The related Children form .

Then you have a pipe sign , so you may not be able to see this very well on the screen right now .

And then you have what you wanted to do .

So you can see this is saying related Children from post type slug .

So there's the first part .

So what we're gonna do is we're gonna copy that from there because this is the one we want to use .

We're gonna hop back over into our set up .

We're gonna simply paste that into there .

Now you can see that gives us no data found because , well , it doesn't really know where to look for them , because what you find is this post type slug If we come back over here , the second part of this macro is a kind of placeholder .

We've got to replace that with where we're looking for this information .

So if you remember , when we set the relationship up , the agent was the parent and the properties with the Children .

So what we need to do now is tell it the custom post type we want to reference .

So if we come back into our jet engine , there's the post type slugs for both of our custom post types .

So property is the child , so we're going to just select that copy it , come back over and where it says post type slug .

We're going to get rid of that , making sure we don't delete the pipe or the percentage mark .

And we're simply going to paste in properties .

And now you can see that pulls up the properties that are related to this specific agent .

Hope that makes sense .

This can be kind of confusing , but hopefully what you can see is once you kind of get an understanding of the parent and child relationship and also how you use this macro to reference the relevant properties in this example , or the Children child , whatever you wanna call it , hopefully that'll make a bit of sense .

I would recommend taking your time to read through this macros guide to get an understanding of it and then test it out a couple of times just to get your head around it .

And if you want a dedicated video on how to do all of this .

There's a link in the description below that will take you through what ?

I've dedicated an entire tutorial just to working with these .

OK , so with that being said , we've now created that set up , we can Now publish this .

We just need to set up where we want this to actually be referenced to .

So again , we're going to add a condition in change this over , we're gonna come down and we want to choose agent , and we're gonna set this to all .

In other words , this template will be used for the agents and every single agent .

So we'll save and close that .

And I'm gonna quickly just apply some more styling to this just to tidy things up a little bit .

But then we're gonna test this out , and I'm gonna show you exactly how all of this works .

OK , so let's just take a quick look .

Now we're back onto our agents listing page , and let's take a look at Brittany's listing to open that up .

There's the bio , all the contact details , et cetera .

We scroll down , there's Britney's currently listed properties , and if we come back out of this .

We go and take a look at Samuels .

We'll find that Samuel has different properties associated with him , and you can see there's all his properties .

And if we click to go and take a look , we'll then jump through to our custom template we created earlier , all linked up for us so you can see things are starting to fall into place now , and we've covered a heck of a lot of different bases .

But I say when you're dealing with relationships , that's one of the key things that people do stumble upon .

So hopefully this is just giving you an idea of how you can start to use these inside your projects , to get a little bit more complex to linking things through to each other .

It's time to continue digging into how to use relationships by building and linking our agent property sales contact form .

Let's take a look at how to do that now .

So next up on our list is this contact section over on the right hand side that's going to be based upon the agent for any given property .

So there has to be some dynamic values included in this for the email address and so on .

So to do that , we're gonna be using another list in this part of jet engine .

So to come back into our jet engine setup , come into the jet engine and choose listings , and from there we're going to create a new listing .

So that's just posts in .

We're going to come in and choose agent from there Set listing type .

And this is going to be agent quick contact .

I'm gonna say create listing item .

OK , so once we've done that , we're then going to start referencing the relevant data and start building this format .

So like we did before we working with listings , we're going to come into our settings in the bottom section , come to our listing settings , and what we're gonna do is we're going to set this to have a width of 350 pixels just to give us a good starting point .

Now , it's also worth bearing in mind .

Do not make the listing item clickable .

If you do , you're going to cause yourself a few problems .

So don't do that , because this is going to mean the form won't work because this entire listing becomes a clickable object that would take us through to the Perma link .

We don't want that to happen , but we can , however , set the image of the particular agent to go through and take a look at their listing items and make that clickable don't fall into the trap of making the wrong item Clickable .

OK , so with that being said , we can now start pulling in the relevant data .

First thing we want to do is just come in and do dynamic .

And we want a dynamic image .

We'll drop that inside there .

Post thumbnail is perfectly fine .

You can see that now pulls the image of Brittany in , which is good , and we're going to set that to be centred next up .

We're just gonna simply grab the name of the agent and the telephone number .

So if you wanted to contact them quickly , you could do just that .

So , like we've done before , just simple and dynamic data fields drop that underneath there and we're gonna do is we're going to just choose the information to be metadata or actually not .

I like this one is gonna post it title , which their name was simply going to come over to the advanced options down to our widget stalker , enable that and set that to be unit and 50% just so we can line things up nice and neat and tidy .

So let's just duplicate that and we're going to change this then to metadata , and we're gonna change this to the agent's phone number and there's the telephone , and we're gonna do is gonna come down to customise the field output and simply going to put in Tell Colon .

There we go .

And finally , we'll just align that to the right hand side .

So everything lines up nice and neat .

So there we go .

There's the first part of things we can adjust paddings and spacing and so on .

But like before , I'll do that off camera so you don't have to watch it .

OK , so the next thing you want to do is grab the normal form element .

That's part of elemental .

So let's just grab that .

There's our forms .

There we go .

Let's drop that underneath there .

There's our form Now we can just change a few parameters on here .

Name email .

We also want to add phone in .

So let's just duplicate this and just change the details .

This is going to be a telephone number set down on there .

Change this to phone , change the placeholder to phone and hop over to advanced .

And we're gonna set this to be phone as well .

There we go , and message is perfectly fine .

We're gonna add one more item underneath , which is going to be a select field .

And this allows us to just choose what kind of information we are actually requesting .

So first of all , let's just set everything up inside here .

So let's just put in the name for this or the label for this inquiry type and all you need to do .

If you've never used a typical select field inside the former jet engine in Elemental , you simply just separate each element by putting on its own line .

So now we've set everything up inside there .

That's what we want .

Now we can do a couple of other things before we move on .

We need to grab the agent's email address , and currently we don't have that .

So how do we do it ?

Or we can use hidden fields .

And this is one of the beauties of working with forms , we can add a new item .

We're gonna set this to be hidden .

And from there we can say right label .

Well , it doesn't really matter what label we put .

We'll just put agent email in just so that'll pass through onto the form .

And if we hop over to advanced , we can set a few things up inside here .

So the default value is currently empty , but we can use dynamic tags .

So let's just click on that and we're gonna do is we're going to find the relevant information .

So we're gonna scroll through until we find Jet Engine .

We're gonna choose a custom field , and then we're going to select the custom field , and we're going to go up to the agent information and find the email so that will now be stored as a value inside the form .

Even though we can't see it , it'll be stored can give it an agent , underscore email as an ID just so it passes over , we want to use it , and we'll just reposition that out of the way .

So that's really all there is to the first part of this , the third and final thing .

We're gonna do is add another item in , and this is going to be an acceptance item .

So this means that they've got to confirm that they're happy with us , having that information and linking through the terms of use page and that kind of thing up to you , how you'd want to set this up .

But it's quite easy .

We're going to choose the option for acceptance .

The label is just going to be in this example acceptance , even though we won't see the labels , it is required because we want to make sure that they absolutely confirm they're happy with it .

And then we can put the acceptance text in , and I just gonna drop that in there with a little that link through to what would be my privacy policy .

And like I say , this is something that all they see is like , You can see this little check box , so that's everything we need in place .

Now we can set things up so we don't want the labels to display inside here .

That's cool .

Buttons is perfectly fine .

We're going to change that , and we're going to save this to the send message .

There we go .

So that we'll send the message .

Actions have to submit .

Well , we want this to go to email , and we'll leave those values as they are in there .

So we'll say the email and you can see we can choose where this email goes to those kinds of things .

So we want this to go through to the agent's email address , not a standard email address , because obviously each individual property listing will have a different agent associated with it .

So you want the form to be sent through to the right agent .

So how do we do that ?

Well , this is where we go back to our form fields .

And this is why we put that agent email as a hidden field because now we can use that in our form .

So let's go to advanced .

Let's just grab the short code for this .

Let's have a short code for that specific field .

I'm going to copy that .

From there .

We're gonna come back down to our email , and we're gonna do is we're going to just delete that default email and we're gonna simply paste in the email address , which is going to be that hidden ID field that has the agent's email details inside it .

I hope that makes sense .

And again , I've got a dedicated tutorial to show you exactly how to do all this kind of thing .

I'll link to that in the description as well .

OK , so we want to change the subject to send us a bit more in keeping .

So when the agent gets the email , it makes a bit of sense to them .

So we'll just put that inside there .

And now we can just make sure everything else is configured as we want to .

So the from email ?

Well , we can set that up to whatever you kind of want .

You can have a default email address that comes from the actual website itself .

That's fine .

Uh , from name .

We're just going to say my real estate site .

OK , so the reply to we're gonna just change that to email field because obviously you want to reply to the person that sent the email not to any other random email address , and this is where we're gonna use the meta data information underneath .

We're gonna remove the things like the credit and the remote IP .

We don't want that or the user agent , but we are gonna leave the page URL inside there because this then will pass over the link to the page for this specific property .

So then , when the email goes through to the agent , they can just simply click on that , go straight to see which property is being talked about and have access to everything they want inside there .

So that's that side of things .

So all that's left to do now is just quickly go ahead and style everything inside here , and I'll do that .

And then we'll see how we can insert this into our template .

And then we'll double check that everything is working and test things out .

OK , so let's just simply go back into our templates now .

And we're going to open the single property template up and edit that with elemental , and we can now drop in that listing .

So once that's loaded in , we gonna come to this right hand column , select inside there , do a search for our listing drag , and drop that over on the right hand side , select the listing we want , which is going to be agent quick contact , and that will pull things up inside this .

We're gonna set this to display one item and one item so that will put that information in there .

But how do we know if it's the right person that's been associated with things ?

Well , this is where we start to use those macros again .

So let's take a look .

We'll make sure that the listing is selected , and then on the left hand side , when it come down to our post query like we did before , let's just expand this out a little bit so we can see a bit better .

What we're doing and we're gonna do is we're gonna grab another option .

So this time we're going to choose again post and author parameters , and we're gonna be using a different macro this time .

So we just drop the macro inside there , and then we're gonna explain things .

So related parents from an agent .

So let's hop back over to our guide .

So this is our second macro our related parents from post type slug .

So , like we saw in the first one , which was the related Children from , In other words , the Children in that example was going to be the properties associated with the agent .

This time we're doing the reverse .

We're saying , What's the parent that's associated with this specific property ?

And as you can see , we've got the post type slug , which is the same as we saw above .

And that's what needs to be replaced .

And in this example , it's going to be agent because that's the parent .

So that's exactly what we've done here .

Related parents from agent .

That's it .

That's all we need to do .

So once we've done that , we've applied the macro to this .

We can simply update our page , and then we can go and test this out to make sure it's showing the correct agent for these particular properties .

So we're back on our property listing .

You can see it's all our properties .

So let's take a look at the first man of view and you can see that's one of Brittany's properties .

So we come back out of there and we'll try a different property .

This time we'll say the Miami views , and you can see that's one of Samuel's come back out .

We'll come down and take a look at the second man of view , which again is another one of Samuels So now we can see that this is pulling in the correct data .

Next thing I want to do is just make sure that our contact form is working and sending through the relevant email to the correct end user agent .

OK , so next up , let's just test the email system out to make sure that everything is working there .

So we'll just do this and we'll just put in some fake details .

My phone number a message and we'll say I'm a buyer .

We confirm that we'll send out a message and the form has been sent successfully now , obviously with any kind of form you set up when it comes to element .

Or you could send this to a different page if you wanted to lots of different ways in which you can handle the end result .

But that's that side of things done as you can hear it .

The email has just come in , so let's just take a little look now at exactly what we see on that email .

OK , so there's the email that's come in and you see all my details are on there , including the URL directly to the page .

Everything is included now there's lots more you could do with this kind of set up .

This is just really scratching the surface , but it's a nice , quick and easy way of having that immediate contact for someone that's interested in a property or a product or whatever it is you're kind of building your site on .

So pretty cool to see .

Now things are shaping up nicely , so let's put our creativity to good use by designing and building our home page .

So let's add a new page in , and we're just going to name this home page and we'll just publish this and then we'll edit this with elemental .

Now there's still a couple of things we need to flesh out .

We need to build out the philtre system .

We need to build out the search system , so we're gonna put the kind of placeholder data into place right now .

And then we'll take a look at adding those extra features , building those and adding them to the relevant templates and pages .

So , first of all , let's get rid of this annoying home page at the top , just come into our settings and hide the title on there .

So that's that side of things done .

We're gonna add in a single row column section and this is kind of going to be our hero section for our site .

So we're going to select that and we're gonna set this to be Well , we'll come in and we'll set a height and we'll set a minimum height .

And let's go for something like 600 .

Obviously , you can get creative and do what you want with this kind of thing .

Next up , we're going to put a background image in there to give us a nice sense of focus .

So we're gonna jump with a style , come into background , and we're going to select a nice background image .

Let's find something that I think looks pretty cool .

Let's just say I like the look of this one .

We'll insert that into there .

We'll set this to be sent to centre .

We're gonna set this to have no repeat , and we're going to set it to cover .

OK , so that looks pretty good .

Next thing we're gonna do is just drop a background overlay on there to make it a little less in your face , and we'll have some space then to give some separation to the search and any kind of text we want to place on there .

So , background , we're gonna set this to black .

And what we're gonna do is just tweak this a little bit .

There we go .

Somewhere around there , that's our blue Black , I believe so .

That's that side of things done next up , we want to put in just a title .

So we're gonna just drop a heading inside there .

Set that to be centred , Set to be H One we're gonna do is just put a nice kind of call to action and aspirational quote of find your dream home and then we can just set the styling on this So colour we want this to be white .

So it stands out from there , come into a typography , and we're just gonna the size of this up till we get somewhere around about the 60 pixel mark set this to about Hm .

Actually , let's go for something quite slim like that and we'll set this to be upper case .

OK , so there's your aspirational quote and underneath that is going to be where our search is , and then underneath there is going to be our philtre set up .

But for now , we're going to leave those as they are .

And let's just add the next section in , which is going to be the section for our actual property listings .

So again , like we did before , let's just drop heading inside there , make some space on this .

We'll set 50 above and below .

We'll set this to be centred , so I'll just select our text , and we're gonna do is we're just going to tell people exactly what they can do , which is discover our latest properties , the centre of that inside there , font size .

Everything looks perfectly fine on there , and that looks pretty good .

We won't worry too much about that .

And then we'll put a sort of sub section underneath the drop that underneath set that to be something like H five , and we'll just put some and text and send to that .

Finally , let's just move that up a little bit and we'll just say , maybe minus 10 .

That looks pretty good .

Like , look at that .

OK , so next thing you want to do is drop in our listing , and this is just going to kind of display a range of our our most recent properties , but you could set this up to list anything you want .

You could have featured properties with a check box and then philtre based upon that .

So many different things you can do .

OK , so let's just do a search now for a listing .

We'll drag and drop our listing underneath , and we'll select our listing so we'll just call this property .

There's our property listing and three columns is like we did before .

What we're gonna do is just select this section , come back up , set this to be 1200 wide , and we'll grab our second section and do the same on there just to give us a little bit more real estate , as it were .

Pardon the pun .

OK , so there's our properties inside there .

Everything's looking the way we want .

And if you want to set up like any parameters , things like lazy load in the number of properties and so on , you can do all of that inside here .

I'm gonna leave this set to be just showing six properties , though that's perfectly fine and dandy for this example .

Obviously you get a lot more creative with this , but that is the basics of our home page .

Done .

So let's just update this page we're gonna do then is we're gonna hop over into the settings for our entire site and set this as our home page .

So we're gonna come down into the setting section into reading , and from there we're gonna say a static page is our home page and choose homepage and save those changes .

Now we can just take a look at this on our test site .

There we go looking pretty cool .

Everything is set up , there's our images .

There's our properties .

We can click and go through the property so everything is kind of falling into place .

Now we've got all the property listing set up the agent properties , the listings for the agents and so on .

Now it's time to get to the key component of any listing website the ability to search and philtre the data we've added .

We'll start with an Ajax search function , and then we'll move on to building several different types of Philtres .

And before we get stuck in and start setting up our searches and philtres , let's just quickly go and take a look at the settings for our smart philtres .

So inside here we can do a couple of different things .

We can choose the index of settings , the general settings and so on .

Now you can see by default under general settings .

You've got all of these different options on the different kinds of searches and philtres and those kinds of things , most of which , in this example , we're simply not using .

It doesn't matter whether you enable or disable these from a performance point of view .

Really , It's more to do with an ease of use when you're designing and setting things up .

So we're gonna disable everything that's not relevant to us .

We're not dealing with products .

We're not dealing with woocommerce .

We'll leave the element or options .

We're gonna get rid of the calendar .

We build it and that final woo builder .

That just means that we've only got three kind of sources , which just makes things a little bit easier indexer set .

If you come in there , you can use indexed philtres if you want to .

I've already covered this .

I believe in a different tutorial , so I'm not gonna go over too much of that .

And if you are using the URL structure .

You can set that up to be plain or permanent .

And this is just how your URL structure is actually going to be displayed .

Now , unless you are using the sort of option to click a button and have the normal philtre , you're not using the Ajax option .

This won't really do anything , because when you're using Ajax , nothing shows up via the URL .

But if you want to use a normal sort of click a button and you want to have the ability to share that Perma link , then the permanent option is going to give you a better kind of way of laying things out a little bit neater and Tidier .

Just wanted to sort of show you those things .

So with that out of the way , let's just jump over into our smart philtres and let's take a look at setting up our first one , which is our property search , says Add new .

We're going to give this the name of property search so it makes some sense to us , and we're going to give it a label of property search and an active philtre label of property search .

These are just kind of referencing in various different places .

Next up , you've got your philtre settings .

In other words , what kind of philtre is this going to be ?

And jets smart philtres and jet search kind of treat everything as a philtre , whether it's a search or a philtre .

So once you understand that , it'll stop any confusion for you looking for the search options .

So philtre type we're gonna select from there , and we're gonna just come down and choose search the placeholder search is fine .

Or you could say search properties just to make it a little bit more obvious exactly what they're going to be doing .

So search properties and then you can choose search by and you can see we can have a default WordPress search or by custom field a query variable .

But we're gonna leave this to be a default WordPress search for this example and we're gonna hit Publish .

That's our search philtre basically set up .

So now what we can do is we can go back to our home page , So to come back into our pages , open our home page , edit this with our mentor , and then we can drop our search icon inside there to make things look a little bit cooler .

So let's just do a search for search of that pan again .

And what we want is the Ajax search .

So we're gonna grab that option and gonna drag that underneath our heading section , and that's going to put our Ajax search in .

So now we can go ahead and set things up the way that we want so we can configure this style .

It do all those kinds of things .

So we're gonna do is we're gonna say we want responsive from mobile , responsive form on mobile .

That's that side of things .

Then we can come into a search queer if you want to , and you can choose what sources you want .

So inside here , we're gonna set this up to be only for property .

We don't want to search anything else .

You can set terms and things like that .

If you want to search in custom fields , you can add extra custom fields inside here , so separated custom field keys list so you could do things like your price and so on .

So you say price , Uh , let's have a little look .

Let's hop over into jet engine and see what other fields we can reference .

You can search for things like bedrooms , bathrooms , garage , those kinds of things .

But for this example , we're gonna keep this fairly simple .

So we'll just say Price Bedrooms , for example .

You know those kinds of things , so it allows us to philtre through a a range of different things .

But we're going to use the philtres because that's kind of be more where we're gonna go through and set things up to do what we want .

We can philtre things down .

The search is kind of more cursory and not something I'm going to worry too much about .

However , you can see we've got a tonne of different options we can configure .

So you've got things like your results area .

You can configure this the thumbnail placeholder show product price , show product rating , all these kinds of things .

So I would say really get stuck in and have a play about with those to see exactly how everything works .

Like show me after you can specify where it's going to be and so on .

I'm not gonna worry about those sides of things .

I am going to quickly just go ahead and style this And then we're gonna move on to creating the more fun thing , which is the philtres .

OK , so there's all the styling and everything set up .

Now , if you'd like to see a more detailed , thorough tutorial on how to use the search function jet search , let me know in the comment section below , and I'll create something specific that if enough people are interested .

Like I say , there are so many options inside here that it would take an entire tutorial for me to go through everything and show you .

So I just kind of covered the real basics just so you can at least get a search up and running in this particular example .

So , like I say , let me know in the comments if you were interested in something like that , OK , so let's just quickly test our new search out .

So let's just do a search for New York , for example , and there's our property , and you can see this shows us the thumbnail of the property , the name of it and a little brief synopsis of the content .

But we included things like bedroom , and we included things like price and so on .

So how would we go about actually , just getting that to display ?

Well , let me just hop back over into our search section , make sure it's selected , and underneath the content section , we're gonna come into the custom fields area and we can show meta data before or after the title or meta before , after the content up to you .

How you want to deliver it , We gonna choose this option , and we're gonna say , Well , we say before , after it doesn't really matter .

We'll go for that .

So then you can just drop in the items you want to reference .

So let's just expand this out .

So the key is basically what we've got inside jet engine and our custom post type .

So things like our price address and so on .

So for this example , we'll just put price in there , which is what we want .

Then we're going to put price in for the label , and then we can use the value format , and we can just put the price or the pound sign inside .

There we can then add another item if you wanted to , and this time we'll just say bedrooms and we'll put the label of bedrooms and believe it is that to be honest and you can keep on adding if you want to and we'll date this now , we'll hop back over to our test page and refresh this and we'll do another search now for that New York property .

And you can see there's New York Heights .

The price of 50,000 bedrooms .

Four .

So you can see .

We can add this data inside there .

If you want this to be in line so you can see the price and the 50,000 or 500,000 is not quite .

We want it to be .

You can simply come in here , take out the label side of things , and we could just drop price inside here , and we'll just update this and that , then should put all that on the same line .

So it's just refresh .

Do a search for new and you see there's our price of 50,000 and so on .

So that's how you can add in the meta data to get feature rich Ajax results for your searches .

So that's pretty cool to see .

Now let's move on to those philtres .

OK , so the philtre set that .

I'm sure most people are interested in .

Finding out is what's called a hierarchical or dependent philtre set .

In other words , if we come back over to our test site , which I finished the original one just to show you the demo site , if we take a look our property type and property location , these are kind of dependent upon each other .

So once I choose property type and say , for example , house , then the value in the next one , the property location will change .

So you can see this is showing Cardiff which choose apartment .

This will show Dublin and London .

So this is the first kind of philtre that we're going to look at creating .

So let's just add a new philtre and we're just gonna call this property hierarchy just because it kind of makes sense to me .

But you can call it whatever you kind of want .

And we're just gonna call this for the labels and so on Hierarchy for each doesn't matter .

We're not going to show those anyway , the philtre type and this example is going to be a select option .

Is it hierarchical ?

Yes , it is .

So this just basically says these are going to be related to each other , and then we're gonna put the philtre hierarchy in .

So this is going to be where we start off in this example property type , Then the second one is property location .

And if you want to add a third item in and 1/4 item , you can do as long as that hierarchy makes sense .

So what we're gonna do , first of all , is add a new level in , and this one is going to first of all be our property type .

So at a label of property type , we put a place holder in and we're going to put in any just for the placeholder and then the tax on we're going to grab that from and this is the thing .

These are all coming from taxonomies .

So we're gonna just open that up and we're gonna come down and say property type at another level , and this one's gonna be the property location .

So this is the second level of our dependent options .

Any is going to be the placeholder again , and we're gonna do it this time is change the taxonomy .

And this time it's going to be property location .

That's it .

that's all we need to do .

If you want to add a third level , you just use another taxonomy and add that into the next level and so on and so forth .

So that's that side of things completed .

We can publish that philtre .

And before we go ahead and insert this into the design , let's create the other couple of philtres we're gonna be using just to kind of flesh out what we have here , which is the property price , the number of bedrooms , the square foot and so on .

And you could stack these up for number of garages , all those kinds of things .

But let's keep it simple and straightforward and learn the techniques .

And then you can expand this as and when you're ready .

OK , so let's add a new philtre , and this one is going to be our property price .

So , as before , let's just give this a name .

Philtre label and philtre active philtre are going to be the same property price .

What kind of philtre type is this ?

Well , if we look at our example , it's a slider option .

So what we're gonna do is we're going to just choose a range which allows us to set a range of values .

You can set your value prefix because we're dealing with money here .

We're going to put the pound sign in front of that .

But if you want to , you can do , you know , suffixes and prefixes and all those kinds of things we're going to put the 1000 separated in , which is going to be the comma .

In this example .

Decimal places are relevant .

Number of decimals .

We're gonna make sure that's set to zero our minimum value .

We're gonna set to something like , I don't know , 250,000 and our maximum value .

We're gonna set it to something like 2 million and then you can set your steps so you can set this up .

We're gonna set this in , like , £5000 increments .

So that's that side of things done .

The next thing we need to do is choose the query variable .

Now , if you're unsure what your query variable is , we're setting a range slider for the property price .

So if we hop over into our post types price , we open that up .

There's the name ID for that particular field that we're going to use to philtre against .

So we'll copy that head back over and just simply paste that inside there .

And that's the golden rule .

With this , you're saying what kind of philtre it is .

Even though you're putting the data in manually in this example for the range from the 250,000 , up to 2 million , you're still filtering against data that's inside your database from a custom field value custom field name in this example is price .

That's all you really doing in there with the query variable .

So that side of things done , we'll publish that option .

And now we're gonna add in another smart philtre .

So we're gonna add a new one .

In this time , we're gonna add in the option for the bedrooms .

So same as before , we're going to give this a name .

Philtre label active this one again is going to be a range .

So no different there value prefixes .

We don't need to worry about anything like that or 1000 separates and so on minimum value , because obviously every property is going to have at least one bedroom unless it's commercial and we point we're not actually covering that in this tutorial .

and a maximum value .

Well , we're going to say there's no more than 10 bedrooms and a step of one that's perfectly fine .

So our query variable again .

If we hop back over into our post types , take a look .

There's our bedrooms .

There's our name .

Stroke ID .

We'll copy that from there , Head back over , paste that into our query variable .

That's that side of things done .

Publish that one .

I'm gonna do one more .

So let's just add one more philtre in .

So let's just add new .

And this time we're going to do a square foot for the amount of area inside these properties .

So the same again Name philtre label active , blah , blah , blah .

You should be used to it by now .

Gonna come to range again .

So we're going to put in the suffix is going to be square foot and we're going to do then is we're going to say minimum value of zero .

Well , actually , that makes no sense .

Minimum value of 1000 and a maximum value in this example of 20,000 .

I'm sure you can get bigger and we'll set the step value of 100 and finally we just want the query variable so we'll just hop back over , find the square foot option for the size of the property .

Open that up , grab that name ID or back in it drop that into our query variable and hit publish .

And that's all of our philtres set up .

So if we take a look now , we've got five different philtres , including our search .

So let's take a look now at how we actually go and put that into our set up .

And then we can copy and paste that into the various different pages that need to reference this particular philtre set .

So we're gonna start off working on our home page .

It doesn't really matter where you start , not particularly relevant .

So don't worry too much about that , OK , so we need to do is just open up our navigator a second and we're going to add a new section in .

So let's just add a new section one column , one row , and we're gonna simply drag that into position , so that needs to go around over there .

There we go .

There's our set up .

So we need to do now is go ahead and start putting in the relevant pieces of filtering information .

So let's go ahead and do our hierarchical search .

So this is a select , so we're gonna do a search for select .

We drag and drop that into there , and now we can choose what select philtre we want .

So we're going to start typing in hierarchy and there we go , Oh , property hierarchy .

We'll select that option and you can see that now inserts it into there for us .

So now we can go ahead and configure this how we want .

So the first thing is select this philtre for expand that and you can see now our list , which I showed you in the settings of Jet Smart philtres and Jet Search , is a lot shorter and a lot smaller .

So we know this is going to be used in jet engine information , so we'll select that .

Leave it set as Ajax Value Change is fine , so this will update whenever you change your value .

So it's just dynamically updating the info on screen .

No buttons need to be clicked .

Show philtre label .

We're going to say yes , we want to put that inside there because then it makes a little bit more sense to the end user .

So with that being done , we can now go ahead and configure things .

So let's just hop over to our style set up .

We're going to set things inside here .

So our positions we're going to set the select width to be 400 pixels .

That's perfectly fine .

We can go through and select all the different parameters inside here .

So you can figure configure this .

However you want to labels .

For example , let's just make those a little bit dark .

Actually , let's leave those for a moment because we're going to style the entire thing , first of all anyway , so let's just hop into the group philtres option .

And in there we're gonna set this to be in a line , and you can see that now sets those out to be in a line .

I'm going to set these to be 300 pixels .

Let's just adjust that again .

So there you go .

So we're just basically setting these on screen .

There we go .

About 410 will do us perfectly fine , and then we can adjust things like the horizontal space , those kinds of cool things and vertical space so that's that side of things all done .

So before we move on to adding the extra philtres in , let's just make this look a little bit neat and tidy .

So let's select the entire section .

We're going to come up to advanced and we're gonna just add in some , like 50 pixels , a margin that padding .

Sorry , let's set a background colour on there just to make it look a little bit cooler .

So we'll set a background colour and we'll go for something like Let's go for our Blue Black .

That's cool .

I like that .

We're gonna put a border around this and we're gonna just say on a solid border , we're gonna set our border to be white .

No border radius .

I think that looks pretty cool .

And let's just close this down a little bit so we can see what we're working with .

And now we're going to push that up so it kind of sits over our header section .

So let's just do that by using some negative margins .

We'll set this .

Let's try about negative 1 50 probably a little bit too much .

Let's say 11 20 because we're gonna put some extra philtres under here anyway .

So now we can just go ahead and quickly adjust this .

So our labels , for example , they need to be white .

So let's just change that colour on there to be white , just a typography to make these just a little bit heavier .

I want to adjust the line height to give us a bit of breathing space .

There we go .

That looks pretty cool .

That's good .

OK , so next up , let's drop in the next philtres we want to apply .

So let's just come back over .

The next type of philtre is going to be a range philtre .

So we're going to just do a search for range and you can see this .

Our range philtre will drag and drop that underneath .

And we're going to do now is just choose what philtre we want .

So we're going to just do a search for Price .

There you go .

There's our property price select philtre for jet engine because that's where the data is coming from .

Show a philtre label so people know what the heck they're actually looking at .

And then we can go through and start styling things so again , like we did before , we can just simply come in and set up all our styling for the various different things .

So point out , everything looks particularly good on there to come to , for example , our values .

We need to set those to be white so people can see them as our values , and it's also make those just a little bit heavier .

So 400 go for 500 .

There we go .

We'll set those to be able to the left hand side .

I gonna go to our label and the same kind of thing there .

We're gonna set this to be white and adjust the font on there to be 500 we'll adjust the line height to give us a bit of breathing space around there .

That looks pretty good .

OK , so the next thing we want to do is just drop into advanced , and we're gonna use our widget stalker again , and we're gonna set this to be used in units and 33% so we can now stack three of these next to each other very , very quickly and easily .

So I'm gonna do that .

I'm gonna add in the next two , using exactly the same principle that I've just shown you on this and then we can test everything out .

There we go .

Everything is now in place and I can see that .

I need to probably push this up just a little bit more .

So let's just select this section .

Let's come back into our navigation .

So let's just open up the Navigator and select that section .

Here we go .

Let's just make this about 1 40 .

Let's try that .

Is that gonna work ?

That looks pretty good .

Let's go with that .

So we'll update that .

So we've now created our philtre set on our home page .

So let's just test this out to make sure everything is working as we'd expect .

OK , so we're on our test site .

There's our philtre and everything all in place .

And as you can see , there's all our six properties .

Obviously , we've only got six to test out , so let's just say we want to test things out , like with , for example , the property type .

We're gonna say we're interested in apartments and you see that now philtres it down to two different apartments .

We take a look at the property location .

They're only available in New York .

Let's try something like house , for example .

We can see that we've got two houses and if we just open the property available , you see that we've got Los Angeles and Miami .

So we choose Los Angeles .

You can see that .

Philtres it down to just that property .

However , if we come back to any we have , there's two properties .

So now we could say we're in , you know , only properties that are sub 1 million .

So we can just drop that down to say from there .

And as you can see now , we just get the £1 million house .

We can click and go and take a look at that one .

And everything else as we've set up previously , is all in place .

So you can see we've got the philtre set up .

We can fine tune and tweet this .

Add extra options in there if we want to .

But now we want to have that in all the different locations .

So we go to all properties , for example , we need to have that philtre inside there , so let's just go back over here .

We're going to just open up our navigator .

We're gonna choose our section and we're going to copy that .

So now we can come out of this and head back over into our templates , and we can just use that inside our templates come back into our theme builder and we're going to come into our property archive , which is There we go .

There's you go on property archive .

Let's edit that with Elemental .

Once we're inside there , we can just simply drop in that philtre so we'll just say We'll paste that inside there .

I just come to the bottom and paste that there's our philtre .

We can now just position that where we want .

That's our philtre in place .

We'll just update that , and we'll just pop over to our test site .

Refresh that template and there's our philtres all set up .

So again we can just philtre this out .

So this is all our properties .

We can say we're interested in loft departments and you see there's our loft department , so pretty cool .

Everything is all working the way we wanted to .

So that's how we set up our philtres , how we can apply them to the various different parts of our site and how we can make a really powerful philtre and search set up throughout our entire site .

For all the data that we're added in custom and otherwise , now we all want to know if a sales agent is good and having the ability to check out reviews is a great way to implement just that .

So let's see how we can use Jet reviews to do that right now .

So the last thing on our list to do is to add the reviews in for the agent so people can see how good they are and apply feedback if they want to .

To do that , we're gonna be using jet reviews .

So we're gonna come into jet reviews , and we're gonna say we want to add in a new review type .

So let's go to review types , we're gonna add new .

And from there we're just going to call this agent .

Reviews can add a field in , and this field is just basically going to be the review field .

So we're just gonna open this up , we're gonna put in the rating , and that's basically it .

You can set the kind of rating steps you want , so I'm not gonna do 1 to 100 .

I'm gonna do 1 to 5 , so they're gonna have a 1 to 5 star rating and we're gonna say add type , and that's really , really simple set up .

But that's what we really need for this example .

So that's our review type configured .

We now need to go and just add that in to First of all , allow them to be added and also to allow them to actually be viewed .

Before we can do that , we need to actually say where this review is going to be associated .

In other words , we want it to only apply to the agents and then also who can actually leave reviews .

So , for example , we're going to come into the option for settings and under settings .

We're gonna come into the post types and you can see we've got posts , pages , landing pages and our custom post type , which is agent and property .

We're only interested in agent .

Everything else is turned off anyway , So we're gonna come into agent and we're gonna say , Use the review for this post type .

We want that to happen .

Which review type do you want to use ?

We just created that review .

We'll open that up and there's our agent reviews allowed roles who can actually leave a review .

So we've got this set up for administrators and so on .

But we're gonna set this to also be allowed for guests .

Obviously , you'd put more care into how you'd set this up and who can leave sort of reviews and things like that .

But I just want to show you how easy it is to use this .

But you can also still put in verification and authentication before any reviews are posted .

So you avoid any junk and spam .

OK , so review author verification .

Just choose guest user on this .

That means that any guest has to be sort of confirmed first comment author verifications .

In other words , if you allow comments on there , this also has to be approved by an admin .

And then we've got the new review approval .

Absolutely .

We don't want anybody to start putting junk on there , and the other options allow comments .

If you don't want that , you can just have a review and no comments .

It's up to you , and we're gonna just check these options and just basically avoid having spam .

So we have to confirm anything before it goes put onto the site .

So with that being done , that's all been set up and configured .

We now need to go and do two things , add the review option to the agents and also put the listing item of the star ratings underneath the agent details .

Now all that information is going to be placed into one of the templates we created earlier , which is the default agent single post .

So we need to find that there you go default agent single .

We'll edit that with Elemental and that will give us all the information to bio and all those kinds of details we saw earlier .

So the first thing we want to do is to put in the ability to leave a review .

So let's just put in a heading first of all , so we'll just drop that underneath the bio .

We'll set this to be something like H six is not overly important .

And we're just gonna say agent reviews and what we're gonna do is we just make that a little bit more bold , something like that , and that'll do .

That's pretty good .

OK , so what we can do now is we can just grab the reviews option .

So we're gonna do a search and we'll search for reviews .

And what we're looking for is the reviews listing .

So we'll drag that underneath our heading and that will insert the reviews .

So we just need to set up some basic information , So the rating layout stars is perfectly fine .

The input we're going to set that to be stars as well .

Review rating type is details because we're not going to work on an average and reviews per page .

We're gonna set that to be five , for example .

So now you can come in and you can configure the icons and do what you want inside there .

You can do the same thing for labels , and you can set your styles for your colours and so on .

So I'm gonna leave all those as they are for now .

Only thing I'm gonna do is make sure we select the widget , come into advance , and we're gonna put a little bit of space around this , and we're gonna set a background colour just so it makes it look just a little bit separated from the rest of our design .

So let's just quickly apply the colours we want to use inside there .

Um , we're just gonna adjust the opacity on this bear with me .

Here we go .

Let's just adjust that down .

So it's quite subtle on there , and there we go .

We're just gonna update that page .

So that's inserted the ability now to leave reviews .

Next thing we're gonna do is actually show those reviews in stars .

So how do we do that ?

Well , we need to add the star rating , so let's just do that next .

Let's search for star rating .

There we go .

We gonna drag that ?

We're gonna put that underneath their details , So we're gonna drop that inside there .

Now , that's not going what I want .

So we just pull that down .

One more section .

There we go .

OK , so now we need to just set this up and configure it correctly .

So the rating scale 0 to 5 is perfectly fine , because we work in 0 to 5 stars .

Next up the rating .

Where's that data going to come from ?

Well , this is something we need to choose , so we're gonna use the dynamic tags , and from there we're gonna come down to jet reviews , and you can see average rating .

We're going to select that option and basically , that's all we need to do There .

You can change the icons if you want to .

You can use stars .

You could use buildings .

You could do whatever you actually wanted to .

You come into your style settings , and you can just configure things inside this if you want to change colours .

So we might say we want this to be an orange , for example .

Well , we can do that .

And that's basically it .

So we update this template , and now we can test this out by hopping over and taking a look at the actual page itself .

OK , so we're on to Brittany's page .

You can see there's the stars all greyed out because currently there is no rating associated with it .

And there's our agent reviews .

So I'm gonna write the review .

I'm just gonna put in there .

Wow , awesome .

I just say Brittany rocks and gonna give a five out of five stars .

That's great .

Gonna submit that review and see your review must be approved by a moderator .

So we've got that set up inside there so we don't have to worry about junk and spam .

You come back into our dashboard and go and take a look inside our jet reviews .

We can see inside there .

We've got one review and you can see we go to agent .

There's our one review , and if we go to all reviews , we'll see There's the review given the rating , who it's for the date and you can see is approve , edit or delete what we're gonna say approve , because obviously we want to make sure this is approved .

We'll come back over .

We'll refresh the page now and we'll see .

There's my review and you'll see Britain now gets a five star rating .

As simple as that , that's all there is to it .

But it's a great way of providing impact and information based upon , in this example an agent , and you can leave comments and all those kinds of things .

So pretty cool to see how you can add this in there purely option if you wanted to do it .

But I think it's a nice little touch .

We've set up a pretty comprehensive listing website , and we have one more job to do before wrapping things up .

Let's add in the ability to let our site visitors choose the property type they want to view and then have a nice little template to actually show them the details .

So to wrap up , let's just have a look at what we've gone ahead and created because we've covered a heck of a lot in this tutorial .

So this is our home page , where we've got our Ajax based search .

We've got our full filtering system on there .

We've got a custom listing for our properties .

We've got all the relevant details we want to display .

We can click to come and take a look at the actual property itself and have even more information inside there , including icon lists , all the details you want , the location and so on .

We can find out who exactly is actually selling this property .

We can also send them a message directly about the property .

We can take a look at the agents if you want to , and you can see there's the information about the agents we can click to go and view the listings , find out their star ratings , their buyout , the properties that they're actually selling .

And then we can click and go and take a look at the properties themselves all pretty cool .

The final thing I just want to quickly show you is how you can easily go and add in another level of menu structure to allow you to philtre through and see only the properties that are based upon that particular property type .

For example , condos , flats , those kinds of things .

So I'm into the menu structure , and the first thing we want to do is create a custom link , and this is just going to be the sort of placeholder , the parent for all the different types of properties .

So we're gonna put the hash symbol in there so it becomes a null link , and we're gonna do is we're gonna say property type .

We'll add that to our menu structure , and we'll just take that up and put that above view agents .

So now we can do is we can go into the property types and there's all our property types .

We'll select all of those .

Add those to our menu structure , and we'll just indent those underneath property types .

So I just quickly do that .

And there we go save our menu structure , and we'll just hop back over , then into our test site .

Refresh this , and once that's refreshed and finished , let's say that again .

Let's just test that out .

There we go .

There's our property types so you can see there's apartment , house , loft , apartment and so on .

So we go and take a look at apartment .

You can see this takes us into a template that isn't the template that we actually want to see .

So we just need to quickly create another template now that list our properties in the right way .

So let's just create a new template .

So again , this is going to be an archive .

We select archive , and we're gonna do is we'll add new archives fine .

And we're just gonna call this default property type archive , create our template , and what we'll do then , once we've created our template is I already copied the header section , so I'm going to just paste that in for speed so past that inside there .

And obviously you can add in the philtres and those kinds of things and the sorts and those kinds of cool things .

I'm not going to worry about that too much .

I just want to quickly show you how you can do this .

So we're gonna do listing Gonna drop that inside there .

We'll just expand this out .

Just give us a little bit of space above and below , select our listing .

And from there we're gonna choose listing , and we're gonna do property .

There you go .

So property listing so we need to do now is just quickly configure anything else we want on here .

So we'll just set this to be lazy load eco column Height load more and we're gonna say infinite scroll is perfectly fine , but you'll notice that this is still showing all of the properties , which isn't what we want .

We want this to just show the property under the specified property type to do that is really , really easy , but easily overlooked .

All you need to do it says use as archive template enable that and you can see it kind of takes out the information you expect to see and just kind of prefills it out with just some text .

That's a post .

That's perfectly fine .

All we need to do is save the condition .

So save your template , add a condition in , and we're gonna just set this up to be property type underneath property archive , and we're gonna set this to be your So , in other words , this is going to be the template that is going to be used just for the property type .

And it's gonna show every one of the property types that's all you gotta do save and close update or save whatever you need to do .

And what we can do is we can hop over to the test site and take a look at this in action so onto our home page .

And there's our property types underneath there there's our apartment house and so on .

So let's try loft apartment and we'll go to that and you can see that's just showing us only the loft apartment .

Come back into apartments and you can see that now shows us all the apartments .

The same goes if we come in and we choose house , it'll show us all the houses and then , like before , we can click and go through and take a look .

Now , obviously , there's so much more you can do with this .

You can apply a different philtre set to this if you wanted to , so you can philtre based upon price and those kinds of things , but not the property type , because obviously you're looking at a property section .

But I'm not gonna just repeat what I've already shown you .

You can enable that Set things up yourself .

Hopefully , what you can do , though , is you can take all the skills and knowledge you've covered in this video , and you can then start to apply those to flesh this out even further .

OK , it's fair to say this has been a monster of a master class , but if you're still hungry for more , we'll take a look at the playlist that's on screen right now to dive deeper into what can be done with jet engine .

As always , all of the applicable links are in the description below .

And if you found this video useful , I'd really appreciate it if you could give it a thumbs up and also consider subscribing and hit the bell icon .

But if you didn't find value well , feel free to hit the thumbs down button twice as that worked pretty well , too sporty .

This is WP and until next time , take care