EASY Bi-Directional Relationships in Oxygen with Metabox!

all right guys so i'm kind of officially making the switch over to metabox i mentioned a while back that i wanted to make the switch to metabox for a long time metabox obviously is a replacement for advanced custom fields custom post type ui and because i do a lot of work with bi-directional relationships another plug-in called acf post to post which offered bi-directional relationship functionality but wasn't a super clean implementation of it and so metabox being an all-in-one system it's you're able to create custom post types you're able to create advanced custom field and you're able to create bi-directional relationships all in the same plug-in that just really really appealed to me the problem was that there wasn't a direct oxygen integration but now with oxygen 3.9 alpha 1 and very soon i you know i'm confident that there's going to be an official release we do have the direct metabox integration and so i've been playing around with metabox more lately i'm really enjoying it and recently i i decided to to see you know how clean is the bi-directional relationships um functionality is it is it easy to use is it easy to query inside of the oxygen builder in a repeater i don't want to have to use metabox views if you're familiar with metabox i wanted to be able to do everything through the repeater through dynamic data and so on the answer is it's very clean and it's very easy if you've never done it before you might get stuck in a few places which is why i'm doing this tutorial so we're going to go through it right now i'm going to show you how to query metabox related posts inside of the repeater using the advanced query builder and um yeah so let's go ahead and uh let's go ahead and do it so here is let me make this a little bigger cool all right that should be good uh let me sorry let me go back and check where are we okay uh hang on i just gotta zoom to app okay all right good it's all it's all good okay so the way that we're gonna do this is um reviews related to services so if you think about a business has multiple different services and people leave reviews well they leave reviews for the specific service that they had done and if you're doing a marketing website and somebody's reading about a specific service you don't want to just show like random reviews you want to show reviews related to that specific service so i've already created the services custom post type and we're going to put some sample services in here and then what we're also going to do is create a reviews custom post type the reviews are then going to be related to the services and we're doing this in meta box and i i just released a tutorial doing something similar in acf and then i have obviously you know premium trainings inside the inner circle that go over relationships but i'm realizing now that we're just gonna have to do this all uh in meta box now so we're gonna have to create new tutorials and i'm gonna be doing a bunch of meta box tutorials for free on youtube advanced ones in the inner circle but i want to start with this just to kind of show you guys and i know this is something now that people are going to be searching uh a lot for uh so i want to put it on youtube all right let's go ahead and create some services so we're gonna do service number one and we're gonna publish we're actually only gonna do two services really we don't we don't need to load up with a lot of different services so this will be service number two and let me go to lorem real quick there is a i did create a service description box i already did this in meta box uh with the services um but i will walk you through how to do it with the reviews side of things from start to finish that way you won't be lost uh service number one i'm gonna put the service description in down there okay so i've got service number one and service number two so now we're gonna have three reviews for each service all right so what we need to do is in meta box we need to go to post types we need to create a new post type you can see the one i created for services right there this new post type is going to be called reviews and review okay and by default metabox makes the slug the singular version by the way um i would prefer if it was the plural version by default but it really doesn't matter just take that into account because when we get to the repeater and querying we're gonna need to remember that okay so it's the singular review what i like about metabox is that it it automatically does all the labels for you whereas in acf you have to click a little link to do it and then it adds it'll say like my add my review or something like you gotta delete the word my it's like three extra clicks in acf whereas in meta box it's just already done for you um so that's really awesome another awesome thing about metabox is it has all the icons here for you to choose from in acf you have to click a link you got to go to a page you got to find a class name for the icon you want to use you got to come back you got to paste it in metabox has it right here for you so that makes it so much easier so it's just a lot more efficient really and it also puts all these things in tabs so it's not one gigantic page that you're scrolling up and down on to find what you are looking for all right so reviews is done i hit publish and there we go there's my reviews custom post type very very simple right and now in and that would sorry that would not have been done in acf um the old way that would have been done in the plug-in custom post type ui which has those issues that i just mentioned sorry i attributed those issues to acf uh they're really attributed to custom post type ui that that free plugin um this is the part the custom fields part that you would do in acf and so when i go to custom fields i'm gonna hit add new and we're gonna add a new field group this uh works very similar to acf so this is going to be called reviews and then i'm adding fields to the reviews here the only difference is that there's tabs here versus acf it's all one page so if i click on settings i can assign this to the reviews right here um so i'm going to go back now that that's assigned i'm going to go ahead and add my fields and we're just going to use the post name the review name default field i'm not gonna create an extra one just for the purposes of this tutorial i want to be as clean as possible uh but we will do like review text so i'm gonna go text area and the label is gonna be review text and yeah text area i'm not going to make it required all right advanced uh there's really nothing here that you need to worry about too much okay so let's hit publish let's go to reviews and let's add a review and then this is going to be called service number one review this when we query this this is going to make it easy for us to see that what we've queried is correct so here's service number one review and then here's service number one uh review text down here there's that custom field so i'm gonna go ahead and hit publish and then i'm gonna go to service number one review number two or i'll do like another another service number one review just to make that different publish all right and then we need a last review remember i said we're gonna do three reviews for each service okay uh last review number one review okay our last service number one review all right and then we paste that and then we hit publish publish then we go back now we need our service number two reviews so we're gonna add service number two review and we're gonna paste that in there we'll go back and then we'll do another service another service another review of service number two let's do it that way all right and then we'll go back and then we will do final service number to review paste that in there publish okay uh uh yeah did i do or did i sorry i can't remember if i pasted it in on the service two nope i didn't okay paste in that so that has a description okay so we have our services and we have our reviews now what we have to do is we have to create the relationship between the two so in meta box remember this is an all-in-one system this was not possible in acf you had to have another plug-in we're going to go to relationships we're going to create new relationship and this is going to be services to reviews all right this is the confusing part you want this to be you would think that this would be a reciprocal relationship to make it bi-directional that that's not the case all of these relationships are bi-directional by default you do not click the reciprocal relationship box so i was clicking this initially in my testing and and um i was like why can't i like you should be able to go to reviews and see related services or go to services and see related reviews and that wasn't happening and i couldn't figure out why it's this really it's this reciprocal relationship box you actually leave this unchecked okay so that's uh quirk number one i won't call it a quark because it's that's by design it's not like it's a uh an error or anything um but just don't don't check that box all right so next is it's saying from to okay and even though it's saying from and to it's bidirectional by default so you can put these in either order and it's going to work so post type it's going to be review and service and then empty message is you can leave that blank as far as i'm concerned we're not going to talk about all of the different options here we're just going to get this working next i'm going to come over to uh field this is another thing okay and in fact i'm not going to do this step because i want to show you something all right so uh i think that's all we need to do to set it up the relationship id is going to be services reviews which it would have done that by default anyway i'm gonna hit publish and then let's just go take a look so if i go to my services i go to service one on the right hand side over here there's gonna be connected from and it's going to show me all the reviews right so that that works now if we go to reviews it should show me all the services we're just going to see if this is set up properly so here's a review and i can connect it to a service right so you see that so that's very very easy and that's where i got that that's what i set up when i was doing my testing and i'm running into an issue i know how to fix the issue i'm purposefully leaving it broken because i want to show you what's going on all right so in oxygen we're going to go to templates and we're going to add a new template and we're going to go to services we're going to assign this to the services post type and we're going to hit publish all right i'm going to edit with oxygen now it's going to bring up the builder this is alpha 1 for oxygen 3.9 so it should load a little bit faster uh we'll see okay maybe not uh yeah i don't want to edit this video so we're just going to awkwardly sit here and wait for the builder to load all right i'm going to leave the service open i don't need location tab there we go all right so i'm going to add a section notice we're previewing service number two so i'm gonna add a div i'm gonna add a grid i'm gonna add a gap in the grid i'm gonna add a div and a div perfect um i'm gonna add a heading and this heading is gonna be this the post title which is just service number two and then i'm gonna add text here below that i'm gonna add out some owl spacing let's let's do s on this okay this would be the service description so now we have when you're using metabox and you're doing dynamic data you can click metabox field service description and then insert so that's going to insert the service description i also want to stretch this okay so over here on the right hand side is where i want to have the reviews for service number two um this isn't really how i would typically well uh yeah i don't know why why are we doing it this way let's just let's just do this we're gonna bring this out here okay perfect all right let's do center all okay and let's do owl s let's do owl m okay and then what i will do here is add a div um actually we'll just we'll just add the repeater so i'm going to wrap this with a div failed to execute command cannot set property undefined why why that wouldn't make any sense okay let's add a div let's add a heading let's add text let's do this again real quick i don't know what that error was we're going to center all we're going to insert the title we're going to insert the service description okay we'll go back to ls perfect and now we'll add our repeater okay and then on our repeater what we'll do is grid three and gap m okay perfect so we're gonna go div div div oh wait no i don't need to add a bunch of divs what am i doing this is on the repeater okay so there's our first div it took off my grid three class i think okay uh so there's our div let's go to oh wait oh i put a div inside the div it's still messing still messing with me okay uh all right so on our repeater now we need a query so we're gonna query click advanced edit query this is the advanced query builder and uh that's been around since like 3.8 or 3.7 i can't remember so we're going to add a query parameter and this is going to be the post type remember we're trying to query reviews so i'm going to go to post type and i'm going to select it add value and then review remember i said it's the singular version okay so we're going to query reviews now just to show you we're going to apply query parameters here there are one two three four five six reviews it's showing seven boxes but that's just because one is the default so it is querying six reviews properly and we can actually see here i'm going to do pad m on this and then i'm going to do heading actually we don't need heading we just need review text all right perfect and i'm going to go to vertical left on this all right so we can insert data meta box review text and that should insert the review text and then oh we do need to query a heading because i want to make sure that we can see which one it's related to so i'm going to do post title did that just break again insert data post title there we go okay let's drag this above that let's make this an h3 and then let's make this text small text small there we go perfect all right i feel i feel like it put something else in there or is there owl spacing on this no all right let's look let's see what it looks like on the front end okay it looks correct on the front end it's just showing me nonsense in the builder uh let's do ls on this save check it again okay so we see we have all of our reviews queried so now we have to do the relationships side of it so remember we just want to show relation uh reviews that are related to service number two uh we haven't haven't actually created the relationships yet we created the relationships functionality but we didn't relate any reviews to services so what i'm going to do is go in the back end so i'm doing this a little out of order because i'm trying to show you like problems you might run into as well as how to actually do this all right so if i'm going to go to service number two i want to choose the reviews that are related to service number two so over here i'm gonna select service number two review i'm gonna hit the add more button that's going to let me add another one another review of service number two and then a final service number two review so those are the three reviews that i wrote for service number two and i'm relating them here on service number two you could also go to each of those reviews and relate it back to the service page because it's bi-directional and i'll show you that right now so i'm gonna hit update and if i go back to reviews and i choose one of the service number two reviews you're gonna see that it's connected to service number two um so that's all working that's fantastic we still have a problem though so i'm gonna save our work here and i'm gonna refresh the builder and i'm gonna show you that you will not be able to query based on that relationship because we forgot a step and it's a step that um it's just like i said in the beginning if you haven't done this before you wouldn't think that this would break the functionality but it does so i'm gonna go to query advanced uh edit query so post type review the way that you do relationships is with the post in query so you post in right there add value you hit data and you should be able to hit meta box and there should be the relationship options in this panel but obviously they're not there so this is where i got stuck for a while i had to do a bunch of research and do some poking around so i'm going to hit save and we're going to go back to where we set up in meta box the relationships i'm going to click on services reviews and it's going to load it and i'm going to go into the field tab all right so remember this is for the review so under label i'm going to say related reviews and then down here under the field tab i'm going to say related services guys just filling out this label field is what or like not filling that label field out is what breaks what i just showed you in the advanced query builder so when i hit update now suddenly i'm going to have the options to to insert the based on that relationship so i'm going to refresh the builder once again and this time when i go to create that post in relationship it's magically going to show me so not having labels on your relationships and by the way i'll show you what that actually does while the builder loads so when i go to reviews and i click on final service to review it puts this little thing there so it shows you the related services uh instead of just saying connected to it actually has this little heading now that says related services which is helpful but it's super important because without that label you won't be able to actually do the query in the repeater all right so we go now to the repeater and we hit query edit query so post in data meta box field there they are again like i said you wouldn't think that not having a label would break the whole functionality here for querying but it does um so i'm going to query related reviews and now you're met with another thing where i'm like okay separator separator i tried it up here because multiple post objects well there are multiple post objects but if you put the comma here it will break your repeater if you put the comma down here your repeater will work if you put no commas it will break your repeater so you put the comma down here and then you want to do post object id and then i can also do like you know typical stuff like no found rows equals true to get rid of page and nation you can do sorting and other kinds of filtering but i'm just showing you that the functionality works so we're going to hit uh apply query parameters save and then look at the front end there's your relationship so i'm on the service to page showing only reviews related to service number two now uh by default if i just go relate the service number one reviews to service number one the same thing will happen when i go to the service number one page but i wanted to show you those little quirks of like if you don't have a label it's gonna break where do you put the comma so it doesn't break uh and just kind of a quick overview of how to create a custom post type in meta box how to create the relationships functionality in meta box remember that that reciprocal check check box that you have to leave unchecked that was a super important step so this should get you well on your way to using more custom post types making sure that you can do bi-directional relationships because those are super powerful if you build business websites super super powerful use this relationships uh bi-directional relationships functionality i use it all the time and so many different use cases so that's it i hope you guys found this helpful drop a comment drop a like let me know your thoughts if you have any other tips uh for metabox i'm you know full transparency i'm just now getting used to uh using metabox i've been using it for about uh five minutes now uh that's what it feels like anyway back to camera um yeah so if you you know let me know what you think of meta if you've used metabox on production sites with oxygen i want to know your thoughts if there's any like deal breakers that you feel that metabox has let me know them now because i'm getting ready to use metabox on some production sites i'm putting it through its paces doing some real world stuff with it uh but if there's anything i should know about metabox then definitely let me know now all right that's it for me i'm gonna go watch some football peace

Channel: Digital Ambition

Views: 2,519

Keywords:

Id: D1h5stQdW6c

Length: 22min 46sec (1366 seconds)

Published: Sat Sep 11 2021