0:00:00
Alright, so I want to take a break from doing a bunch of template tutorials and do a tutorial on something that a lot of people have been asking for lately, and that is custom post types with repeaters and bidirectional relationships. Or really, people are just asking for relationships, but bidirectional relationships are super powerful. So here’s what this tutorial is going to cover. We are going to build a reviews system, and this is very practical. This isn’t just to teach you stuff. I use this on, I would say, 85%, comfortably 85% of business websites. We build the reviews in through a custom post type using advanced custom fields.
0:00:44
You can do this, you can’t do this, let’s just get it out of the way. You can’t do this with the free version of Advanced Custom Fields. You have to have ACF Pro. You can also potentially do this with MetaBox, but the process is going to be a bit differently. I would highly recommend that you … MetaBox does not have the direct oxygen integration yet. I would highly recommend that you invest in ACF Pro because of stuff like this. You’re going to make your money back on this, I guarantee. You look at the cost of ACF, and then you look at what building a reviews profile into a website like this can be sold for and you realize to not make the investment in ACF Pro, it just doesn’t make any sense financially.
0:01:27
You’re going to just be able to … because you’re putting tremendous value into a website when you do something like this. I’ll just kind of give you the overview of what we’re going to be doing. So we build the reviews into a custom post type. That gives us the ability, number one, to easily query those reviews onto any page or post using the Oxygen repeater. But we also have the ability to potentially categorize these or create other taxonomies around these reviews.
0:01:56
We have the ability to show random reviews at that point. We have the ability to do, you know, like load more where somebody can see a grid of maybe six reviews, but if they wanna see more reviews, they can just load more dynamically onto the page. That becomes very easy. But most of all, like the most powerful functionality in all of this is the ability to create relationships, to relate a review to other things, and not just one other thing, like services.
0:02:25
So let’s say you had a company that has three core services. You load all the reviews in the website, then you can choose which reviews are related to which service. So on service page number one, you show reviews related to service number one. And on service number two, you show reviews related to service number two. Very powerful. But what if then you have a multi-location business and you also want to relate reviews to specific locations.
0:02:52
And then what if you have a service area business where it’s not just a few brick and mortar locations, it’s literally dozens of areas that you service and you want to relate reviews to those different service areas. Let’s say you wanted to associate reviews with certain team members. All of this opens up when you build in reviews the way I’m gonna show you in this tutorial. So we’re gonna cover that custom post type creation. I’m like literally we’re gonna do all of this from scratch. We’re gonna build the reviews custom post type, the services custom post type.
0:03:28
We’re gonna load in the reviews. I’m gonna show you how to create the relationships. I’m gonna show you how to query the relationships. We’re gonna talk about doing this in a grid. We’re gonna talk about doing this in a carousel. You’re going to learn a lot in this video. So let’s just go ahead and dive right in. So I’m going to go in and we’re going to start screen-sharing here. The first thing I’m going to do is let’s create these custom post types. So I’m going to go to custom post type UI, and we’re going to go to add edit post types.
0:03:58
On this post type slug, we’re going to do review. So this is going to be our reviews custom post type. And I’m gonna say populate additional labels based on chosen labels. And what that’s gonna do is basically fill in all these fields. You can see there’s a lot of fields here. I would recommend just let that auto populate. It does put my in front of this right here.
0:04:19
I always take that out. We’re gonna come down and we’re gonna talk about some of these options probably later on as we go. I don’t wanna get too deep into this stuff. But right now I do wanna make sure that this does not have an archive page and that’s set to false by default, so that’s cool. Exclude from search is set to false. Hierarchical is set to false. I don’t think we’re gonna need hierarchy within these reviews.
0:04:45
You don’t need to like nest a review under another review. So that’s pretty much going to be good to go from the start. I am going to disable the editor and I am going to disable the featured image. I only want the title and you’ll see why. When we build out the custom fields for this post type, we want that page to be as absolutely clean as possible. So I’m going to go ahead, add post type. And this is going to build that post type into the back end. Next we’re going to do the services custom post type. We’re going to do service and the singular is service. I populate, I take out my services. Now the only difference here when we come down is we do want this to be hierarchical and we likely do want this to have an archive page and that’s probably it for now. The services we can again disable the editor most likely and disable the featured image.
0:05:39
Now, sometimes on service pages, I do use Gutenberg for a large body copy, core copy section, SEO copy section of the page. But for this tutorial, we’re not going to be getting into all of that. I’m not going to actually build real pages. This is mainly focused on how do we build the custom post types? How do we create the relationships? How do we query these things onto a page? And then make the actual review cards and section look decent.
0:06:10
But I’m not going to build out the pages around that section, let’s say. All right? Cool. So we’re going to go ahead and hit Add Post Type there. And now you see on the left-hand side, we have a Reviews Custom Post Type. We have a Services Custom Post Type. So we’re going in the right direction. We have what we need.
0:06:29
So if I go to reviews and hit add new, what you’re going to notice, oh, by the way, let’s what I always do. I turn off the oxygen panel on here as well. So if I go to settings and I go to, I believe it’s client control under post type manager, you can say, don’t show oxygen on the reviews. Now I do want them on the service pages because typically 95% of the time the services pages are going to be built with oxygen. We’re not going to make a template for those, we’re not going to completely do you know ACF them out, right? So we are going to keep those, the ability to edit with oxygen on those. So I’m going to hit save and now when I go back to reviews and add new, it’s very clean. I do have a rank math thing here but literally it’s just a title. I have nothing else.
0:07:13
So what we need to decide is what fields are we going to put here for people to fill in? Like what fields would make sense or be necessary on a review profile? So I’m going to go to custom fields right here and I’ll just show you in the plug-in section if you’re not familiar with the plug-ins that we’re using here. Custom post types UI is a free plug-in. So you’re not going to have to pay for that one. That is this one right here, custom post type UI. I actually think I can, oh I don’t know if I can zoom in. Alright, I know there’s a shortcut for zooming in. I’m using new recording software which is very powerful but I still have to learn a little bit. So custom post type UI, absolutely free. Advanced custom fields, there is a free version but you’re not going to be able to create relationships with the free version.
0:08:01
So you’re gonna wanna get the pro version for that. And I’ll put a link down below so you guys can grab that. It’s again, well worth the cost. So, Advanced Custom Fields is this right here. And that’s what’s gonna allow me to put whatever fields I want on these review pages. So I’m gonna hit Add New. And I’ll walk you through this. We’re gonna pretend like you have no idea what this does or how it works.
0:08:25
So we’re putting fields on a reviews custom post type. So I’m going to name this reviews. That way I know this is what shows up on reviews. Then I want to assign this group of custom fields. You can see it’s a new field group is basically what we’re creating. So I have a group of fields. Where do I want those fields to show up? I want them to show up when the post type is equal to review. So that’s very simple.
0:08:54
I can just go ahead and hit publish. So now I’m ready to rock and roll. I’ve assigned my field group to the reviews custom post type. Now I can start loading in fields. So the first thing I’m going to load in is the person’s name. So we’re going to say reviewer name. I always put that context in there. I don’t just put name because you’ll see when we go to Oxygen on the back end, we’re going to want to clearly see like, we want to make immediate sense of what this field is.
0:09:23
So I put reviewer name. We’re going to come down, the default is a text field. So we’re going to go ahead and keep that. I’m just going to close this for now. So I see reviewer name. Next, I’m going to add what else would be very important here. Let’s add the source. So this can be a text field where somebody could type in like Google or Facebook or whatever. Basically this is where did we pull this review from? And I can actually do review source because again we want to have that context.
0:09:54
So I’m going to go ahead and let’s do a drop down. So we’ll do a select box and then you’ll see it loads in. All right, what do you want your choices to be? So we’ll say Google, we’ll say Facebook, we’ll say Yelp, we will say SureCritic, you can load in whatever. It’s actually gonna be industry dependent. So wherever your core industry is for this client, you’re gonna wanna say, where do you mainly collect reviews? Google almost certainly is gonna be up there.
0:10:26
But we’ll just load that in for now. So I don’t need anything else with this. I can go ahead and close this field group. The next thing I want is a callout field. Now a callout field is, you may have seen this, if you’ve seen my site, Site Type Build, you’ve definitely seen this. I use this technique all the time. But basically someone’s going to write a little paragraph review. And what we want to do is pull out the little one half sentence snippet that really highlights the gist of their review. Where if they talk a lot, but then there’s one line where it says, would definitely recommend this service to all of my friends.
0:11:03
I’m going to take that little sentence and make that a call out, so that when someone’s scanning reviews, they’re just reading all of these hard hitting call outs. That’s right under the five stars. It really makes a big impact on people when they read these review sections. So I’m going to call this Review Callout. And we’re just going to make it text. It’s cool. Now we are going to limit the characters on this. And I’m going to start out by saying this is an 80 character limit. I’m just guessing right now.
0:11:31
We’ll see if this is practical in just a moment. For now I’m going to close that field. Next I’m going to say Add Fields and we’re going to do review body. This is going to be the main body of the review. Now I’m also going to limit the characters on these because what you’re going to see is a lot of people like to get very wordy with their reviews and we want to make sure that we’re not putting a three sentence review next to a nine sentence review. It really throws off just the design, aesthetic and balance of the website. So you really wanna just limit these reviews, which unfortunately means when you’re piping reviews into the system, which we’re gonna be doing manually, because we wanna hand-pick and review, like basically take the best reviews and put those into the website.
0:12:17
And then we’re gonna remove some stuff, you know, people, they’re a little, like I said, they’re a little wordy. So we take out some of the fluff, some of the stuff that doesn’t really matter, that’s not very hard hitting. And then we pare it down to a really solid review. So I’m gonna go ahead and put a 300 character limit on the review body here, all right? I’m gonna close that field. So I have the name, I have the source of the review, I have the call out, I have the body.
0:12:42
What else can we put on here? We could put their headshot maybe. So we wanna do a headshot. So we’ll do reviewer, reviewer headshot. You can see it fills out the field name for me, it does that by default. So on this one, I’m going to choose an image. Then by default, it’s set to image array, that’s fine. Medium is fine. The library, all of that is fine as the default.
0:13:10
So I’ve got five fields basically here. I’m going to go ahead and hit update and let’s just take a look at what we’ve done so far. So I’m going to go to reviews, I’m going to add new review. And so you see, right, it makes perfect sense. We can add our title, then we have the reviewer name, the source, which I have a dropdown for now, the callout, the body, and the headshot. Now, one quick thing. The reason why I, let’s see. Here? Yeah, there we go. Okay, so the reason why I do the dropdown on the review source is because if you leave that to be typed in, sometimes people can make typo errors.
0:13:49
Sometimes they’ll, like, one source will say Facebook will be capitalized. And yeah, you can use CSS to kind of correct some of that stuff. But if you do a dropdown, they’re forced to choose the same options every single time. And it just makes the stuff really really consistent so that’s that’s why we do that. Alright cool so you see now we have a title we have reviews we’re gonna go ahead and fill in some reviews now so I’m gonna do this we’re gonna say Mr. Johnson okay that’ll be our first name and then I’m just gonna copy and paste that here and then he’s from Facebook and so we’re gonna do review call out let’s say this was the best service I’ve ever had.
0:14:28
And then I am going to just grab some lorem for like the bodies here. We’ll do like up to there and we’ll see if we can paste that whole thing in. Now see how this is like on one line? Maybe you know that doesn’t make so much sense for the review body. So I’m going to go ahead and publish this. We’ll add, well let’s add Mr. Johnson’s head shot here while we’re here. I pre-did this. I got some stuff in there so we don’t have to just waste a bunch of time finding photos and all of that. So I’m gonna go to Custom Fields, Fields Groups.
0:14:56
I’m gonna go ahead and edit this. And what you can do is if you want an actual bigger text box, you can choose Text Area. And then it’s actually gonna ask you how many rows you want for that text area. We can do something like three, and then we can hit Update. And now when I go back to those reviews and I edit Mr. Johnson, you can see that I actually have a more of like a real text box there. All right, cool.
0:15:18
So we’re gonna grab that, because I’m gonna use that again. All right, well that works, can update on that. I’m gonna go to add new review, and we’ll do Miss Gilbert, okay? And then I’m gonna pop in that review body, and I’ll take out a sentence here, okay? So we can see that that one’s a little bit shorter. I’ll do, well, I want her name here and then review call out. This was a killer service will definitely be back.
0:15:48
I’m going to put in her headshot. Let’s do that one. Then I’m going to hit publish. Now, I’m not going to do any more because you’re going to see that we don’t have any relationships yet and I want to show you the power of setting up relationships like this. So we’re just going to leave those two in there. If I see them, there they are. We got Ms. Gilbert and Mr. Johnson. Now, let’s go ahead and create services.
0:16:10
Now, I don’t need to do any custom fields for these. We’re just going to put our service pages in to represent that we have services. So I’m going to do Add New. This is going to be service number 1, and we’re going to publish. Then I’m going to come in and we’re going to do add new, and we’re going to do service number two, and I’m going to hit publish. These are just to show you that when we query these relationships, we are actually seeing the proper reviews.
0:16:37
So service number three, and I’m going to go ahead and hit publish. Fantastic. So now, what do we have? We have three services and we have two reviews. Now, we’re going to end up with six reviews. We’re going to have three reviews on service number one, we’re gonna have three reviews on service number two, and then we’re gonna have six reviews in total for our carousel that’s gonna go on like maybe a home page or something. Alright and then on that on service page number one we’re gonna query the reviews for service number one and on service page number two we’re gonna query the reviews for service number two. So I can show you how how how powerful this system is.
0:17:14
But before we do that, I need to add a plugin that’s gonna add the functionality of bi-directional relationships. And I wanna talk a little bit about why we don’t do normal relationships. But let’s go ahead and do two things here. Number one, we’re gonna go to plugins. We’re gonna hit add new. This is another free plugin, but again, it’s only gonna work if you have Advanced Custom Fields Pro.
0:17:37
I’m gonna do ACF post and there’s a plug-in called ACF post to post and it says automatic two-way bidirectional relationships with ACS5. I’m going to hit install on that and it’s going to take a second. We’ll activate. Perfect. And now what I’m going to do singular relationships, why you want to do bi-directional relationships. I’m going to tell you to the camera and then you’re going to see when we actually do it. It’s going to make total sense to you. So if you do singular relationships, you basically say we assign that field, the relationships field, to either the reviews or to the services. So if we are doing services, we can assign the related reviews relationship field to the services custom post types.
0:18:33
So when you’re adding a service, there’s a custom field that says which reviews go with the service. Well, that’s fantastic. I mean, you can select them, you can hit publish, you can query them, all is well in the world. The problem is, if you’re adding reviews into the system, you can’t say which services that they’re related to. You would have to go create a new relationship field, assign it to reviews that’s related services, and then you can choose the services that a review is related to when you load the reviews in.
0:19:05
The problem is, those two things don’t talk to each other. So I’ve seen people do this the wrong way, where they add it over here and they add it over here, and then yeah, you can do it in either place, but there ends up being a bunch of overlap and it’s very inaccurate because when you tell WordPress that somebody’s doing fireworks outside, it’s not July 4th yet, it’s no holiday, right? I don’t know what they’re doing. So it’s not gunfire, that’s good.
0:19:32
I don’t live in Chicago. So anyway, sorry for anybody that lives in Chicago. All right, so my friend’s from Chicago, that’s why I make the joke very often. All right, so if you do bi-directional, when I associate a review with a service on the reviews panel and then go to the services panel and look, it’s updated there. And it updates, so it’s updating both ways. That’s why it’s called bi-directional. It’s fantastic. So we needed that ACF post-to-post plugin.
0:20:01
Don’t make the mistake of doing, assigning a review over here with one relationship field and assigning to services over here with a separate relationship field. All right, let’s go ahead and let’s dive back in. So I did the ACF post-to-post. Next thing I’m gonna do is I’m gonna go create the relationship. So we’re gonna go to custom fields and it’s gonna look like I’m adding them separately, but you’re gonna see one really important detail.
0:20:28
So I’m going to go to field groups, and I’m going to go to reviews, and we’re going to add a field, and this is going to be a relationship field. So I’m going to choose relationship from the drop-down. Then again, we’re assigning this to the, this is what you’re going to see on the reviews panel. So on the reviews panel, it would make sense for it to say related service. So I’m going to name this related service, okay?
0:20:53
The difference is you see how it auto created this field name related service? I’m going to delete that. And I’m going to name it very generic. It’s gonna be reviews slash service or dash service, reviews dash service. Because it’s both, it’s both sides. This is bi-directional. So and the key here, the trick that I was gonna tell you about, this has to be the same in both places.
0:21:16
All right, so I’m gonna copy that. So it is a relationship field. Now down here you have these filters. If you’re gonna create relationships where there may be lots and lots of data that somebody has to sort through to find the proper items to do the relationships with, you might wanna give them the ability to use a little search box there. You might wanna give them the ability to sort by post type if this is cross post type. You might wanna give them the ability to search by taxonomy or filter by taxonomy. In this case, I don’t need any of these things, so I’m going to uncheck all of them.
0:21:47
Next is going to be filter by post type. Related service, I need to be able to show service posts effectively. So I’m going to hit service. So that’s going to basically not have any other clutter. We’re relating this to a service, so I only want to show the person services to choose from to create the relationships. That’s basically how that works. Then I’m going to hit close and we’ll take a look. So I have related service as the last field now. I’m going to hit update. Now what I’m going to do is add a brand new field group and I’m going to assign this to the services custom post type. And post type is equal to service. I’m gonna hit publish.
0:22:28
And now this is gonna show up when you’re editing a service. I’m gonna create a relationship field. So we’re gonna choose relationship from the dropdown, relationship. And then field label is gonna be related review, or actually reviews, because typically that’s plural. All right, but the difference is, look, it made that little field name for me. I’ve got to delete that and I’ve got to put in the same exact field name that I had on the other one.
0:22:56
And I’m going to hit update. Perfect. All right. So let’s delete all these little notices up here. Those drive me nuts. All right. So we have related reviews. Now let’s go to services and check this out. So I go to services, service number one, and I’m going to get rid of rank math here. Look at this.
0:23:11
You have a new little field area here. Oh, look, I did something wrong. It’s showing me posts, it’s showing me pages, it’s showing me media, it’s showing me, this is why you have to pare it down. So we’re gonna go back to custom fields. We’re gonna go to the services page, and we’re gonna open this up. And remember this little box down here, number one, I can get rid of these three, but this where it says filter by post type, I only want to show reviews when somebody is going through this box.
0:23:39
So I hit update, I go back, let’s see what we’ve got services. Here’s service number one. Look at that, there’s two reviews. There’s only reviews, first of all, and there’s only two because we’ve only loaded in two reviews. So I’m going to go ahead now and load in more reviews. Now you’re going to see why this is so powerful. So I go to Reviews, Add New, perfect. And then I’m going to say, let’s say Ms. Johnson.
0:24:07
All right, cool. So we’ll grab this. Perfect. She left a review on Yelp. All right, review call out, amazing service. Will definitely be back. All right, we’re going to grab our lorem and we’re going to paste. Perfect. Now look, while I’m adding reviews, I can choose the related services. I don’t have to go to the services page to make the relationship. I don’t have to worry about relating them here, but not relating them there. It’s all going to work out of the box, bi-directional, and I’ll show you. I’ll prove it to you right now. It’s fantastic. Look at this. Service number one, and we hit publish. So Ms. Johnson was reviewing service number one. You see it puts it over here when it’s selected. All right. So I’m gonna hit update and let’s test it out. Let’s go to service number one. Look at that. Miss Johnson reviewed service number one. It’s right there.
0:25:01
Bi-directional relationships and it says related reviews right here. But if I go to the reviews tab for Miss Johnson, it’s gonna say related service. Right. But they share the ID which is what links them together. So crazy, right? Oh, that’s Mr. Johnson. All right. Anyway, so we’ll go back. So under Mr. Johnson, we’re going to make him service two. Let’s make all the women service two, all the men service one.
0:25:28
That way we know when we review, like we’re actually seeing the right data without double-checking the database every single time. All right, cool. So reviewer headshot is in. So let’s go back here and let’s do, so Ms. Gilbert, service number two. Perfect. And let’s make sure that Ms. Johnson is service, oh, she’s service number one. See, I’m getting confused.
0:25:49
All right, service number two. We’ll remove service number one. All right, so women are service number two. And then men are, I’d say I did it backwards, service number one. Okay, perfect. And we’ll update. Now we need to load three more people in real quick. All right, so we’ll just do Derek Henry. Cool, that’s definitely not how you spell his name.
0:26:13
Maybe it has two Rs, I don’t know. All right, we get some NFL players on our team here. Sure Critic, Review Callouts, Made It To The End Zone. Okay, cool. And then, I don’t know if end zone is two words. Maybe it is. I don’t know. All right, let’s do this part of that. So we have a little bit different text. All right, that’s all the way in. All right, so guys, we’re service number one. Awesome. Derek Henry is in the books. We need a headshot for him. That’s definitely not Derek Henry right there. All right, we’re going to hit update and back to reviews. Okay, so we’ve got four people in. Let’s hit add new.
0:26:52
We’re gonna need another Simone, what’s her name? Simone Biles. Is that it? I don’t know, but yeah, perfect. Okay, let’s go add image. We’re not gonna make these, none of this is accurate. Google and we’ll do, oh sure, let’s do a Facebook. Okay review call out Doing flips over this service Tremendous BAM. Okay review body. We’ll put that in but we’ll make it let’s flip this So we’ll go to the beginning and put that there. All right got her service number two Excellent, and we need one more and let’s count we’ve got mail Mail is this?
0:27:38
Okay, Simone, we didn’t give her a title. Okay, update. Back, this title is just for the back end, obviously. So we got female, female, female, male, male. Listen, we need one more male. Tom Brady, used to hate Tom Brady, by the way. He’s really earned my respect, I gotta say, you know? Like, completely demolished my Falcons, embarrassed us. Like, you know, I mean, we embarrass ourselves every single year, but he definitely did it to us. He does dirty for sure. But he’s you know, he’s like you got to respect the man. He went to he went to Tampa Bay still winning rings like okay, you know, like at some point you got to quit hating. You got to you got to give the man his props. All right, review call out boom.
0:28:22
And we’re gonna grab I don’t know, let’s grab in here. Let’s make this a short one all right, man a few words right here add image and There’s our Tom Brady. Okay service number one hit publish Perfect. All right. Let’s go to services check service. Number one. Do we have three reviews? We do let’s go to service number two. Do we have three reviews? We do Alright, let’s take a quick break. Alright, so let’s recap. So we’ve created our custom post types. We’ve loaded in our reviews. We created custom fields for our reviews. We added ACF post to post for bi-directional relationship functionality.
0:29:04
We created our relationship fields. We related reviews to services. We’re ready to rock and roll. So what we need to do now is query these reviews. And we’re gonna do this in two different ways. We’re going to query the reviews into a grid on the service pages. So I’m going to show you how to create a grid, which is very basic, very standard. But then I’m going to show you how to create a carousel. Maybe this carousel goes on something like the home page. Really get people’s attention, combines all the reviews into one place.
0:29:32
But when people go choose an actual service, then they only see reviews for that specific service. All right? Let’s make it happen. I’m going to go to pages. No, I’m not going to go to pages. I’m going to go to services because services is a custom post type. I’m going to edit service number 1 with oxygen. I’m going to let this builder load and then we’re going to query these into a grid for service number 1.
0:29:57
Service number 1 is loaded in the builder. So I’m going to go ahead and add a section here and we’re going to say heading and we’re going to call this service number one. Okay perfect and we’ll do a little text action here. Okay this is the description of service number one. Alright and we’ll do a background color of charcoal. Let’s do a text light on this whole section. Let’s add another section below. If you see this stuff magically appear, it’s because I’m using hydrogen patch keyboard shortcuts. So that was a command S or shift S. I don’t know, I just do it.
0:30:44
But it makes a new section appear below. All right. So next, we’re going to put the repeater in. All right. So we have this time to query my man So we’re gonna put in the repeater and we’re gonna put just automatic off the bat. I know this is gonna be a grid So let’s go ahead and throw the grid classes onto this. So this is gonna be columns three and I’m gonna choose that I’m gonna choose a gap of large. I’m gonna make sure all these stretch to be equal height. All right, my grid is ready to rock and roll. So, we’re gonna open the structure panel.
0:31:21
I want you guys to see here, we’ve got section one, section two, and then our repeater, and inside our repeater we have our default div. Here’s a decision you always have to make. Let me go, let’s go back to camera. This is the decision you always have to make when you’re building a repeater. Do I need the card of each item to be clickable? If the answer is yes, put a div inside the div. So you have that default div, you can’t get rid of it. That’s a default div for all repeaters. If you need to have your card be clickable, put a div inside that div.
0:31:56
That’s your card. If you don’t need the div to be clickable, like in this case, I don’t need people to be able to click on reviews. They’re not going to go anywhere. We’re just reading them right here, right there. Like, that’s it. Okay. I don’t need them to be clickable. So the parent div, the default div can be my card. All right. Very, that’s as simple as I can explain it.
0:32:16
So I’m going to call this review card. And what I want you to see here, we’re going to be able to reuse this card style inside the carousel. So we’re not going to have to like rebuild all of this. All right. So we’re going to add a couple of things. Number one, we’re going to add an image. This is going to be our stars. Actually, let’s not do that.
0:32:34
Let’s make this a little bit more dynamic. So we’re not going to do the whole like, oh, is it four stars? Is it five? We’re just querying all five-star reviews right now. We can get super advanced and be able to do multi-type star stuff later. We don’t need to complicate now, but I’m gonna use icons instead of an image just so you can see how this might work So I need a wrapper for my stars to contain my stars. So I’m gonna add a div inside This card right here. All right. Next thing I’m gonna do is I’m gonna add my Heading actually it’s not a heading. It’s the call-out. All right, so I’m gonna click my parent again, and I’m gonna add text and Then I’m gonna add text again. I love to do this I put all the elements in and then we go structure everything All right So I’m thinking about what I need before I start trying to build things I have to think about what I need and where they’re Gonna go like what order are they gonna go in so I have my wrapper for my stars I have my review call-out. I have my review body Next I need a headshot. I need the person’s name, and I need the source of the review.
0:33:41
So I’m gonna put that into its own container. So we’re gonna say div, perfect. So that’s gonna have my headshot over to the left, and then I need two other pieces of information stacked on the right. So there’s actually gonna be a div inside this div. All right, so we’re gonna add div, perfect. All right, now you can’t see everything right now, and that’s perfectly fine. But inside this div, I’m gonna add a text, and I’m gonna duplicate that, so I’m gonna add another text.
0:34:08
Now, what I would highly recommend doing is grabbing this repeater and click on single mode, and you might have to do that at the ID level, and that’s gonna make sure that it’s not trying to build this whole repeater right now. It’s just letting you focus on this one thing. You can also opt to build the card outside of the repeater if you’re more comfortable with that or if your repeater is acting up on you. And you might see me do that.
0:34:31
If this repeater starts acting up on me, I might move it to somewhere else. But the problem is, is like moving all the elements into the repeater when you’re not creating its own card. I’m doing it in the default div, so I don’t have the luxury of just dragging the whole div and dropping it, because that div can’t move. And if I build inside a div outside the repeater, I’m going to have to have an extra div really for no reason. All right. So this one up top is going to be called stars.
0:35:00
So review card double underscore stars. This one is the review callout. So review card callout. This one is the body, review card body. ReviewCardBody. This is the, okay, so we got our outside div here. So ReviewCardMetarapper. And then this is, oops, I don’t wanna add. ReviewCardName.
0:35:26
And then this one is ReviewCardSource. source and then we also need in this div right here to add an image for the headshot. Okay and we’re gonna call this review card headshot. So I’ve got all of my stuff structured I’ve got all of it named properly now I can start styling without any worries. Now before you actually start styling you might want to see if you can actually query this properly okay. So what I’m gonna do is I’m gonna grab the repeater, I’m gonna go to query, you can actually put a class on this repeater if you want to I’d actually recommend it. So we’ll do reviews, repeater, and then I’m gonna go to query, advance, we’re gonna use the new query builder and oxygen 3.8.
0:36:21
And we’re gonna say edit query, and we’re gonna add a query parameter. Interestingly enough, you only need two parameters to make this work. Now you can add other things to it but you only need two parameters. Okay so advanced query the first thing we’re gonna say is post type. Alright so post type remember we’re querying reviews so post type is going to be add value and it’s going to be review singular because that was the ID and we can double check that in a second. And then I’m gonna add a parameter and this is gonna be post in.
0:36:56
So post in, I’m gonna add a value data, advanced custom field, and I’m gonna say related reviews. Related reviews. And then I’m gonna make the separator a comma and I’m gonna insert the post ID and I’m gonna hit insert. Now we’re going to close this. What’s weird is there’s no save. There’s no save functionality on here. You just literally close the box. Then you can say apply query parameters here.
0:37:23
We’re going to hope that that did it properly. Now, it’s also acting up again. I’m going to go ahead and hit save so that nothing blows up on us. Then I’m going to double-click this and just put in a call out, advanced custom fields, review call out. See why I named these the way that I named them? Related reviews, reviewer name, review source, review call out, review, but it’s very obvious what these things are. It doesn’t just say like call out, body, headshot, because when you have other fields, suddenly it gets very, it’s kind of messy.
0:37:55
So what was I doing? A call out, review call out, insert, and boom. All right, I don’t know. Let’s go to save. I think stuff’s blowing up on me. So we’re gonna go to the front end. All right, we’re not actually querying right now. So let’s see what is wrong. Insert data, advanced custom field, review call out, insert, that should be a, oh, it’s like reverting it back, okay.
0:38:20
I don’t know what’s, it’s still down here. Let’s reload the builder. Okay, so the page refreshed. It’s not freaking out on me anymore, but the problem is it’s still not pulling any data. So remember how I guessed about the review slug? I’m going to just go double-check this. I actually have this up. So if you see this, we have reviews here.
0:38:45
This actually custom fields. Let me go to custom post type. Edit post type reviews. Look at the slug, it’s not review, it’s reviews. That’s why the query was not able to find what I was asking it to find. So what I’m gonna do is we’re gonna edit the query. So we hit this little button, edit query. It saved everything that I put in. So I just changed this from review to reviews, hopefully.
0:39:08
And then we’re gonna hit save on that. And you can actually double check it here. If I hit apply, it should fill this field out. So apply and what do we get? Do we get any magic? All right, it’s freaking out again. So I’m gonna hit save. Let’s just check the front end. Front end is always the way to go. If your repeater is acting weird, check the front end.
0:39:30
All right, oh look, made it to the end zone. Best service I ever had. And then this one was a lorem ipsum. Okay, so that’s actually that’s all good I think we’re on the right track. So this was the call-out. This is the card body So I’m gonna insert data here and advanced custom field review body. All right, perfect So it’s freaking out so it’s not going to query anything, but I’m gonna keep trucking along here this I did not put why didn’t I put a name on this? Okay. This was the review card name This should be review card source review card source All right, so I’m going to double click this insert. I actually don’t know if this is the yeah I think it is advanced custom fields review source. Okay, and then this is obviously the review headshot So I’m going to do data advanced custom field, reviewer headshot, size, thumbnail, and insert.
0:40:30
Okay, and there it is. Oh, it pulled that in, didn’t it? All right, cool. And then what is this? The name, so let’s double click, insert data, advanced custom field, reviewer name, insert, and save. All right, next I’m gonna do the stars. Those don’t need to be pulled in from anywhere. So I have the ReviewCardStars wrapper. I’m gonna set this to horizontal flex, middle alignment, and left align.
0:40:58
And then I’m gonna put in an icon. And then we’re gonna need to put a class on here. All right, so I’m gonna do ReviewCard, double underscore star, like just star, singular, star. All right, and then this is gonna be color. We’re just gonna grab like Let’s grab like review review stars are typically yellow here like a goldish color. So we’ll do that and then we’ll do 24 pixels maybe and we’ll choose star All right. Let me see if the Oh oxy ninjas core might have a better star. Oh, no, it doesn’t that’s like a It’s too rounded right let’s do linear linear is sharp, but it’s only a it’s not a filled in star I don’t think I don’t know why I can’t see my star. This is this is kind of ridiculous alright, so solid Star linear icons alright, so we’re gonna go one two three four five wow that’s that’s absurd Hold on. It’s definitely it’s freaking out on me like look at the this is 55 Even though I clearly set review card stars Our star to 24 Was I duplicating that now I wasn’t duplicating the diff. Yeah, there’s my icons right there Yeah, they’re all set to 24 pixels. The the repeater just has no idea what’s going on So I’m gonna refresh and then we’re gonna look at the front end while we do that.
0:42:27
Okay, there’s my stars. I definitely don’t need that solid look. We need it because what it’s doing is putting the circle around the star. So we’re gonna go ahead and fix that. But look, we got three different headshots. We have Tom Brady, Derrick Henry, and Mr. Johnson. Sure Critic, Sure Critic, and Facebook. Okay, like we’re off to a really good start here. I know this looks terrible.
0:42:48
If you didn’t know me, you’d be like, I can’t follow this guy, this looks like absolute trash, right? But this is where we start, like you gotta have a starting point, okay? It’s gonna get pretty, I promise. All right, did this load? Oh, okay, it hasn’t reloaded yet. I was like, wow, this is really on the struggle bus. Okay, now, okay, great.
0:43:06
It’s reloading again. But you see now in the builder, we actually have something to work with. This is, by the way, like, and I think going forwards now that I’m you know Running into these issues constantly during tutorials. I by the way, I don’t always run into these issues It’s just always during tutorials But I may just start building these cards Outside of the repeater and then pulling them in if I have an extra div I have an extra div or if it takes longer To pull them in it’s better than all of this nonsense right here, right? Okay, so let’s come down to our structure panel and see what we’re working with here.
0:43:38
So this div right here needs to be 100% width. This is gonna be, I thought I assigned that too. Didn’t I call that meta or something? Or, oh, this was meta. All right, so we’ll do review card, and this will be person wrapper, okay? Because this is all the person field, all right? So we’re gonna do width 100% on this, perfect. And we are gonna do horizontal layout. And then I just need to reorder these.
0:44:08
The image needs to come first. And now you see I have this left aligned. And then this image needs to be much smaller. We’re gonna do like 12 rim and 12 rim. It’s already square, so I guess I don’t need to set a height on it. Let’s do eight, that’s much better. And then we’ll do borders 50%. You’ll see it’s gonna start coming together real quick. All right, margin M, we’re gonna do one.
0:44:35
And then we’re also going to align these to the middle and to the left. And then we are going to do, hmm, okay. We can do this a number of ways. Just to make this easy, I’m gonna put margin bottom on all these. So margin bottom, let’s try M. That clearly didn’t work, but the repeater’s clearly freaking out as well, again. So margin bottom M. You know what it is?
0:45:04
Let’s try this. I’m gonna go to normal mode. Let’s go back to normal mode. Let’s go to query and apply query params. I may have to refresh again, but for some reason, like in singular mode, I think I’m running into these problems a lot more than I’m running into them in the regular mode. So let’s go ahead and just refresh. We can afford a quick little refresh here.
0:45:25
So now you’re gonna see all three of them because I’m no longer in that single mode. And I’m thinking in this one that it’s, okay, margin bottom M is doing absolutely nothing. That’s really interesting. These margin bottoms are not doing anything. Somehow I got a zero. I don’t remember when that happens on the ID level. All right, margin bottom M. Then on this reviews wrapper, we’re going to do margin bottom M. Then I need to fix these icons.
0:45:54
Because I put a class on the icon, because I’m smart like that, I can fix them all at the same time. We’ll go to none on this. None, please. Okay, thank you. And we’re gonna go back to Font Awesome and we’re gonna choose a normal looking star. That’s the only thing, by the way, that you can’t do on the class. The class does not choose the icon, okay?
0:46:17
Which is annoying. So I’m gonna go to Font Awesome, choose that. Font Awesome, choose that. Font Awesome, choose that one. And this, we don’t need six stars. We’re getting a little overzealous with our reviews here. All right, so I’ve got five stars. And then on a star, I’m gonna go to advanced size and spacing, margin, M, 0.01, 0.02, 0.03, 0.05, one. No, that’s way too much, 0.2, 0.1.
0:46:46
Okay, let’s do that. Let’s give a little spacing here. This is our call out, remember that? All right, so we’re gonna do font weight 600 on this. Oh, well, don’t make that mistake. You see what I just did? I applied that to the C margin bottom M. By the way, this new lock selector styles, I highly recommend doing that on your utility classes. Review, call out, perfect, typography, this one definitely gets the 600.
0:47:16
This is going to be, let’s see, this is the body. Let’s make this a little smaller. I think we’re at 1.8 as our default font size. I’m going to go to, see that? It defaulted to my utility class, but look, the selector panel is locked, so I didn’t make the same mistake. I’m going to go to typography, rim, and we’re going to do 1.5. Yeah, cool.
0:47:40
And then we’re also going to lighten this a little bit. I think that’s perfect. Create a little contrast. On the name, we’re actually going to do typography again, 600 and then this source, and then we’re going to double-click this, double-click this, and we’re gonna say verified, sure critic, okay, the short code, and I’m gonna go to the end, review. That’s how you would read that.
0:48:08
And then I’m gonna click out. So now it’s gonna say verified sure critic review. And then I’m gonna go to typography, and I’m gonna go to uppercase, and then font size, we’re gonna do like 1.3, okay? And then I definitely need to change the color on this one too, not that color, because that’s like you can’t see it. Let’s do that color right there. That can actually be a little bit smaller, I think.
0:48:35
So let’s go to typography, 1.2. Perfect. Then the line heights really taking care of the spacing here. I don’t need to really add any margin classes to these. So we’ve got our review card. Now, what I’m going to do is actually build this into a section with a background color here something like Something like that maybe all right, and so what we’re going to do is make the review card background color white We’re just going to make this pure white Fff all right, and then we do need to add some size and spacing to this look at this I have my resources back so I can jump over here we want this to be from three to five maybe on the rim oh wow my settings aren’t right we’re gonna choose rim we’re gonna choose clamp and no Safari fixed for right now okay clamp let’s see how this works padding none paste apply all that’s definitely, what is that doing wrong?
0:49:38
Let’s go back here. Oh, it changed my range. Come on, bro, don’t change my range. All right, copy, back, service, paste, apply all. The five is a little overzealous. So let’s go from three to four. Grab that, okay, and paste, apply all. And I think our gap is a little overzealous too. So let’s go with a gap of M. Gap of M, please, thank you, okay?
0:50:14
That’s much better. All right, and we’re gonna hit save. Perfect, Tom Brady, sure critic. This can actually be 100% width. So it stretches to the rest of the inside of that container, and then I’ll hit save. That way it won’t wrap names like this, hopefully. Perfect. Now you see something is wrong here. We have, because these reviews are different lengths, even though we contained them with the character limit, they’re still varying lengths, and that’s gonna be natural.
0:50:45
So we don’t want the person to float up here like in the middle of the review card when other reviews around it are longer. Alright so what we’re gonna do is grab that wrapper that I put all this stuff in and I’m gonna go to size and spacing margin top is gonna be auto and it’s gonna force those to the bottom. So the gap is now gonna be between the review text and the person which actually looks a lot cleaner because everything at the top is aligned and everything at the bottom is aligned. Everything in the middle is more flexible. All right. So that looks pretty good for a review grid in my opinion. I think we do need to round these corners a little bit. So we’re going to go to borders and border radius M.5 should do the trick. And we’ll go check back on the front end. Look at that. So we’ve got some pretty clean review cards here.
0:51:38
Now let’s button some stuff up. We gotta click on our image and do our alt text. And so we’ll say review by, check this out guys, review by, and it’s a person, right? So I’m gonna hit data, and we’re gonna go to advanced custom field and reviewer name insert. And actually it took out my review by, so I’m just gonna add that back in. Review by of, let’s see, we’ll just do that, reviewed by and then their name.
0:52:08
So this will ensure that every alt tag is unique and it’s actually unique to the person’s headshot that is on, which that’s what an alt tag is supposed to be. Review by blank. Okay. Yeah. I was thinking about what else we might want to throw in there, but let’s just keep things simple. So here we are. Let’s verify that we have some working alt text. There it is, review by Tom Brady, my man.
0:52:33
No, not my man, but I respect him. Okay, so alt tags are in place, images are in place, got their names, got their verified. Look, verified share critic review, verified Facebook review, very cool, right? Review body is in there, review call-outs are in there, everything’s spaced pretty well, it should be automatically responsive. Come on now, this ain’t no hobby, this ain’t no hobby. Okay, so let’s take our, sorry it’s late, I’ve got a little more energy than normal late at night.
0:53:05
So I’m going to grab this and we’re going to head off to service page number two. All right, cool. So we’re going to go to admin and we’re gonna go to services and service number two, edit with oxygen. So effectively all I have to do now is I have to paste this repeater onto, which I hope I grabbed the repeater and not, yeah, I’m pretty sure I did. We’re gonna paste that repeater into services two, we’re gonna change the query so that we change what we’re querying, right?
0:53:35
That makes sense. And then we have to do our carousel. Boom, look at that. Might want to not just randomly put that in. We might want to add that to a section. All right, cool. So there’s our repeater. Let’s go to Query, Advanced, Edit Query, Reviews, Post-in, Data. It’s actually, it might just work right out of the box. It does. It works right out. We don’t have to change anything. What was I thinking? All right, so let’s close service page one.
0:54:03
Let’s go check out service page two. There it is. So let’s just change our background color here. You know, if I was smart, I would have copied the entire thing, the entire section with our styles in it. I don’t remember exactly which one I chose. Let’s go with that one. I think it was that one. All right, I know for sure up here is like this dark charcoal and then heading we’re gonna do service number two we’re gonna add some text and this is the this is the lead for service number two and text light Okay, perfect, save. See how fast that was? But now look, if they want information on service two, they see reviews for service two, except we have a problem with Ms. Johnson.
0:55:01
All right, so let’s go to add edit post types, reviews, Ms. Johnson, where are you? Oh, we didn’t add a headshot from Ms. Johnson. Okay, before we do this, oh, by the way, because we don’t have to change the query, let’s just add a little. As stuff comes to my brain, we’re going to add it in. I’m going to go to service two, we’re going to edit, couple of things we’re going to do.
0:55:25
Number 1, we’re going to make this repeater a reusable part. We’re going to call this related reviews. Boom, and it’s global. Check this out. So now, I can go to service number one and edit this service. We’re going to load the builder. If you don’t know what a reusable part is, while that loads, let’s go back to camera. So if you don’t know what a reusable part is, it’s like a mini template.
0:56:00
So I created this little reviews grid. It’s all custom query, right? I’m gonna throw that onto a page, create a reusable part out of it, a reusable element, and now I can use that reusable part on all these other pages, but it’s global. So I edit it in one place. If I need to make changes, like we gotta fix this headshot issue, which I’m gonna show you, any changes that I make to how this related reviews repeater functions is made in one place and it affects everywhere that I’ve used that repeater.
0:56:31
So it’s super, super scalable. All I have to do is remove this repeater and then you see when I’m building a new page, I go to add, oh, I should probably screen share this again. So I’m on service number one, I deleted the repeater and I’m gonna go to add and I’m gonna go to reusable and there it is right there and I can say single. Single means the global version, editable means I want a unique version that I can make changes to, that won’t affect any of the others.
0:56:58
So I’m going to add single and I’m going to hit save. You see now it queried right there, the men for service number one. So I go to front end, there’s service number one, it’s the guys. If I go to service number two, it’s the guys. This element is controlled all in one place. So when I go to fix this review stuff, you’re going to see how that’s going to work. So I’m going to go to admin.
0:57:21
I’m going to go to Oxygen and it’s not block library, it’s templates. So this is one of the things, I explain this in my templates workflow. It sticks it in here with your other stuff, which is odd. It’s also odd that you’re going to see like, it’s only going to load this grid and it’s like full screen and it’s not gonna look exactly the same. So just if you’re prepared for that, it’s not gonna be a big deal. But this gives you tremendous power because you have the ability to edit this one thing that’s used in all these different places, just like if you were editing a template, which that’s why they put it in the templates, but it’s not an actual page template, it’s an element template, let’s call it. Okay? So here it is. So the first thing I want to do is I want to grab this image and I want to say, hey, if this image doesn’t exist, if client A comes along and adds a review and forgets to put the image or doesn’t have an image, then don’t show the image and then we won’t break our cards.
0:58:22
Okay? So I’m going to click this little button right here. This is condition settings. Set conditions, add condition. I’m gonna come down to here to dynamic data, advanced custom field, review headshot, because that’s what I’m working with. I’m trying to apply a rule to the headshots. So I choose headshot. Please select what you want to insert. I believe it’s image URL.
0:58:47
Okay, I don’t know. We’re gonna have to check on this. So I’m gonna say is not blank, okay? Because here’s the rule, show the headshot if these conditions are true. So if the field is not blank, then show the headshot. If the field is blank, don’t show the headshot, right? So field is not blank, and we’re gonna do that, and then I’m gonna hit save. And let’s just see if Miss Johnson Look at that. Let me say it again. This ain’t no hobby, right? Miss Johnson doesn’t have a photo Because she don’t have a photo right that makes perfect sense. Now. The thing is is the cards not broken. There’s no extra spacing Why is this because I added the margin just you know from experience I added the margin to the photo knowing that if like if I had added the margin to the left of the text then when the when the headshot goes away the margin is still there but because the margin is attached to the image when I take away the image I take away the margin and so Miss Johnson is still all lined up right here right she doesn’t have a headshot but her card isn’t broken so there’s a little bonus for you all right cool so that’s good I don’t think there’s anything else I needed to change.
1:00:03
Like that was fixed. We’ll just leave her like that. So we’ve built our grids. We’ve got service page number one, service page number two. We’re showing the grids properly. We need to go build a carousel now. We need to build a carousel. So let’s go to, we’re gonna do this on the homepage. Why not?
1:00:19
So let’s go to training.digitalgravy.dev. Here’s our homepage. All right, we’re gonna go ahead and edit this. And so think about this from a traditional business website standpoint. The service pages have reviews for those services. The homepage has all reviews. Let’s just show them all. And instead of putting it in a grid that everybody is used to, let’s put it in something interactive. Let’s put it in a carousel that really calls attention to itself, makes people want to interact with it.
1:00:50
They can grab it and slide it around they can click arrows left and right We’re gonna make custom arrows for this We’re gonna we’re gonna deck this out. All right, so stay with me We’re gonna go into we’re gonna make another section here. We’re gonna make this background color blue. This is gonna be vibrant We’re gonna really call attention to these these carousels. Okay To these reviews. So what I’m gonna do is I’m going to hit add. Now the unfortunate thing, let me think about this. I don’t know, I’ve never used a reusable part inside of a carousel. That’s the only thing I’m not sure about. However, it’s not a deal breaker if it doesn’t work.
1:01:32
I’m actually really doing this as a test right now. Let’s add the carousel. This is an Oxy Extras carousel. I’m going to add the carousel builder. The way the carousel works, we’re going to go into structure panel. You see you have a carousel. You literally stick the repeater inside the carousel. Which that’s why I don’t know if this is going to work with a reusable part.
1:01:55
We’re about to find out. I’m going to do related reviews and single. I’m just going to hope for the best. Now you see I have my repeater inside my carousel. Let me hit save. I just want to see what’s going on on the front end. I have no idea what this is about to do or how this is about to behave. Okay. Oh, what am I doing? I’m not even thinking. We can’t do this anyway because this isn’t a related reviews thing. This is a all reviews thing. All right, so I’m going to go to services, service one. So here’s what I’m going to do. I’m going to steal one of these review cards.
1:02:31
So I’m going to edit service, open anyway. And while that’s doing that, I’m just going to go ahead and add a repeater manually. And I’m going to set the query. So we’re going to go to query. And I don’t even have to do the advanced repeater now. I can just do a custom repeater, set the post type to review or reviews. Well, not ACF field, don’t do that. Where’s reviews? There’s reviews.
1:02:56
Then filtering order counts, I don’t have to do any of that stuff. There it is, 1, 2, 3, 4, 5, 6. It’s got them all loaded in. Now, here’s the thing with the Carousel Builder. The Carousel controls the repeater now. So you don’t put grid classes on it. I wasn’t thinking at all when I was like, let me just throw the reusable part in there. You don’t control the repeater with the repeater.
1:03:21
The carousel controls the repeater. It controls the cell size, it controls everything. You’re gonna see as we build this out, okay? But I do need to steal one of my cards so that I can see. Okay, so I’m gonna have to duplicate. No, I’m gonna have to add one real quick. So reusable, related reviews, but add an editable version. I’m going to grab this. I’m hoping that even though that’s a default div, it allows me to actually capture that div.
1:03:50
So now I’m going to delete that. Delete that repeater, hit save, and go back, and then I can actually get rid of that. Cool. I don’t need that either. I’m gonna go into the div for the repeater and we’re gonna add a div in. And that’s actually fine. Let’s just let it have an extra div for right now. But you see, I didn’t have to do all this work over again. Because I used proper naming conventions, right?
1:04:17
Like this wasn’t review card, grid, or review. Like it was just a review card, that’s it. I built a review card, I can use that review card wherever I wanna use it. So I’m gonna hit save on here, since nothing is broken yet. And let’s just go see what this looks like on the front end. And then we’ll talk about this carousel settings. Okay, so you can see this one’s super long. This one’s the normal length, and then we’ve got them different heights.
1:04:41
So we’re going to click on carousel builder. I’m going to call this review carousel. And then I’m going to start here. The carousel content by default is repeater, which is fantastic. I’m going to go to cells and I’m going to set the number of visible cells to three. Then cell height, I’m not going to mess with. Rim, space between cells, we’re going to do two rim.
1:05:05
Then selected cells and previous next cells. This is, you can make the next cells and the previous cells look different from the selected cell or cells. All right like explaining this once to you is it’s not you’re not going to be a pro like you’re gonna have to use this element a few times to really understand how it works. Next I’m going to click on carousel group cells by no grouping. I want just one cell at a time we’re gonna go I think you can actually choose one. Okay let’s I think that’s a default anyway and then I’m gonna do cell alignment left now what sucks about this is like when you’re doing this on a class you can’t actually see the buttons you’re clicking so it’s just another quirk in the system right so contain prevents access scroll I’m gonna enable that overflow and then we can actually check sometimes we’ll have to go to the ID, I think on some of these, we’ll see how it works.
1:06:03
Overflow, allow cells to break out of the carousel viewport. Have you ever seen those carousels that go off the screen? That’s what we’re about to build. So I’m gonna say that they are visible. Adaptive height, I’m going to disable because I don’t want the heights changing, the carousel height changing based on the height of the review. Enable carousel at this breakpoint and below. Yes. Full screen option. No. Force equal cell height. Enable. Apply parameters. Okay. Now it’s actually not setting the equal heights. I’m going to go on to my repeater and we’re going to put a stretch class on there and I’m going to see if that works. We might have to go into this div. I’m not sure yet. Yeah. Into that div and do a stretch class. Let’s just see what we’ve got on the front end.
1:06:51
Now, look at this. Guys, guys, look how fantastic. We’re looking right out of the gate. Okay, we have arrows that are in the wrong place, but we have a pretty dope off, scroll off the edge of the screen repeater here. I do believe we need to go to this section and go to layout and we’re gonna go to, not layout, what am I doing? Yeah, I think it is layout.
1:07:16
Yeah, down here, overflow hidden, because this is going off the screen, we don’t want it to really go off the screen and make a horizontal scroll. So we’re gonna make the overflow hidden on that and save. You wouldn’t see that on desktop, but on mobile you would definitely see it. So we need to take care of these dots right here. I don’t like those and I don’t want arrows. Okay, well I want arrows, but I want my own arrows.
1:07:38
All right, so let’s go here, go to the carousel, and let’s check the behavior interaction first. Sometimes I do have these autoplay to get people’s attention, which basically it’ll just scroll it even when somebody’s not scrolling it. Resume autoplay after user interaction. I’m not gonna put autoplay on for this. Wrap infinite cells, I wanna enable, I actually wanna enable that at the ID level, like I wanna make sure that that happens.
1:08:04
Free scrolling, free scrolling is they won’t snap into a location, which it’ll just like, it’ll land wherever it lands. It’s, I guess it’s personal preference, honestly. Ticker, blah, blah, blah, carousel can be dragged, that’s on by default, I believe. We don’t need to select it or anything like that. You can change the friction and the drag. You have so much control over this thing. Page dots, disable.
1:08:33
Navigation arrows, custom elements, right here. Custom elements. I’m gonna use custom icons, okay? And then, so what you do is you choose the class of the selector. We’re gonna apply these to the icons for previous and next. So this is gonna be prev-review and next-review because I want to associate these with the reviews carousels. None of this applies because we’re using custom elements, but when I apply those parameters, we can go look at it on the front end, you’re going to see now that I have no, wow, what’s it doing? I have no arrows and I have no dots anymore.
1:09:16
But people can grab and do this. Oh, that’s the, you can start over basically. We’ll see that. It’s kinda, it’s screwing up on the drag a little bit. I might have to turn that setting off. But usually I have more reviews by the way. I didn’t wanna waste your time loading in like 12 reviews. So we’re working with a few less reviews than I would normally have. But I’m gonna go ahead and make custom arrows now.
1:09:40
So I’m going to come down here and we’re going to add a div. We’re going to call this, what was that? That was review carousel. Yep, double underscore and this is going to be nav. I’m going to make it horizontal, middle, and center. Or now let’s do right, because I’m going to actually right align this. I’m going to go to Advanced Size and Spacing, Margin Left Auto to shoot it to the other side.
1:10:08
You probably can’t see it yet, but I’m going to put an icon in there. That’s perfect. We’re going to see if we have a cool Oxygen Ninja Core left icon. Yeah, let’s do that one. We’re going to give this a class. So this is going to be ReviewCarousel. So here’s a tip, just out of experience, this is going to be, they both get the same class, so nav icon, and I’m going to duplicate this, and then I’m going to change this to OxyninjaCoreRight, and we’re going to choose a similar one.
1:10:49
So they both have that class review carousel nav icon But then I’m gonna say review carousel. I have the right one selected right now nav icon Double dash right and then this one’s gonna be the left review carousel nav Icon left perfect alright, so now I can go to the main one, the class that they both have and change the color. So we can go to, let’s just do pure white on this. Great.
1:11:22
And then I can also add space. Oh, so this is where this would come in. So I don’t want spacing on both of them. I want the right one to be aligned to the right. So I’m gonna choose the class icon right and put margin left on it, okay? And that’s going to be REM 1 or 2. And then I’m going to go to the wrapper and I’m going to put margin top. And we’re going to do REM 3 or 4, something like that. And then hit save.
1:11:51
Now, the other thing I have to do is, let’s go back to our carousel builder and go to navigation arrows. I have to put these selectors on as well. So previous review and next review. All right, so I’m gonna go to my icons. Where did those go? Here we go. So this is gonna be previous review. And then this one is gonna be next review. Next review.
1:12:14
And then I’m gonna hit save. And then I’m gonna go view on the front end, okay? And you can see that it’s, I think that’s it’s caching is why it’s like, cause I had scrolled to the end and it’s like trying to remember that or it’s that other setting Which I’m going to turn off right now because it’s driving me absolutely nuts. So I’m gonna go to Where was it behavior interaction and then wrap around infinite cells disable Save let’s see if that Straightens it out. Okay that does so now unfortunately like we get to the end you get to the end But then they can go backwards.
1:12:50
So that’s cool too. We’re not done with this section. And I actually need to change these cell colors. Because what we’re gonna do now is we’re going to make this look like it’s floating. So let’s go to borders. Let’s go to, not border, what am I doing? Effects, it’s late, it’s late, it’s getting late. 10.30, okay. Let’s go to box shadow.
1:13:12
That’s what we’re looking for. All right, so we’re going to choose that color. Same color is down here to match. Horizontal offset. We want this to be like minus 500. No, not horizontal. Sorry. Delete that. Zero. Vertical offset, minus 500.
1:13:27
That’s a little much. 300, 300, 400. Let’s do 400. All right. Did I make these white? Where’s review card? Where’s my review card? Review card. I did make them white. Well, why does this look white?
1:13:41
Why are they blending in? Or maybe my contrast ratio is off. I don’t know. All right, let’s make this section down here. Wow. Excuse me. It just did something to the padding, I believe. No? Okay, we’re good. All right.
1:13:56
Let’s do, there’s, so that’s one section. Okay, yeah, let’s do down here. Let’s change this to that. Okay. So let’s go to effects, box shadow, that one. Perfect. Dude, what is going on? All right, refresh. We should look like we’re, oh, that’s definitely a different color.
1:14:15
All right. I could have swore I hit the exact same one. Which one is it? This one? This one? This one? This one? There it is. Okay, golly. All right, we’re going to make this color.
1:14:29
We’re going to choose the icon and we’re going to make these blue, like that. All right, let’s see how that looks. There we go. So now it looks like we’re kind of, you know, they’re overlapping and it actually doesn’t look that great, honestly. I’m not liking that color. It might look better if this wasn’t light. Honestly, let’s, I keep saying honestly, maybe I should stop saying honestly. Let’s do that and let’s do advanced effects, box shadow, do that one.
1:14:58
Yeah, I think that’s gonna look a lot better. Okay, and then what we can do is we’ll take the padding off the bottom of this and then we can just use this as our next section. So this would be like heading and we’ll grab this and call this text light. Good. And then we’ll change this to not custom tag, we’ll do H2 and this will be like frequently asked questions. Okay. And then you would have your frequently asked questions content down there.
1:15:28
But this is how, okay, that made a lot of sense. Put that back in our carousel builder. Hopefully, it actually could break now. It doesn’t tend to do well with moving it around. All right, effects, box shadow. I got to change the vertical offset because I changed the padding on the bottom. So we’re going to go to 300. Let’s see what 200 looks like.
1:15:55
Let’s do 250, like right in the middle there. That’s good. Perfect. All right. This is looking sexy, honestly. Got nice navigation. Okay. We got to make sure that this is mobile responsive. So very quickly, we’re finishing up here. We’re going to go to page container 1280. Not looking so good. They’re getting squished.
1:16:22
So I’m going to go to cells visible two at this breakpoint. Then I’m going to come down. That’s good. I’m going to come down again and we’re going to do number one and then I’m going to hit save. Then what I’m going to do is grab this wrapper and I can actually, yeah, review carousel nav, size and spacing, auto right and auto left will center that navigation. Then I can refresh. That’s what it’ll look like there and then there and then we center right and then we get yes.
1:16:55
Okay, perfect. Refresh the page. All right, guys, I’m trying to think if there’s anything that we missed. No, I mean, let’s let’s go ahead and and recap. So we created custom post types. We added custom fields to the custom post types. We added bi-directional relationships. We put in all the information. We queried a repeater based on the relationships on service page one and service page two. We went to the home page, we queried all of the reviews, but we queried them into a interactive carousel.
1:17:31
I feel like this was a good tutorial. Hopefully you learned a lot during this process. If you have any questions, definitely don’t hesitate to ask. And if this scares you a little bit, if you’re like, this might be a little like, you know, above my pay grade right now, just, I encourage you, you know, dedicate a Saturday or something and try to build exactly what we just built. I built it in what? And how long have we been recording? An hour? An hour and 15 minutes? Yeah, like I’ve done it many times, right? It might take you a few hours, but once you’ve done it, it’s going to make sense in your mind. It’s going to all click, all right?
1:18:10
And once you’ve done it once, it’s like riding a bike, right? You’re going to be able to do it again and again and again. Then you’re going to be able to do it with FAQs. You’re going to be able to query services based on locations. You’re going to be able to do a lot of stuff that you couldn’t do before. So give it a shot. If you need help, we’re here to help you. The whole inner circle, like it’s not just me. There’s a bunch of people in the inner circle that are super knowledgeable, right? Leverage them. Make a post. Ask a question. Get some help from other people too. Alright, that’s it. Peace.
