0:00:00
Alright 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-I-VU-I, and because I do a lot of work with bidirectional relationships, another plug-in called ACF post to post, which offered bidirectional relationship functionality, but wasn’t a super clean implementation of it. So MetaBox being an all-in-one system, you’re able to create custom post-I-VU-I, you’re able to create advanced custom fields, and you’re able to create bidirectional 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 one, and very soon 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 decided to see how clean is the bidirectional relationships functionality.
0:01:07
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. 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. Let’s go ahead and do it. Here is, let me make this a little bigger. Cool. All right.
0:01:50
That should be good. Let me go back and check. Where are we? Okay. Hang on. It’s got to zoom to app. Okay. All right. Good. It’s all good. Okay. So, the way that we’re going to do this is reviews-related to services. So, if you think about a business has multiple different services and people leave reviews. While 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 random reviews.
0:02:24
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 MetaBox. And I just released a tutorial doing something similar in ACF. And then I have obviously premium trainings inside the inner circle that go over relationships. But I’m realizing now that we’re just going to have to do this all in MetaBox now. So we’re going to have to create new tutorials. And I’m going to be doing a bunch of MetaBox tutorials for free on YouTube, advanced ones in the inner circle. But I wanted 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 a lot for. So I want to put it on YouTube.
0:03:15
All right, let’s go ahead and create some services. So we’re going to do service number one. And we’re going to publish. We’re actually only going to do two services really. 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 Lorum real quick. There is a, I did create a service description box. I already did this in MetaBox with the services, 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. Service number one. I’m going to put the service description in down there. Okay. So I’ve got service number one and service number two.
0:03:54
So now we’re going to have three reviews for each service. All right. So what we need to do is in MetaBox, 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. 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 going to need to remember that. Okay. So it’s the singular review. But I like about MetaBox is that it automatically does all the labels for you. Whereas in ACF, you have to click a little link to do it.
0:04:39
And then it adds, it’ll say like my, add my review or something. You got to delete the word my. It’s like three extra clicks in ACF. Whereas in MetaBox, it’s just already done for you. 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.
0:05:11
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 the old way. That would have been done in the plugin custom post type UI, which has those issues that I just mentioned. Sorry. I attributed those issues to ACF. They’re really attributed to custom post type UI that free plugin. This is the part, the custom fields part that you would do in ACF. And so when I go to custom fields, I’m going to hit add new. And we’re going to add a new field group.
0:05:51
This 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 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. 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 going to create an extra one just for the purposes of this tutorial. I want to be as clean as possible. But we will do like review text. So I’m going to go text area and the label is going to be review text. And yeah, text area. I’m not going to make it required.
0:06:39
All right, advanced. 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. Because 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 review text down here. There’s that custom field. So I’m going to go ahead and hit publish. And then I’m going to go to service number one review number two. Or I’ll do like another another service number one review. Just to make that different.
0:07:23
Publish. All right. And then we need a last review. Remember I said we’re going to do three reviews for each service. Okay. Last review number one review. Okay. All right. Last service number one review. All right. And then we paste that. And then we publish. Publish. Then we go back. Now we need our service number two reviews.
0:07:44
So we’re going to add service number two review. And we’re going to 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, yeah. Did I do? Well, did I? Sorry.
0:08:17
I can’t remember if I pasted it in on the service to. Nope. I didn’t. Okay. I’m going to go back to the 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 MetaBox, 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.
0:08:49
This is the confusing part. You want this to be a risk. You would think that this would be a reciprocal relationship to make it bidirectional. That’s not the case. All of these relationships are bidirectional by default. You do not click the reciprocal relationship box. So I was clicking this initially in my testing and 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 real. It’s this reciprocal relationship box. You actually leave this unchecked. So that’s quirk number one. I won’t call it a quirk because that’s by design. It’s not like it’s an error or anything.
0:09:34
But just don’t check that box. All right. Next is it’s saying from two. And even though it’s saying from and two, 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 messages. You can leave that blanks 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 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.
0:10:10
So 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 going to 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 going to be connected from. And it’s going to show me all the reviews. Right. So 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.
0:10:46
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 service. 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 one for oxygen 3.9. So it should load a little bit faster.
0:11:22
We’ll see. Okay. Maybe not. Yeah. I don’t want to edit this video. So we’re just going to awkwardly sit here and wait for the builders 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 going to add a div. I’m going to add a grid.
0:11:53
I’m going to add a gap in the grid. I’m going to add a div and a div. Perfect. I’m going to add a heading. And this heading is going to be the post title, which is just service number two. And then I’m going to add text here below that. I’m going to add some owl spacing. 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.
0:12:36
So over here on the right hand side is where I want to have the reviews for service number two. Since it really how I would typically, well, yeah, I don’t know. Why are we doing it this way? Let’s just do this. We’re going to 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. Actually, we’ll just we’ll just add the repeater.
0:13:13
So I’m going to wrap this with a div. Fail to execute command cannot set property undefined. Why? Why? That doesn’t make any sense. Okay. So we’re going to do a div with that 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 owl S. Perfect.
0:13:50
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 going to 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.
0:14:19
So there’s our div. Let’s go to. Oh, wait. I put a div inside the div. It’s still messing with me. Okay. All right. So on our repeater, now we need a query. So we’re going to query, click advanced, edit query. This is the advanced query builder. And this has 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.
0:14:47
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.
0:15:21
All right, perfect. And I’m going to go to vertical left on this. All right. So we can insert data, a 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. Does 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.
0:15:59
Text small. There we go. Perfect. All right. I feel like it puts something else in there. Or is there owl spacing on this? No. All right. 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. Let’s do owl S on this. Save. Check it again.
0:16:19
Okay. So we have all of our reviews queries. And now we have to do the relationships side of it. So remember, we just want to show reviews that are related to service number two. We haven’t actually created the relationships yet. We created the relationship’s 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 going to select service number two review. I’m going to hit the add more button. That’s going to let me add another one.
0:17:06
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 bidirectional. And I’ll show you that right now. So I’m going to hit update. And if I go back to reviews and I choose one of the service number two reviews, you’re going to see that it’s connected to service number two. So that’s all working. That’s fantastic. We still have a problem though. So I’m going to save our work here and I’m going to refresh the builder. And I’m going to show you that you will not be able to query based on that relationship because we forgot a step.
0:17:49
And it’s a step that 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 going to go to query advanced, 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 metabox 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’m going 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 metabox 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.
0:18:43
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 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.
0:19:37
So it shows you the related services. Instead of just saying connected to, it actually has this little heading now. It 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, metabox 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. 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 most will post objects. Well, there are multiple post objects. But if you put the comma here, it will break your repeater.
0:20:27
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 a 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 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 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 going to break. Where do you put the comma?
0:21:21
So it doesn’t break. And just kind of a quick overview of how to create a custom post type in metabox, how to create the relationships functionality in metabox. Remember that reciprocal checkbox 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 bidirectional relationships because those are super powerful. If you build business websites, super super powerful to use this relationships, bidirectional relationships functionality, I use it all the time in 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 for metabox. Full transparency. I’m just now getting used to using metabox.
0:22:10
I’ve been using it for about five minutes now. That’s what it feels like anyway, back to camera. Let me know what you think of 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. But if there’s anything I should know about metabox, then definitely let me know now. All right, that’s it from me. I’m going to go ask some football. All right, let me just wanted to see our weather.
