How To Use Meta Box Bi-Direction Relationship in Oxygen Builder

[Music] hey everyone welcome to the next tutorial in our last one we built out this testimonial page pulling in data from our meta boxes custom fields and custom post type and what we're going to do today is take our testimonials and build out a relationship with our custom post type services so you see i have a services archive here um and a service page built again i'm using metalbox to build out my custom post type and using custom fields from metabox to pull in my data here we can take a quick look at our service in the back end so i added a text field for our title i did a text area for our service snippet i did a what you see is what you get field for our service description and then i use image advanced for service gallery i put in a taxonomy called services and i have a featured image over on the right hand side and that's what we use to pull in on our service here so you can see we have our gallery here that light boxes just like we did in our previous video as well so let's go ahead and dive into actually building out the relationship so to start with that what i'm going to do is jump over to our dashboard here we're going to go to meta box and relationships you can see i have one in here but we're going to go ahead and set up a brand new one so as a default you can see that this reciprocal relationship checkbox is not checked and we want to make sure we leave that unchecked it's kind of deceiving you'd think that you would want that checked but what that works for is if you want wanted to go um from an actual post to a post so you're doing the exact same type or if we're going from service to service or testimonial to testimonial but in this case we are going from service to testimonial so we are going to leave that out so i'm going to go ahead and type title this as service to testimonial for my object type we're choosing post here otherwise you can do term or user but we want post and our post type is going to be services so just go ahead and select that you can choose to put in an empty message we can do choose a service in our to field again we're just going to change our post type to testimonial and again we can type in choose a testimonial now let's jump into our other settings here so in our meta box i'm not going to change anything here for both of ours but in our field option we are going to go ahead and label this so here we're going to call this um from service and actually i'm gonna go from service to testimonial the better description you have the better um it helps down the road when we get into oxygen so next i'm going to scroll down and we're going to do the same thing on our field here we're going to label this one let's just go ahead and say two testimonial from service and that way we we have our from and our two in the beginning of it just so we know which ones which and again i'm going to just jump back to my general before i hit publish here all right now that we have that in there we can go ahead and go to our testimonials and our services so i'm gonna just hit refresh on this one i have open and i'll do the same on my service that i have open so you'll see now that we have in the bottom right hand here and again i'm using the gutenberg builder so it might look a little different if you're using the classic builder but on the right hand side you hear you see that i have from services to testimonial and it says select a service so we're going to go ahead and do this and we'll choose mountain hiking for this one and you can add multiple if you choose i'm going to click update i'm going to jump over to my services and you can see i have one from previously but right now this is showing as to testimonial from service and right now it's showing empty but if i hit refresh let me scroll here that isn't actually pre-filling so let's go ahead and set who we want in here becky williams all right so now what we can do that now that we have that set is we're gonna jump into oxygen builder so i'm gonna go to my templates and i'm going to jump to my single service post that i have started here which is what we're viewing here so i'm going to go ahead and edit with oxygen all right we got that loaded up i'm going to open my structure panel here and i'm just going to expand all so right below this section i'm going to add in another section as well and inside this i'm going to put a div and we'll make that um 80 i think that's what i did above as well and we're going to make sure that this is aligned to center yeah eighty percent is what i did here again i'm not worried about design too much here i'm more just i'm showing you how to utilize the data from metabox so we have that here what i'm going to do is add in a heading and i believe we have an h1 already so we'll do an h2 here and we're going to call this [Music] testimonials for hiking and i'll click done and now we're also going to come back up and we're going to add in a repeater so in here what we're going to do is set our query parameter and we're going to come over to advanced and edit query add query parameter and our very first one that we're going to do here is going to be post type which is towards the bottom and we're going to add our value in here you're going to type in the slug for your custom post type and in our case what we're going to be doing is the testimonial so i know when i set mine up that i have my slug set as testimonial typically i would have the s on there but i missed it when i originally set it up as i mentioned in my previous video but i'm just gonna set that as testimonial on this one because we're already on our service page but what we're trying to pull in is our testimonials so i'm gonna set that as you see here and then i'm gonna do add parameter and in this one we're going to scroll almost all the way down again and we're going to choose post in we're going to add value and click data and metabox field and now you'll see in our very top here we have our two fields that we labeled and these only show up um when you actually put in that label on our field here so it's very important that you get that added in here otherwise they're not going to show up in oxygen for us to use so next what we want to do is choose 2 testimonial from service so it's going to be our second option that we want now in here i'm going to put in a comma for both my separator and or both of my separators and in our drop down in the center here saying please select what you want to insert we're going to do post object id which is going to show as post id go ahead and click insert and we can click the x at the top and we're going to click apply parameters and now inside here i'm going to click my add and we're going to add in a few text fields i'm just going to duplicate them right away and we'll come up and look at our testimonial to see what we have that we want in here so we'll pull in the name the customer name our company name and we'll pull in the snippet so jumping back over to oxygen and my top one i will double click it we're going to click insert metabox field and then here we're gonna search for our testimonial snippet we're gonna insert that and click done and you can see that it's showing no data for field but once we jump to the front end it's going to actually show up for us so i'm just going to repeat that same process here i'm going to insert my data meta box field and this one we're going to go for the testimonial name so let's find that in here customer name insert and done and we'll do the same for our last insert metabox field and customer company and i'm going to hit insert and done and you can see it briefly flashes there for a moment so i'm going to click save jump to our front end click refresh and you can see that it's actually showing that data for us so now what we can do is we can style this how we choose if you know there's going to be more testimonials you can certainly set it up however you want i like using grid a lot so we'll do that and we'll say that we're going to have two in our column and we'll make our gap a little bit bigger even though i only have one right now but we'll start with that we're going to add a little bit of padding around this i'm going to go to rem all the way around we're going to put a little bit of space underneath this let's go to rem again and under our name and company let's set that to we'll just go one room for this example because we want those to be somewhat close i'm gonna go ahead and hit save and we're gonna jump to the front end just so we can see what that looks like so you can see we have that showing up now and we can jump back in and style this up a little bit more first thing i'm going to do is actually center my title here or my heading and i'm gonna add a little bit more space underneath it do two rem now jumping back to our testimonial i'm gonna see what we did here we have this nice little background i think we'll try the same thing just to stylize it a little bit so let's set our background to try this gray even though that is actually a little bit darker than what we ended up using here i don't think i have that color saved so we'll just start with that and we're also going to make the borders rounded we'll go 15 here we're going to add a little bit of a box shadow usually like starting with black and then i drag it down to around 20 percent and we'll go three for our horizontal three for our vertical ten for our blur and we'll try four for our spread make sure you don't click insert i often do that and wonder why it doesn't look right all right let's take a look at that i do know that i i want to set my name to be bolded so we can either choose our font weight which is going to be our the easiest way to do this so i'll set that to 700 for this one and i think for our company name we're going to want that to be a little bit smaller so right now it's most likely at 16 pixels so we're just going to drop it down to 14 just so that's a little bit smaller click save let's take a look at the front end and you can see that looks a little bit better again you can play with the coloring a little bit and i think maybe what i might do is i'm actually gonna move all of this inside of a link wrapper so because this div is already the main div inside a repeater i can't move it so what i'm going to just do is do a link wrapper i'm going to move this up to the top and i'm going to drag all of this in might be a little tricky and i'm going to take my background that was here i'm gonna drop that off and my border i'm gonna drop that off and my box shadow we're gonna take that off as well this is why it pays to have a design planned out ahead of time not just making it on the fly so you don't have to undo and redo things all right again i'm not worried too much about my styling right now i'm just trying to give a little bit of a look for you and you can see on my effect box shadow here i went and clicked inset again as i told you i probably would so it is very easy to do we're going to change our padding here and i'm going to remove it from here and let's see here i think we do want to set this up as 100 percent on our width there we go right now it's centered let's see how that looks on the front end we're probably gonna have to change that a little bit yeah i don't like that centered but i the reason i was putting it inside a link wrapper is so that we can click this and go to the full testimonial so in here let's choose our layout we're going to go flux column and do flex start and for our text color we're going to choose just a black and we want to make sure that in our primary tab we do set our link so i'm going to click data and permalink and i can go ahead and click save now jump to our front end and you can see that it aligned everything to the left but this text field is still centered and you can see that when i do hover over this in my bottom left here i'm showing my permalink so you can see that it slash testimonial slash becky williams which is the one that we were related to here so i'm just going to fix my top text field here click on that advanced typography and text align left and we should be fixed here all right and there we go you can see that this styling it is takes a little bit more work because you have to jump back and forth to the front end and back to the builder just because it's not actually showing the data so there's a few ways you could work around this is probably what i would do is i would just put filler text in here as i design it and then after the fact come in and then make my data pull in from my relationship that way i can stylize it much easier in the back end and then once i've done that you know just double click my data and insert the actual field data instead of just having it hard coded in so for example i'll just double click in here and i'll pull in what that data was just so we have that in here all right so just like that so i would you know hard code all the data in there so i can stylize it how i want you know let's say i want to make my text a different color whatever that may be if you're going to change all the colors we can do that just in the link wrapper like we did before maybe we're going to choose a dark blue for that and maybe we want to change our spacing here so we'll click back on becky here and we'll just change that to 0.5 bring that down a little bit and let's see if there's anything else that i want to do i think that's good for now i've got it stylized how i want so what i do is just double click in here again and then re-insert my data or if i'm just starting from the beginning i would have started with the copy in there styled everything and then come in here and add in my data so again just pulling in my testimonial snippet for the top one then we're gonna insert our metabox field customer name and lastly we're pulling in the the company name so again i click insert metabox field and customer company and we can click done or just click off of it and you can see that it even flashed that data there as it was filling in why it's not showing the data right now i'm not positive but you can see when we get to the front end that it is showing properly so i hope you guys enjoyed that tutorial i'm glad that we were able to figure out how to get the relationship data to pull i can't say that i figured it out myself i'm a member of the inner circle shared this earlier today and gave me permission to make a video about it so i'm happy to be able to share this with all of you on how easy it is to actually use that relationship data now and i haven't played with it going the other way but i'm pretty sure if we went to our testimonial page and built that out we would be able to go the other way as well so since this is a shorter video i'm going to do that quickly so i'm going to click save jump back to our admin i'm going to click a new template and we're going to inherit our global footer we're going to set this to single and choose our testimonials click publish and now i'm not going to worry about style at all for this part i'm just going to pull in our data so i'm going to add in two sections and i'll just duplicate that in our top section i'm going to add in a couple of text fields we had our full testimonial the customer name the customer company and um i would do the rating but i'm not going to spend my time doing that right now so i'm just going to double click insert my data meta box field and again we want our full testimonial insert done and you can see that we're previewing becky williams again so i'm just going to continue continue to do this click my metabox field and we're going to choose the customer name again and lastly we're going to insert the metabox field data for the customer company and i can see i actually have that spelled wrong which is maybe why i get confused every time i look at it so you can see it's pulling in our data for our actual testimonial so now in our next section down let's go ahead and add in our div i'll go to 80 again again i'm not worried about style at all just showing how how to pull all of this in so in here we're going to enter in our repeater we're going to set our query under query advanced edit query add query parameter now we're going to scroll all the way down to post type add value and in this one we're going to do services again you want to use the slug that you set up for your custom post type in my case it is services we're going to add another parameter we're going to scroll all the way down until we find post in we're going to click on add value we're going to click data meta box field and now we're gonna go the opposite way so before we did to testimonial now we're gonna go from service to testimonial going to put in my comma for my separators and i'm going to choose my post object id and click insert click the little x in the top and apply query and now let's go ahead and add in a heading and some text and an image my image i'm going to choose my featured image and set it to medium my title i'm going to insert that and we're going to set that as our service title and it's not going to allow me to link it because it's the custom field i'm using if i did want to use just the title of the post we could have done that and i'm going to add in my service snippet i'm going to bring my image just above everything here and we'll go ahead and click save and let's take a look on the front end so now you can see we're looking at our testimonial for becky williams you can see we have all of that data which we're pulling from metabox here and then you can also see that down below we're pulling in our related service which is has a featured image our title and our data so you can see we're going both ways with our relationship and all we did is just set up the one relationship for service service to testimonial and because we checked this reciprocal it isn't working both ways and again we have that selected down in the bottom right here again i'm using gutenberg so it may be in a slightly different location if you're using classic editor but you're just setting what it's related to there and again i did the same thing on my service as well it does allow you to add more if you want to but in this case i'm just doing one and then in our builder you again it doesn't actually show the data on the back end but when we do go to the front end it is showing and just like i did here if we did want to link to our service we could either add a button like we did here or you can just link the entire card like we did here there's lots of lots of options on how you want to do that and again you just use that do that by selecting the permalink in your data so i hope you guys enjoyed that video and you're able to now utilize relationships within metabox this is a much easier way than having to custom code it certainly if you guys have questions please do let me know we'll see you guys in the next video

Channel: LocalSBM

Views: 691

Keywords: Meta Box, Oxygen Builder, WordPress, WordPress Dynamic Data, How To Use Meta Box, WordPress Relationships, Oxygen Builder 3.9, Meta Box WordPress Plugin, Meta Box AIO, Meta Box Custom Fields, Meta Box Custom Post Types, gallery

Id: OCFW0RdZSBs

Length: 30min 18sec (1818 seconds)

Published: Fri Sep 10 2021