Creating a Custom Event Management System (Part 03)

0:00:00
All right, everybody, welcome back. It is part three of building our event management system. You can see on the screen here where we are currently at. One change that I did make is I moved this all to InstaWP. So this is actually a live URL now. I’ll share it in the thread and people can actually interact with this. It was previously on just a local install.

0:00:24
Okay, so this episode what we’re going to tackle is event location. There’s going to be some logic involved in how we set up this event location. I just kind of have a rough idea in my mind of how I want to approach this. We’re going to do support for speakers. Really what I want to show in this training is if you want to relate things to events, you could have related locations, obviously, related speakers. It really depends on what the type of event is, right? And like I’ve explained, there’s many, many, many

0:00:58
different ways that we can structure events, and how you set all this up is really dependent on what the client actually needs. We don’t wanna necessarily create an event system that just has a feature for everything. We want to explore how to add different types of features. This episode is exploring how to add related things. So it doesn’t really matter what the related thing is,

0:01:21
this is how to think about approaching that and how to technically approach it and execute it. Because really with this kind of situation, I mean, we’ve got comedy shows and conferences, and we’re already kind of random, right? I wouldn’t need to do speakers on a site like this. But if you’re building out a conference website, then yeah, you definitely need to do speakers.

0:01:42
So this is how you would do that. So it’s not necessarily that this is the perfect application for this really random project. It’s just teaching you the concepts of how to add these things. And then we’re gonna add filtering by speaker as well, because filtering by things that are related is not necessarily obvious out of the box. So

0:02:05
we’ll go ahead and tackle that as well. All right let’s go ahead and dive in. So I’m gonna go back to the dashboard here. I’m gonna go to ACF and we’re gonna go to post types. So the first thing that we need is one post type for locations. Potentially this is where we need to get into the logic as well. I think definitely yes, but again this is a project by project thing. This is not every project We need a post type for speakers as well. That would be I would say a definite. So let’s do speakers first This is probably the easier thing to add between speakers and locations. I think speakers is the most straightforward So we’re going to do speakers as the plural speaker as singular speakers as the post type. I don’t think this needs to be hierarchical at this point

0:02:52
and we can come back and do anything advanced if we need to. I’m gonna go ahead and hit save and that is going to add speakers. Okay so I’m gonna I’m gonna come in and we will add our first speaker just so that we have one in the database and you know Grant Cardone we have like one of our dummy events is the 10X Growth Conference. So we’ll do Grant Cardone is obviously a speaker at his own conference. All right, we’ve got our first speaker in. I mean, this is how easy it is to create custom post types.

0:03:25
Now we just need to do things with this custom post type. So the first thing I’m gonna do is I’m gonna go back to ACF and we’re gonna go to field groups. And obviously we’re gonna need to assign fields to speakers. So I’m gonna say that this is our speaker fields, right? And I’m gonna come down here and assign this to the speakers custom post type. Now, any fields that I add right here

0:03:48
are gonna be organized under speakers and they’re gonna show up on the speakers custom post type. Now it’s just a matter of what fields do I actually want to add? Well, I wanna add a relationship field because I want this to be bi-directional. I could go to a speaker and I could choose the events that they’re a speaker at, or I could go to the events

0:04:08
and I can choose the speakers for that event, right? Okay, so I’m gonna call this speaking events. And you know, there’s many ways to do this. I used to say like related events or something like that. And I found that if you don’t give it the appropriate context, things start to get confusing. If you have lots of relationships going on, it does start to get quite confusing when you’re choosing these things in the database. So speaking events clearly is like associated with a

0:04:37
speaker. This is the events that they speak at. So I’m just gonna call it speaking events and we’re gonna filter by post type, which means when I am choosing speaking events, I want to choose from events. I don’t want to choose from any other post type. So I’m going to make it auto select or suggest events, nothing else. If it suggests other things, that’s going to be either confusing or at the minimum, very inefficient. You can also say that you can only choose published items, for example.

0:05:10
We don’t really need to do anything else there. Now, you can come to advanced and do bi-directional. The problem is I don’t have another field created to relate to this yet, to create the bi-directional aspect of this, which this is one of the, in this workflow, it’s one of the inefficiencies in this workflow, I would say.

0:05:30
Because now what I’m gonna do, and I like to do this in two different tabs, is go to events and add a field, and this is gonna be a relationship field as well, and I am going to say event speakers, okay? So you can see here on the speakers field, I used speaking events. So it’s in the context of the events

