How to set up database relationships | JetEngine from A to Z course

now if there's one topic that strikes fear into many jet engine users it's relationships no i'm not talking about personal relationships but database relationships one to one one to many many to many type relationships but they needn't be scary at all and in this introduction video i'll show you how to create your first relationship how to add the data to your listings and finally how to insert them into your templates now while this is an introductory guide if you'd like to see more examples of types of jet engine relationships let me know in the comments section below and i'm sure i can work with croco block to create some more advanced guides for you but before we start let me just quickly introduce myself my name is paul c from wp tets and i'm here working with croco block to bring you a series of tutorials on their popular dynamic tools plugins like jet engine and jet smart filters now if you're ready to start learning let's just jump over onto the computer and see what we were working on today [Music] as always let's kick this off by taking a look at what we're actually going to be creating throughout this guide so we're back onto my test site which you've probably seen in the previous videos and if we scroll down there's the list of properties now any of the properties can be rented out by a specific agent that agency or agent is linked through dynamically through a relationship between the agent and the property now one agent could be an agent for multiple properties and that's what we're going to look at today creating a one-to-many relationship so let me just demonstrate what i'm talking about this is a first property we click and open that up take a look on the right hand side we scroll down we've got an agency contact and this is the agent that's renting this property so if we come back out and take a look at a different property for example edinburgh heights we'll open that up and we have a different agent inside there if we come back out again and take a look at something like luxury poolside apartments hopefully we'll have a different agent again and there we go we've got williams properties so this is all set up through a one-to-many relationship so basically one agent can manage multiple properties and that's what we're going to work on so let's take a look at how we go about creating this relationship now to start off with i've already created a properties custom post type now i've done this in previous videos so you can see this is what we're starting off with this is what we've used in several of these videos on dealing with the dynamic plugins for jet engine and so on so what we're going to do is let's take a look at what's inside there you can see we've got the featured image we've got a gallery associated with it the address the kinds of things you'd expect to do as a typical custom post type especially when you're working with listings but what i want to do now is link this through to the actual vendor itself the people that are going to be renting these properties out so how do we go about doing that well it's quite simple we need to create another custom post type which we're then going to link together by using a relationship jumping back over to the dashboard we're now ready to start setting things up so i've already created my custom post type for my properties like i've already said so the next thing we need to do is create one for our vendor or agent to do that we're going to come back to jet engine and go back into post types there's our properties we're now going to add a new one in and we're just going to call this agency we can click underneath that will create the post types like for us we don't worry about the labels we can leave those as they are but if you wanted to customize those you could do that advanced settings we're going to come into here and we're going to do is make sure that everything is set at the way we need it to be so we could set this as hierarchical if we wanted to but we don't need to because we're going to keep this structure really simple it's just going to be a single level then we're going to come in and we're going to say we want to add one extra field inside here and we want that to be the thumbnail so we could put the logo or the person's photograph whatever you wanted to do now once we've done that the next thing we're going to do is just add in a couple of metaphiles this example is going to be fairly simple but the principle is more important than the specifics we're covering in this particular video so we're going to do now is going to call this agent telephone i click underneath there we go we leave all those other settings as they are that's fine we're going to close that up we're going to add another meta field in and we're just going to call this agent email and click underneath and that's perfectly fine as well so we'll leave those as they are okay so that's the basics done we'll add our custom post type and then when we come back into our post types we've now got two so if we look at these we need to make sure we understand one simple thing the relationship between these two custom post types so for example one agent could have multiple properties and that's the way we're going to work we're going to work with a one-to-many relationship but you're not limited to that you could do one-to-one many-to-many or one-to-many but the principles like i say once you understand how this works it is a lot easier than it may first seem so the custom post has created we now need to create or define that relationship between the two of them now to do that we come over to the relations option under the jet engine menu and inside there we have a list of any or all of the post relations that we've created click add new and from there we can now set up the basics that we need for this particular relationship so the first thing you want to do is create a name now i would recommend that you create a name that immediately defines exactly what's going on so we're just going to say agent to property relation that just means when i'm looking through my list of relations i can see exactly what relates to what next up we've got the parent post type and the child post type now this is should be self-explanatory the parent in this example the agent would then have child entities or child post types which would be the properties so to do that we change the parent post type and from there we have all the options available and we're going to come down to agency which is the custom post that we've just created next the children of agency is going to be the properties so we'll choose properties from there so that's the first three sections set up and hopefully that makes sense so far next up we've got a relationship type now if you don't understand how these relationships work there is a link through to the help documentation but let me just quickly say how it works one-to-one means that one agent could only be connected to one property next up we've got one-to-many so you've got one agency or one agent could have multiple properties so the relationship will be a one to many and finally you've got many to many which means that multiple agents could be linked to multiple properties so if you had an agency or you had properties that were being managed by multiple agencies and you wanted to list all those multiple agencies you set a many-to-many the example we're going to do is going to have one agency with multiple properties so that's going to be a one-to-many then you've got the parent relation now most of the time nothing's going to be available to you inside you but from time to time you will see some options we're going to leave that as it is for this example because i don't want to get too complex and too deep into the whole process i want to give you more of an overview of the basics of how this works so then we've got advanced settings and all this really means is do you want to give the child and the parent the ability to link to the opposite so in other words underneath a parent post type so you could be working with an agent you could then link those through inside that custom post type to the different properties and conversely you can then be editing or creating a property and you could link that through to the agent that's associated with it for this example having the two-way option makes life a little easier because it doesn't matter which way we're working we can create that relational link with that being said we've now set everything we need up we're going to click on add relation and that will be a relationship created now before we move on to the next step what we need to do now is just create a couple of agents so we have something to work within our relationship so we're going to do is come into the agency section and we're going to come and add new now i'm going to show you every single one of these i just want to quickly show you how the relationship works in this context and we also take a quick look at the relationship and how that works in the context of creating properties but let me just show you what we've got to start off with so we're going to just say we're going to call this agent a and from there we're going to just drop in some content just some basic placeholder text we'll drop in a telephone number so we'll just put in something doesn't really matter what it is and an email address the same again there we go we'll set a featured image so we've got someone inside there we can link this through to so we've got an image to work with and then this is where the relationship comes in because at the moment we've created an agent we've got properties linked up we've got properties created but no link no relationship between the two so what we need to do is just start typing inside here so we'll just say edinburgh as for example you can see there's edinburgh heights i'll click to add that one in so now we've created an agent we've also created that relationship between this particular agent agent a and this property edinburgh heights so once we publish that we've now created our first agent and i'll first link through so i'm going to quickly go through and add a few more in there but before i do let me just jump over to the properties and show you the same thing in reverse so this is linked through to edinburgh heights let's come over to our properties and we'll just take a look at edinburgh heights inside there so there it is we're going to click to open that up and you can see if we scroll down now there's our select agency and you can see agent a is selected inside there so it's very easy whichever way you want to work this is going to link through to that relevant data so it's going to go ahead now and set up a couple more agents and then we'll take a look at the next stage in working with this particular project so now we've got three agencies all linked up to the relevant properties so the next thing you need to do now is create the way of actually outputting the data for a particular agency and then put that into the template for our single property template now to do that we need to create a new listing to do that we just come to jet engine and into listings and from there we can create our new listing so let's select add new and we're going to set up the parameters now for this so the listing source it's a custom post type so the listing source is post but you can see we do have other options available the next step is from post type where do we want to actually pull the data from so for this example we want to come down and choose agency then we're going to give this a name so we're just going to call this agency property listing we can then choose what we want to use to actually create this listing we've got a choice between elementor and gutenberg if you're using gutenberg we're going to stick to elementor for this example and we're going to click create listing that's going to take us over into elementor and we can start setting things up so the first thing i want to do is just make sure that we've got the right data being pulled in so we're going to scroll down to the bottom and we're going to come down to settings and inside there we've got the listing settings option click to expand that out and you can see because we set this up when we created the listing the first two options are correct listing source is a post and where we're getting that post type is agency what i want to set though is the preview width because this is going to sit in the right hand column it's not very wide i want to set it up so when i create in this listing it gives me a better chance of seeing how it's going to look when we actually insert this into the design so i'm going to set this to somewhere around 350 pixels doesn't have to be perfect but close enough is going to give us a good starting point you could then make the listing clickable if you wanted to and if you enable that you can choose where do you want to actually have that link created from so in other words we can choose from permalink and a pile of other options permalink would just basically take you over to the listing for the agent but we're not going to worry about that we want to keep this simple but like i say if you'd like to see a more comprehensive tutorial on working with more advanced relationships let me know in the comment section below and i can take a look at creating something in the future covering more advanced relationships for now let's keep this simple to get the concept sort of fixed in your brains so you understand where we're going with all of this okay so now we've done that the next thing we need to do is start creating the different widgets and dropping all the different elements into our design let's head back to our widgets and start pulling all the data in so let's scroll right the way down to the bottom until we get to the option for listing elements now these are all to do with jet engine and this is how we're going to use these different tools to make sure we've got the best chance of pulling all the data in and doing all the things we need whilst taking inside jet engine so the first you want to do is pull in the featured image of the agent that we're dealing with so we're going to drag and drop dynamic image over onto our page and you can see that now immediately pulls in the post thumbnail in this example that's perfectly fine that's exactly what we want so next up we're going to just set some alignment parameters on there do we want this to be a linked image so again you could set this up to link through to a permalink so you could take a look at the agency or the agent that's related in this particular section we're going to leave it as it is though image size we're going to set this to be something like medium for example that looks okay and obviously you can come back and you can edit this if you find the images are not high enough quality so there's the first thing let's come back down now and we're going to come back to our widgets and this time we're going to pull in a dynamic field it's going to drag and drop that into there and you can see this pulls in what it thinks is the right thing the title in other words the name of this particular agent or agency and again that is perfectly fine we're going to work with that to speed things up though let's just duplicate this and then underneath there we can now set any parameters we want so this time we want to put in some of the custom fields that we've created so we're going to come to the source and you can see at the moment it says post term user object going to change that to metadata now metadata will allow you to easily reference any meta fields that you've created as part of your custom post type or if you just created custom meta fields as part of a normal post type you could reference those using the same technique so we're going to choose metadata underneath that the meta fields so we can now pick and choose what matter field we want to reference click to expand that you'll see all of the different meta fields we've got created across all of our different custom post types and meta fields custom metaphors and so on are all listed inside you thankfully they're all also sorted out by basically the custom poster where the data is being pulled from so you can see under agency we've got agency telephone agency email and related properties we're just going to simply choose agent telephone and that will drop in the telephone number so now if you want to format this and put extra data into it we can come down to the customized field output enable that we can do is now we can put something before it so we're just going to simply put in tell and a colon and a space so people would know that's the phone number but you could put pretty much anything inside you including html next up we're going to duplicate that another time and we're going to do this time is drop in the email so again metadata is perfectly fine this time we're just going to change this over now to the agent email coming down we're going to change this over to email one of the cool things i like about this is we can also filter the field output so let's enable that and the callback might sound a bit confusing but what it really means is how do you want to actually output this data so we're going to click on there and you can see we're going to say make clickable you can enable that you can see that now pulls this in and if we mouse over it that will now become a link which we could immediately use as a mail to now obviously you could get a lot more creative with this you can have this link through and you can have a contact form that pulls in the relevant email address loads of really creative things but that's more a case of dealing with creating custom listings and it is about creating custom relationships so let's keep this really really simple okay so we're going to say we're happy with the way that all looks all we're going to do now is hit publish once we've done that that's now created our listing item so we're now ready to move on to the next stage now with our custom listing created we're ready to go ahead and put this data into our template to do that we're going to come to the template section for elementor and down into our theme builder from our theme builder we're going to open up the property single edit with that with elementor and then we're going to create that relationship and drop the data into it now to do this i've already created a placeholder so if i scroll down you can see we've got agency contact so we need to do is just do a search for listing and that will pull up our listing grid so we're going to drag and drop that into this section on the right hand side and you see it now says please select a listing to show so we come to the left hand column you can see listing is the first option of the general tab let's click on there and we're just going to come and choose what we want which is going to be the agency property listing click on there and that'll just pull in all of the relevant data so this is just going to display all of our agents we're going to set the column to be one and you see that's using the template we just created but pulling all the data in which obviously is not what we want in this example we only want to display the one that's actually related with this particular property so how do we go about doing that we need to create a custom query now this is the point that probably causes the most confusion and frustration for anybody that's not really sure how to work with creating these relations and then outputting that data so what we need to do is come over to the post query section on the left hand side we're going to open that up now we can set advanced query parameters inside here so we're going to add our first item so our first item we can then choose the type from there we've got five different options currently we're going to choose the post and author parameters because what we need to happen is basically when you take a look at a property you've got a unique identifier for that particular property so we're going to take that query that displays the information on the page and we're then going to link that through the relationship to the agent that's actually associated with that property so we can't just drop in a meta field or something we need to create a short code that tells it exactly how to reference that data and what we want to do now that sounds complicated but the reality is once you see how this little string of code is made up and you can copy and paste it and then just edit what you need it really isn't as complex as it may first seem so first of all we need the starting template for this little bit of code now the link for this will be in the description below so check that out so you don't have to copy in exactly what i'm typing in right now so if we take a look at the knowledge base for this particular function you can see this paste the macros and there's two kinds of macros there's the related children from and then there's the related parents from and then you've got post type slug now this is where the confusion really does tend to come in when you say post type slug you thinking am i just copying this and just putting it in exactly as it's done there reality is no you don't what you need is you need to know what the actual slugs for your custom post types actually are specifically the ones inside the relationship so let me show you what i'm talking about we come back over to our custom post list we've got agency and properties then there's the post type slug we've got agency and properties so that's what we need to use to actually tell this little short code where the data is inside the relationship so in other words let's just take a look at actually using this in context now because a property is a child of a parent in other words the property is the child of the agent which is the parent we're going to need to take this second short code which is related parents from and then we're going to say where we want to grab it from so we're going to copy that little bit of code and we seem to come back over into elementor we're going to drop that include post by ids i'm going to drop that inside there now you might think that's all you got to do and you can see no data was found that's because this is not what we need to happen we've got to change the second half after the little pipe symbol which says post type slug to the slug from our custom property type just come back over to the listing and you can see there's our post type slugs agency and properties we're simply gonna grab the name of the parent in this example agency so we're gonna select that copy it and come back over into our template we're then simply going to replace where it says post type slug making sure that it's after the little pipe symbol and before the percentage symbol and we're going to paste that inside there so we're now saying related parents from agency in other words it's going to look for the related parents from the agency custom post type and you see that immediately now pulls in the relevant data for this particular sample data we have on screen for the relevant agent and that's how we create that link so you can now set any other parameters if you wanted to so if you had multiple agents inside there you may want to set up additional parameters using a range of different things like for example sorts and things like that but we've created now that relationship between the property and also the agent associated with it let's update this let's take a look at our actual site itself and see this in action so back on our sample page and if we scroll down we take a look at the first one which is the industry way we'll click and open that up and then you can see there's our option for agency contact and you can see it's windham rentals we come back out of there and we go to another one hopefully i'll get a different one this time and you can see there we go william's properties and if we scroll down to something like for example let's try edinburgh heights you can see that gives us agent a so we've now created that relationship we've integrated that into our templating we've created custom listings all those kinds of super cool things are all set up for us now and hopefully what you've seen is well yes there's a bit of a learning curve to understanding these short codes and to be honest this is another one those areas that i think really needs to be expanded upon quite considerably to get a good solid understanding hopefully this video has given you at least your first steps to getting comfortable with working with relationships and seeing how important these macros or short codes or whatever you want to call them actually are in the whole process of creating these relationships but like i said earlier in this video if you'd like to see more comprehensive relationships covered in another dedicated tutorial let me know in the comment section below and i'm sure the guys over a croco block would be happy for me to create some more content showing you how to do just that so that's jet engine relationships in pretty much a nutshell now while this is a fairly simplistic example the skills and techniques covered are way more important once you get the grips with the fundamental skills you can get much much more creative now as always all the applicable links for everything i've covered are in the description below my name is paul c and until next time take care

Channel: Crocoblock

Views: 21,561

Keywords: сrocoblock, crocoblock tutorial, crocoblock elementor, crocoblock plugins, wptuts elementor, wptuts jet engine, paul charlton elementor, relationship posts, jetengine plugin, jet engine relationships, jetengine for elementor, jet engine elementor, jet engine wordpress, jetengine listing, listing grid jet engine, listing grid elementor, query parameters for post, query parameters wordpress, metafields, meta fields in wordpress, crocoblock

Id: xUwQRATLQSs

Length: 23min 22sec (1402 seconds)

Published: Thu Aug 13 2020