0:05:52
that they’re speaking at. And then on the events, it’s the context of here are the event speakers, right? So you can see how the appropriate context here should make things easier to understand and manage as this site continues to grow in complexity. Filter by post type, I want to choose speakers here, so see how we’re doing the exact same kinds of things. Only published speakers are able to be assigned to events. And you can also take off the like search post type taxonomy thing if those don’t really apply, because it again, it’s going to simplify. I’ll do

0:06:28
that on this one too. That’s why I like having these open in separate tabs, because when I do one thing that I want to also apply to the other, it’s just a quick switch back and forth. Okay, now that event speakers is made, I can go to bidirectional and turn it on because there’s another field that already exists. Okay. And this is another reason I’m doing this in different tabs. So I’m gonna refresh this one, go to advanced, bidirectional, and I’m gonna choose event speakers. Now these fields are bidirectionally related to each other.

0:06:59
So what I can do is I can go to 10x Growth Conference and I can come down and it’s going to give me a list of speakers to choose from to assign to this event. And that is fantastic. And notice there’s no other options like post types and search and all, I’ve deactivated all of that. Literally, they can only do the one thing that this field is for.

0:07:20
And we can go ahead and hit update. And so I’ve assigned Grant Cardone to the 10x Growth Conference. So what I wanna do is I wanna come over to 10x Growth Conference in the events and I wanna see if Grant Cardone is listed as an event speaker. And if he is, that means my bi-directional pathway

0:07:37
has been set up correctly. And that’s the power of these bi-directional relationships is some people want to go to an event and add speakers. Some people want to go through speakers or when they’re adding a speaker, be able to add them directly to an event. With this bi-directional pathway, you can do it either way, which is great from an efficiency standpoint. If you didn’t make it bi-directional, when you add a speaker, in order to add

0:07:59
them to an event, you would have to go find the events that they’re gonna be speaking at individually, sorry, I’m still a little sick, and add them to those events one by one. Not super efficient, right? The bi-directional relationship here is critical. Okay, so I now have speakers, a speaker, related to events, in this case, an event.

0:08:23
So what I’m gonna do is I’m going to go back and I’m going to refresh our builder so that it gets all of the new database information that we have available to us. And I want to decide, you know, do I want the speakers to show up on the event card right here or do I just want them to show up on the landing page? In this case, I think our cards are starting to get, yeah, there’s a lot of data on these cards now, right? So I don’t think this is necessary to put on the cards. And if we think about an event

0:08:52
that may have 30 speakers at it, I mean, there’s no way that is all gonna fit on the card. So let’s go ahead and only manage this on the template level. So I’m gonna go to our events, single template, gonna open that up. And let’s just go ahead and go to the front end. Let’s just take a quick look-see at what we’ve got going on here for this event template.

0:09:12
All right, where are we going to put speakers? One is I could put the little overlapping headshot type things from frames. Let’s see if frames is, I doubt it’s activated on this install. It’s probably going to give me an error here. Yeah, there you go. You got to activate your frames license.

0:09:34
Let’s go back real quick, go to frames license, go ahead and save and activate. And we’re gonna go to automatic CSS license and save and activate. Okay, and then let’s go make sure that it’s in settings under templates. Okay, save those settings there.

0:09:53
All right, we should be able to add now. And let’s refresh, nope, refresh this. Okay, and this is just an example, just, you know, I didn’t plan on doing this, but it does show you, you know, how frames can come in handy in certain ways. So I can do an avatar group alpha, right? Which gives me that exact layout that I was looking for here

0:10:18
and all I have to do is delete a bunch of the avatars and we could just put a speaker lineup right here almost. And this would be, obviously, you know, manage this depending on how many speakers are at these type of events and things like that. It’s just an example of another way to show you how to display this information. I will come down here, create another section,

0:10:41
and we will talk about perhaps, you know, a more traditional speaker grid, right? Okay, so let’s go ahead and what we need is avatar group alpha. I’m going to call this. We’re going to auto bend this. And we’re going to call this speaker avatars. We’ll call the speaker avatar row or yeah row speaker avatar row. Rename the classes speaker avatar row speaker avatar row. Sync the labels apply. OK, so that is effectively like my frame now, right?

0:11:16
It’s not, if I import it again, it’s gonna import a unique one because I have the setting and automatic CSS turned on where I can just safely rename classes now. And what I wanna do is on that avatar wrapper, I wanna go ahead and query. Now, what do I want to query? Do I wanna come down here and query the event speakers?

0:11:38
I could do that, right? So and this is one of the reasons I’m recording this third part to this tutorial because there’s two ways to do this. Most people only know about this way right here, which by the way is is viable. Okay? Let’s go ahead and we’re gonna say that we need to load in the featured image. All right, and that is going to load. Let’s see what this actually does on the front end. I think it’s just giving us dummy data right now. 10X growth conference, let’s go ahead and look at that on the front end.

0:12:09
So notice there’s nothing, right? Well, we do know in fact that there is a speaker, okay? For that event. So what we’re gonna do, I think it’s because Grant does not have a featured image. So we’re gonna go to all speakers, we’re gonna go to Grant Cardone, we’re gonna set a featured image,

0:12:26
and I don’t think, we’re just gonna use this for right now. We can get a real photo of Grant in there, I guess, at some point. Let’s refresh, and there you go, right there. See, now we do, in fact, have that. Now the design looks pretty terrible. So let’s go ahead and go to Bricks Templates, and we will edit this.

0:12:47
All right, and then we’re gonna bring in, the only real thing we need to do here is control our border situation. So I think instead of five let’s go with three and let’s go with white trans 10 or something like that. We might even do 20 at some point if that doesn’t look great. Actually no, you know we need to be a solid color. I’m remembering this because when they overlap you definitely need you definitely need the border. So I’m gonna go with our base. Let’s go, let’s just do it this way.

0:13:19
This is gonna be the easier way to do this. I wanna choose, probably this ultra dark, okay? Which we may not see when there’s only one, which is actually fine. We’ll take a look at this more in just a second. I wanna get more than one speaker in there. All right, so let’s do one more speaker at the 10X conference,

0:13:42
because I need these to overlap in order to really see what I’m doing here. So who else would be, how about Damon? Who’s Damon Shark, right? What is his name? Damon John, Damon John. All right, I think he was a real, so I’m just trying to remember like real speakers.

0:13:59
Okay, Damon John, let’s go images.google.com. Don’t actually do this, you know, this is definitely a copyright thing here. But, you know, for the purposes of our thing, it’s okay. I think I like this one better. Let’s go save image as Damon John. Okay, while we’re here, let’s just get a Grant Cardone headshot.

0:14:20
Okay, this is this one, not great, no, those are no, okay. Yeah, that’s okay. All right, how about this one? Save image as, okay, here we go. All right, we don’t need to over engineer, right? Let’s bring this in, go to our downloads, and there’s Damon, there’s Grant, bring him in. All right, we’re on Damon right now,

0:14:45
so let’s just select him, go ahead and hit publish. Fantastic, let’s assign him to the 10X Growth Conference while we’re here. See how easy that is. And then we’re gonna go into Grant Cardone and we’re gonna give him a featured image of this right here. Let’s go ahead and update.

0:15:02
Let’s go to 10X Growth Conference. And look at that. We have two overlapping images. Fantastic. All right. Doesn’t look awesome because Damon’s is like over to the right and Grant’s is over to the left. We might want to think about doing

0:15:17
some manual positioning controls on this. That’s a little bit beyond the scope of this tutorial. It’s probably something I would do on a real project, but not necessarily on this. We’re just getting the gist of what we’re able to do with this related data and how to query it. Now, let’s go talk about the second way to query this. Since we’re working on and we actually have data for the 10X growth conference,

0:15:40
I’m gonna go up to settings, template settings, populate content, and I’m gonna choose the 10X growth conference here. Let’s go ahead and go single post page, that would be correct. Let’s clear that out. 10X, there it is, okay. It wasn’t coming up for a second.

0:15:56
And then I hit apply preview, and it’s gonna switch what we’re actually previewing. So now I’m actually previewing the thing we actually have data for. Now let’s go back, and we’re gonna do this the other way. Remember I said there’s more than one way to do this. So I’m gonna remove this default relationship selector. I’m going to query posts.

0:16:21
We are going to query speakers. Now the question is, how do we only query the speakers that are related to this event? We’re going to go down and we’re going to use a meta query. And here’s what’s a little bit odd in how you have to think about this. So we are, this is a query loop on an event page. That event page has a post ID, okay? We need to query, you would think we would go in and use the field group, like if I go back to field groups here and I’m under events,

0:16:53
that we would query the event speakers, right? But remember, we’re already querying speakers. What we need to know is the events that those speakers are at. And if we go back to field groups here and we go to speakers, we see this speaking events. That’s really what we need to query here.

0:17:13
They’re that speakers speaking events, okay? And if that speaking event is equal to the event we’re currently looking at at the time, that post ID, then we need to show that speaker, okay? That’s really what we’re querying here. So our meta key is going to be the speaking events of the speaker. And then our meta value is going to be the post ID of the current event we are loading or the visitor is looking at. And then we’re gonna say, are these two things alike? Okay, and if those two things are alike, we should get exactly what you see here.

0:17:49
This was from the preset of just choosing related speakers, okay? So I’m gonna refresh and there you go. Now they’re in a different order because I got to change the order, but it’s querying them. And we can check this by going and adding a third speaker. Okay, and so Nick D would be a speaker at his own concert. Okay, even though again, we wouldn’t really,

0:18:12
that doesn’t really make sense in that context. This is more for conferences and things like that. But we just wanna check and see if we add a Nick D kind of thing here, does he show up in that query? Or is he excluded? Because we have not assigned a Nick D to the 10x growth conference. So on the 10x growth conference page if Nick D, so we’re refreshing now, if Nick D were to show up here then it just means we’re querying all the speakers and that’s not going to do us any good. But I’ve just added

0:18:39
a new speaker Nick D, I’ve assigned him to a Nick D event, did not assign him to 10x growth conference and so you see he’s not showing up on 10x growth conference. Now what is the benefit of doing it like this right? Well if you notice when I chose the preset right here of event speakers all of my controls went away. Everything went away. So I can’t do ordering by date anymore, I can’t do the post per page, I can’t I can’t do it none of this stuff exists. But when I use the meta query route all of these controls remain and that’s really what I want. So remember I just said they’re out of order, so I can do ascending and I can go refresh

0:19:19
and we see Grant now comes first. So I have full control over this. Okay, that’s one place that we wanna add them. The next thing that we wanna do is we wanna add a standard kind of grid section down here. So we have the main, we have the post content and then I’m going to add a section tag here. We’ll drop that in. This is going to be,

0:19:43
we don’t need a container for this section. Okay, we just want the semantic section tag more or less. We’ll see what we’re naming these things to. I’ve main, grid three, two, cause this is a template, right? So it’s not, you don’t have to use classes here if you don’t want to. So sometimes you get in a situation where it’s like,

0:20:07
man, I wish I had anyway. But what we’re bringing to Automatic CSS and Auto BIM 2.0 is the ability to actually BIM and copy styles from ID to class, and then get rid of the ID styles. So that’s going to all be done in one click. So then in that situation, you really won’t have to worry about it.

0:20:25
But I’m going to use a, let’s use a container gap situation here and see if that makes sense. And in this section right here, I’m going to add a heading, all sections need headings. This section by default is centering everything, so I’m just gonna move them off to the left.

0:20:40
And this really needs to be an H2. And we’re gonna say event speakers, awesome. And then I am going to add a div inside of here. And this is going to be my grid. Notice that this is getting an auto gap here. I’m just gonna move this to content gap instead of container gap. So it’s easy to override

0:21:01
these kind of automatic situations here. This is gonna be our grid of speakers. And because we don’t have a ton of room here, we’re just gonna make this a two column grid. So I’m gonna come up here and say that this is a and in fact I can just do a grade of auto to write Let’s take off the normal grid to class just have a grid of auto to and then I’m going to put a div in and another div Just like that. And so we should see see what’s going on with our auto gray. Oh

0:21:31
Auto grids don’t work so well in smaller containers like that We could use a variable grid here. I’m just going to use a standard grid. We can keep this nice and simple. And then I’m just going to say that on that break point right there actually. So that is the L break point. Yeah. So we’re going to go grid one and L. Okay. So at the L break point, we switched to one column. So now we just have a little responsive two column speaker grid and I can put in my speaker cards here now I am going to BEM this right so speaker card, let’s think about what I want in my card. I’m gonna go with a block block situation So we’re gonna have a media wrapper and a body wrapper

0:22:16
I’ll go ahead and open this up and let’s actually minimize all of this so you guys can see and my fat heads not in The way okay, so this is gonna be the media, media wrapper. This is going to be the body wrapper. Obviously, we’re gonna want some media in the media wrapper. Name that media. And we’re gonna just use the featured image here. So it’ll pull that in, perfect. And then in the body, we’re just gonna have another heading

0:22:46
and then a little bit of text. And that would probably be a little, you know, bio blurb or something like that. In fact, let’s just call that bio and we’ll call this speaker name. And we’ll call this speaker bio. Descriptive labels are good, right? Okay.

0:23:05
Media wrapper, we’ll call that head shot. Ah, avatar. I think, you know, if we standardize our naming conventions here. Let’s call that avatar avatar rapper, okay? Fantastic all right speaker card. I think we’re good to go here. I don’t know that we need anything else Let’s bend this so we’re gonna have a speaker card avatar rapper avatar body rapper speaker name speaker bio I really like that okay. Let’s go ahead and apply classes now. We are good to go all right What we want to do is we want to,

0:23:38
before we even really style this, let’s just loop it, right? Make sure that our loop is working properly. So I’m going to use a query loop. We’re going to use the exact same methodology that we just used. We are querying posts. We are querying speakers. We are going to go down to the meta query

0:23:53
and we are going to say, speaking events. And we’re going to check for the current post ID. We’re going to say, are those two things alike, not lesser or equal. Okay, and there you go. We are getting a query. I don’t know if it’s an accurate query. Let’s get the post title of that speaker and let’s go ahead and refresh for the 10x. Look at that. Look at that, my friends. Okay, so immediately what I want to do with this avatar, I want to come in and wrap those with a figure tag and I want to put an aspect ratio of 16 by nine on these.

0:24:27
We’ll go object fit of cover, and we will do an object position of 50%, 20%, something like towards the top. That’s typically where a headshot, the core data for a headshot lives. And now you see that we are getting images that are exactly the same size. Now, what I want to do is I want,

0:24:47
yes, this is an H3 technically, because this is an H2 that makes this an H3. But really what I want is I want this to be the size of an H4. So I’m gonna choose H4 from there. In our body wrapper, I’m probably gonna have, I’m probably gonna have a background on these cards. So let’s go to speaker card,

0:25:07
and let’s go to background color here. And I’m gonna use my BG dark backgrounds color and I’m going to use my text light Color here on my speaker name. I’m definitely gonna go text light there But I think I’m gonna do text like muted here. Okay, so the typography is text light muted Excellent now in my body wrapper. I’m just gonna add some padding. So we’re gonna go padding and I’m just gonna take a look at this. Maybe M looks pretty suitable. That looks pretty good. Then we’re going to go give this a content gap. I’m going to decide, is that content gap a little too much?

0:25:50
Maybe it is. I’m going to show you a different way to do this. So I can do content gap. Then on the body wrapper, I can literally just come down and I can assign a new value to the content gap variable, content gap of space S, okay? Or XS. I can really just dial it in,

0:26:10
but I’m still, I don’t have to abandon my content gap. I’m just altering the value of my content gap. Let’s change that to a paragraph. And I also wanna go with a little bit of text S here, okay? And I wanna give our speaker cards a little bit of a border radius. So I’m going to link these sides up and then we’re just going to go with radius M. I thought I linked the sides. I guess I did not, but now they’re linked.

0:26:37
Okay, let’s just go check and see how we’re looking now. Okay, notice that the tops did not get the border radius. And the reason is because the images are overflowing the edge of the card in the corners. And things are looking really, really, really good. Okay, in our grid section here, we wanna go with a gap of, we could do our grid gap and then we can say, hey, you know what in this,

0:27:08
let’s say that this is a speaker grid, okay? We’ll call this an event speaker grid because that’s really what it is. It’s the speakers for an event. And we’re just gonna come down and kind of do the same technique that I just did, right? We’re using grid gap, but we’re gonna say here that we need a new, more appropriate value for our grid gap,

0:27:30
which might be like space M for this particular grid, or even S. Let’s go with S. I think maybe a tighter, a tighter, yeah, a tighter look would be better there. Okay, and you can make these cards any way you want. That’s not, the design of this is not the point. The point is how do we create these relationships?

0:27:50
How do we query based on these relationships? And then the next question you ask yourself is, do I want these cards to be clickable? Do I want them to go to another page where I see a speaker bio? Do I want a modal to appear and the speaker info is in the modal. Okay, that’s all fine and dandy.

0:28:08
That’s visual UI, UX type stuff. It’s not necessarily like how an event system has to work or not work. So it’s a little bit beyond the scope of this tutorial. But once you’re here, it’s not, you know, the next step of adding a modal and getting this stuff inside of a modal and a bigger form. That’s really not all that difficult.

0:28:26
And I’ve done tutorials on that kind of stuff before. Now, I was gonna do related locations all wrapped in the same exact training, but the related locations is really, really involved in itself. There’s a lot to think about there, so it’s gonna have to be its own separate training, but this gets you started on how do I begin

0:28:48
to relate things to these events that I’ve been creating. And how do I loop through those items, those related items? I showed you a different way to do that today that is much more powerful because it retains all of your other controls. How do I start to display information about related stuff in cards

0:29:07
and in the actual event template? That all was covered in this tutorial. Locations is a little bit of a beast. So we’re gonna do that as a separate episode. There’s a lot of logic involved. There’s a lot of conditions involved. There’s a lot of, a lot of, a lot of, a lot of stuff involved, right?

0:29:23
So that’ll be in the next episode. And until then, thank you guys for tuning in. I’ll be back with you very, very soon. I’ll be back with you very, very soon.

0:29:31
Peace.