Creating a Custom Event Management System (Part 02)

0:00:00 What’s up everybody, welcome back to episode two of building a custom event management system in WordPress.

I’m going to go ahead and share my screen, take a little bit of a recap of what we did in part one. We’ve got these facets over here for searching, sorting events, filtering events by category.

We’ve got a nice little list of event cards here. We’ve got another facet up top that counts the number of events.

What we’re going to focus on, of course the logic is there to hide events that have happened in the past. What we’re going to do next is we are going to add support for multi-day events.

We are going to add support for the user choosing whether they want to see a list of events or a grid of events and then we are going to tackle a custom event landing page. All right, so let’s go ahead and get to it.

I’m going to go into the back end here. We’re gonna go to ACF and field groups and events.

One thing I’ve noticed that when I’m editing an event, I like the date information to be at the top. Currently it’s at the bottom.

So I’m just gonna move this little group of custom fields, which has the date and all of this stuff here to the top. That way when you’re editing an event, it’s the first thing that you choose.

You choose the dates first, okay? Then you can go in and choose the event type, whether it’s free, paid, so on and so forth.

Okay, so let’s talk about multi-day event support. More or less, right now if we look at this event group, we have an event date, which is just a single date, which will effectively be the start date.

In fact, I can actually change this to event start date. I don’t wanna change the name of the field or like this is the ID of the field basically because that’ll erase all of the current information that’s in there.

But I can change the label no problem. So this is event start date.

And we have the ability to mark an event as an all day event. And the event can have a start time, it can have an end time.

And I think what we need to do for multi-day events is if it is a multi-day event, which we’re gonna have the user select if it’s a single day event or a multi-day event. If it’s a multi-day event then it shows an event end date, okay?

And this will allow us to display the range. Here’s the start date, here’s the end date, which is different from the start date because it’s a multi-day event.

And then the start time and end time are still going to be the same, but what this allows us to do is if it’s a single day event it can have a start time and an end time that apply to that day. If it’s a multi-day event, then we’re gonna have an event start date, an event end date, and then the start time’s gonna correspond to the time the event starts on the start day.

And the event end time will correspond to when the event ends on the final day of the event. So event start time, event end time, don’t really need to change in order to have multi-day support.

All we need to do is add an event end date. And so I’m gonna duplicate this.

We’re gonna remove the word copy. And this is gonna say event end date.

And then I’m gonna say event end date here, okay? And so we have a start date and we have an end date.

But the challenge here is, you know, we don’t always want a start date and an end date. We only want to show the end date if it is a multi-day event.

So what we need is a selector for event duration. So I’m going to add a select box, and this is going to be called event duration.

And our choices are going to be a single day event or a multi-day event, all right? And then we’re going to put this event duration at the top.

And we’re going to go ahead and hit save. Now what I’m going to do is I’m going to open one of our events.

We’re going to do the 10x growth conference as our multi-day event. As you can see, we have the start date and we have the end date.

And now we have a selector. Is this a single day event or a multi-day event?

It’s going to default to being a single day event. I’m going to go in and I am going to add some conditional logic now.

So for the event end date, I want to click conditional logic, turn on conditional logic, and then say event duration value contains multi-day. So if it contains multi-day, then I want to show the end date more or less.

Okay, so we’re going to save, we’re going to refresh over here. So now we see single day events, event has a start date, there’s no end date box.

If I say that this is a multi-day event, it’s going to give me both date options. Now the all day event thing, I’ve been thinking about this a little bit.

If it’s a multi-day event, we don’t want to mark that it’s an all day event. We’re just going to go to straight up date ranges or time ranges or whatever.

So we need a conditional logic that as well. So I’m going to say all day event is only an option.

I actually kind of almost want to get rid of the all day event thing, but I’ll leave it for now because I haven’t made a final decision on this. But I do want to say that if the event duration contains value contains single day, then we’re going to show that and if not, we’re not.

So I’m going to refresh and single day event, it shows it. And I’m gonna say, no, this is not an all day event.

So we’re gonna go ahead and hit update there. And then I’m gonna change this to multi-day event.

And look, the selector for all day event goes away and is replaced by event end date. And so this is November 25th.

I’m also gonna make sure that this goes into December. So we’re gonna say December 1st.

So it goes from 1125 to December 1st. So this actually goes across a month as well.

And the event start time, we’re gonna say, is gonna have a 9 a. m.

start time on the start date. And then the event end time’s gonna be like 3 p.

m. on the final day, okay?

So we’re gonna select that, we’re gonna hit update. Perfect.

We’re actually gonna change this to a paid event as well, starting at $99, update there, and then you’ve got an event description right here. And then we have the ability to also, since we’re gonna be doing a template today, we want to put content in the actual Gutenberg editor up here.

This is gonna be like the body of the event page right here. And this is where we can move into using blocks, like a block editor type situation, maybe generate blocks, something like that.

If we want to make the body of the event super fancy, we can even do custom blocks here if we want to, but we will be using the Gutenberg block editor for the body of the event page. Okay?

All right. In combination with the template, of course, in Bricks.

All right, so I’m going to go ahead and refresh, and you see here’s the 10x Growth Conference. Now, nothing related to the card has actually changed.

We just have more information in the custom fields that we can use. So I’m gonna go ahead and edit this with Bricks.

And we’re gonna be working, remember this is in a loop, so we’re really only editing the first card right here. We have the date ranges, we have whether it’s an all-day event or not.

All right, so this is all pretty good. First thing I wanna do is I do want, I just see like visual.

This is a quick little visual thing. I want this event card date month thing, which also should not be, that should be like maybe a span, okay?

We’re gonna drop the size of this down. Maybe like an H4 or something like that, okay.

And then I want a front end preview. This looks pretty good, okay.

So let’s go ahead and tackle like what needs to happen if this is a multi-day event I think what we want to do is we want to have it display under here and it’ll say something like Multi-day event and then it’ll have the start date and end date because right here over on the side This is always going to display more or less the start date But we need a way to signify that something is a multi-day event and give the dates on the actual card without doing a lot with, because this section, you know, you can’t do a lot with that. So let me actually tighten up, sorry, I’m being very OCD right now.

I wanna tighten up the spacing in here. Let’s see, date wrapper, okay.

This should be like display flex, and it should be column. Okay, and that actually seems like it tightened up the spacing a little bit just by doing that.

Yes, it did. Okay, all right, perfect.

All right, sorry. We’re gonna be, let’s get out of OCD mode and let’s focus on this.

So what I actually wanna do is I wanna come over here and maybe wrap this heading. So everything is in a content wrapper, but I think what we need is like a header as well.

So I’m gonna wrap this with a block and we’re gonna see what this is called. Oh, I actually don’t have a custom class on here yet.

I don’t know what I was doing. Event card content wrapper.

Okay, so this needs to be event card heading. Event card double underscore heading.

And then we need this to be event card double underscore header. And we’re gonna say that this is our header.

Okay, perfect. Now, I can now put something in there.

And what I’m gonna do is put in a text field. And this is gonna be a time field as well.

And we’re gonna say that this is a multi-day event. Multi, I’ll say multi-day event.

And we’re gonna say that the start date, alright. So start date, actually, I’ll just say date.

Because it’s event date, there you go. We need the ACF version.

Event date, right there. And we need to format this as well.

But I’m gonna say two. And this is only gonna show up if this is a multi-day event.

So I can pretty much put all of this in one, I’m comfortable putting all of this in one field. So we need end date.

There is ACF end date. Let’s just see what we’ve got so far.

Maybe we do like a little bit of a strong on here. All right, strong, save, refresh.

Okay, so there’s a multi-day event. Now notice it’s showing up on all of them.

That’s because we need to add the conditional logic. But we’re looking pretty good.

Just need to format the dates. Okay, so I’m gonna put a little colon here.

We’re gonna say we wanna display the month and we wanna display the day, November 15th to and then let’s do that down here on this one as well. Month day.

Let’s see how this shows up. Yep, so it’ll say November 21st to December 1st.

Maybe we want to put a 2 in here. November yeah do we want to do a 2 or do we want to do or maybe we say through like the dash.

Let’s just keep it nice and easy, nice and simple. Okay, so let’s save here, refresh.

That’s kind of what that’ll look like. We need to give this a class.

This is event card double underscore multi-day info. Yeah, something like that, multi-day info.

And we’ll go typography line height of one on there and then in our header we can give this a row gap of like. 5 M, something like that.

Save and now refresh. That looks pretty good.

I wanna get the color changed on here so we’re gonna go to typography, color, shade, maybe something like trans 70. Get it to be a little bit lighter.

All right, perfect. And then what we’re gonna do is we’re gonna add the conditional logic, okay?

So we’re gonna go to conditions, add a condition, dynamic data. We only wanna display this if the end date, okay?

So ACF event end date is not blank. So if the end date is not blank, or we could say if it’s a multi-day event.

But this I feel like is safer. Like if the end date is not blank, then show.

The only way the end date can not be blank is if it’s a multi-day event and an end date was chosen. I feel like that’s the safest way to do this logic.

And there you go. So Dave Chappelle is not a multi-day event, so he does not have multi-day event information.

Nick D, Kevin Hart, they don’t have it. The only one that has it is the 10x growth conference, okay?

So I think that part, at least for now, is done. Now we can do more with multi-day events, but I think we’re at least done for now.

What we’re gonna do next is the list view versus grid view. And what I’m thinking of doing is putting two little selectors up here, two little icons.

One is a list view icon, one is a grid view icon, and when they click, user clicks on those, it changes the structure of this grid right here. Okay, so in order to do that, what we’re gonna do to start is we’re gonna select this top bar, and we’re gonna see how this is.

This is actually a grid. I don’t think we want that to be a grid.

We’re gonna go, let’s delete this grid template columns. Let’s go flex row, align main axis to the right, cross axis to the center, and that should be good.

Let’s go to remix icons and let’s search for list. What we need is icons to represent our choices, okay?

And I’m kind of liking this one right here, this list check two. So let’s go ahead and download this SVG and then let’s look for grid.

And I either like this one or this one. Probably this one right here.

Okay, so we’ll download that. And what we wanna do is add a wrapper for those.

So we’re gonna add a div. And there’s our div right there.

And we’re gonna call this, what is this whole thing called? Events Grid Top Bar.

Actually I don’t like that. I don’t know why I named it that.

Events Grid Top Bar would be like that. It would be, this is not inside the Events Grid.

So Events Grid Top Bar, that doesn’t even have a class, doesn’t even really need a class yet. So Events Grid Top Bar, Events Top Bar.

I can just, I’m trying to shorten these up lately. Events top bar, okay?

Events top bar, that’s fine. Events top bar.

So this is gonna be events top bar double underscore display, display selectors. Display, display, display buttons.

Let’s just say that display buttons. Let’s try to make it easy easy as possible Okay, events top bar display buttons and what we want this to be is display flex row And we want the column gap to be like 0.

5 M. Maybe row gap 0.

5 M on that We’re gonna no wrap this never we never want to wrap it We want to align cross access to the middle and we need to drop those icons in. So I’m going to say we’re just going to drop in SVGs and I’m going to add an icons folder, keep everything nice and organized, and then we’re going to open up our downloads and I’m going to go with these icons right here.

So we can add a list icon, okay, and we need to add a class to this right off the bat. So this is going to be a display button so events top bar display button just like that and then I’m gonna say that it’s gonna be like 24 pixels 24 pixels okay is that a good size maybe 28 pixels 28 pixels yeah I think 28 looks pretty good can we fill this?

Does that work? Yes, it does.

So what color do we want to use? We probably want to use like a shade dark trans 70, 60, 60, somewhere in there.

And then we probably want to put a hover on here. So that’s a fill.

So let’s go down here. Actually, yeah, I don’t like using this hover state up here but I guess we can for this it’ll be easy we’ll use the action color okay so that’s what’s gonna happen on hover all right let’s go ahead and get out of that panel I hate that panel up there I just absolutely hate it okay so you see I’m still in hover mode but I don’t it doesn’t show that I’m in hover mode I don’t even know what’s going on now display button why is it still showing me that okay there it goes it’s cleared down all right oh you know what these actually mmm these need to be wrapped in a button as well.

Oh, and that’s gonna mess with the hover That’s gonna mess with the hover. Okay.

Let’s get rid of the hover state clear that out The fill the fill is fine on there. Let’s go ahead and right-click and wrap this in a div Okay, and then this is gonna be the I’m gonna signify that this is our button element.

And then we have our icon. Okay, icon.

So this actually, this class doesn’t make sense anymore. This is the display button icon.

And then this is the display button. So events, top, bar, display, button.

Perfect, okay. And then our display on this doesn’t really matter.

I’ll do Display display flex on that that’s fine We do need to change the HTML tag though to Custom and button okay, and then what we need to do because this comes with some default styles like a background color and stuff We need to go in here to raw and just say that this is transparent We need to make sure that there is no padding on any side of this. Okay, say this is looking pretty good.

Let’s refresh Yeah, notice when I hover now I get the I get the pointer. That’s all good to go.

I Think what we can do Button this will be for lists I’ll say list view. Oh, you know what?

I also need an aria label. Yep Or or we can actually do hidden text in here.

So there’s the icon. We’ll just grab text and we’ll say that this is list view.

Okay. View, I’ll say view events as list.

View events as list. And then we’re gonna put a class on here, hidden accessible, bam, just like that.

And it’s gonna give me a little accessibility notice up there. But that’s gonna read that.

So we don’t need an ARIA label. Okay, so we’re gonna duplicate this button and this is gonna be grid view.

And then what we need to do is open this up and view events as list needs to be view events as grid. And now what I’m realizing is I didn’t even put text in here.

So view events as grid. And that’s gonna be a span.

I don’t think it actually matters though. We’re gonna save and we’re gonna come in to this one, view events as list, make that a span as well.

Those are hidden accessible. Let’s refresh.

Now we got two icons. Let’s go ahead and switch the second icon to the grid icon.

Save there. Let’s test out the accessibility before we go any further.

So I’m going to go Apple voiceover 0:19:38

voiceover on Chrome 0:19:39

Event system Google Chrome Kevin window and it feel group events event system word press entering event system Webcom view events as grid button group view events as list button group view events as grid button group voiceover off 0:19:53

Okay, perfect. I hope you guys could hear that but it did announce them properly So the next thing we wanna do is we wanna figure out how we’re going to actually switch this grid right here.

So I’m gonna grab the grid, it’s events grid main, and I’m gonna see here that we’re just displaying this as a flex column, we’re not even using grid. I’m gonna change this to grid, make it a one column grid.

And to make it a one column grid, I would do something like grid one right but in order to make this dynamic in order to be able to manipulate it I actually need to not use our preset variables here I need to make our own custom grid and what we’re gonna do is use a repeat function to do this and if you were just doing this manually it’d be repeat one min max 0 1 fr that gives you a one column grid now we want to use grid gap here, okay? And maybe even like a smaller, that’s a little bit much, maybe a grid gap divided by two.

So we have a repeat one min-max zero one FR here. Now I’m gonna refresh this and you’re gonna see it looks exactly like it just looked a second ago, okay?

If I were to change this one to a two, this is what we would get right here. And I’m gonna go ahead and save and refresh.

And now that I’m looking at it, see this is, look at the challenge that’s presented here. When we put these things in a two column grid, this card design that we used does not look so good.

It does not look good at all, I would say. And this is, guys, this is the perfect, like this is why container queries exist, okay?

And are coming. We’re at like 85% support for container queries.

I’m gonna use them on this example just because it’s the perfect use case for container queries. We need to be able to change the layout of these cards when this changes to a grid.

And that’s exactly what container queries are gonna allow us to do. But before we do that, I also see that I need to stretch all of these cards in here.

So what we need to do on events grid main is set align items to stretch. And I don’t even know if that’s going to, yeah, because the cards are in, yeah, the event card now needs to be like a flex one.

So event card, and I don’t even know if we have the controls on here to do that. We might just need to, yeah, we don’t.

Okay, so I need to go into the CSS here and I’ll go ahead and zoom in. We need to do a root and we need to say flex 1.

There we go. And now it’s stretching.

So I’m going to zoom out. Now all cards will be equal height.

And then we just need to take care of switching the. .

. you’ll see, you’ll see, we’re going to take care of it all.

Don’t worry, we’re going to take care of it. What I want to point out now is that notice when I have this main grid selected, if this is a two, then it’s going to be a two-column grid.

If this is a one, this is going to be a one-column grid. What we can do is we can use interactions in bricks.

We can use bricks interactions. When these buttons are clicked, we change this one to a two or back to a one.

That’s effectively what we need to do now How do we actually execute that? How do we go about doing that?

We can use locally scoped variables to help with this make this very very very easy What we need to do is replace this number right here with a token. Okay, and our token is going to be var Column count.

Okay. So how many columns do you want one or two columns, right?

And you could potentially do three if you wanted to add another button or something like that But we’re just gonna make this super easy. It’s gonna either be one or it’s gonna be two So we’re gonna put a column count in there and here’s something about locally scoped variables You can set because we haven’t we haven’t set what the column count is yet, right?

We haven’t set that anywhere and we want a default. What do we want the default to be?

We want the default to be one. You can set a fallback for variables to say, hey if this variable column count doesn’t have a value then use this value instead.

And you do that by putting a comma after the name of the variable and then the default value. So I’ll prove this to you.

If I put a two it’s going to say two. One.

But I also have a variable here that I can use and the value of this variable will always take precedence. It’ll only use this fallback if the variable has no value.

So by default it’s going to have no value, but if I click one of these buttons we’re going to give it a value. Now how are we going to do that?

Let’s go ahead and hit save here and refresh. Notice it’s back to the default of one.

I want to inspect this. We’re going to inspect.

Here’s our events grid main, so you should probably already know, hopefully about inline styles in CSS, and this is a really good use case for inline styles. I’m going to go ahead and just zoom in here and I’m going to say this OK so we have.

Data instance I’m going to. I’m going to write.

0:25:11 Can I?

0:25:12 Yes, there we go.

Style equals this is inline styling in CSS right if I redefine or just define at all the column counts and I say To for example and I hit enter look what happens, okay? so if I do inline style column count to The locally scope variable that we used in our grid template columns is going to pick up this value, because it’s a locally scoped variable and we’re defining it at this element level, it’s gonna pick it up.

So all we need to do is be able to dynamically either inject two or one with the column count variable in an inline style. And that’s gonna get us exactly what we want.

And Brics Interactions is able to do that by default. This is just basic JavaScript going on here.

And thankfully, you know, the Bricks interactions feature writes this JavaScript for you. So what I want to do is I want to select our list view button.

Actually, I’ll do our grid view first. Okay, so I’m selecting our grid view button.

It’s very important here that you do not activate the class because we don’t want to assign this logic to the class. We want to assign it to the ID of this button because it’s unique.

We don’t want both buttons to do the same thing. We want one button to do one thing, we want the other button to do the other thing.

Thus, we’re gonna do this at the ID level. So I’m gonna go ahead and hit interactions here and I’m gonna add an interaction and we’re gonna say that when this element is clicked, we’re gonna do something.

What are we gonna do? We’re gonna set an attribute, okay?

You guys know about data attributes, right? It’s really HTML attributes, that’s all we’re looking at.

Let me go back and inspect this, come down. The style tag, this style, this word style right here, is an attribute, it’s an HTML attribute.

So we’re setting an attribute. What is the attribute called?

It’s called style, we’re setting the style attribute. So right here we say attribute the key.

If we go back here if you don’t know what keys and values are this is the key this is the value. The key is style okay so the key is style.

The value is our variable right column count along with its value the value that we want it to have okay. So we’re setting a style attribute to the value of column count two.

And, but where are we doing that? When the button is clicked, where do we want that attribute to be set?

We want it to be set on a CSS selector. Which CSS selector?

The CSS selector for our grid, which happens to be events grid double underscore main. Okay, so I’m going to go back to the button.

I’m gonna go back to our interaction and on the grid view, and we’re gonna open this. Okay, events grid double underscore main.

All right, so you guys should be able to see all of that happening right here. Set the attribute, which attribute?

The style attribute. What’s the value?

Column count two. Where do you wanna do this?

On events grid main. That’s the logic here, okay?

So we’re gonna go ahead and hit save. We’re gonna go refresh, and we’re gonna click this button right here, and look at that, we have a two column grid.

And I’m actually gonna refresh, and I want you to see this happen in real time. So I’m gonna inspect, and you’re watching events grid main right here.

You see data interactions, data instance, data interaction ID. Watch when I click the grid button, a style tag, an inline style tag is going to appear out of thin air right there.

So I’m gonna hit this and you see it right there. Style column count two appears magically.

Now, we got exactly what we wanted. The question now is what do we do with the list view one?

The exact same thing, just different logic. So we click list view.

We make sure the class is not selected. We open the interactions, add an interaction, trigger on click.

We’re going to set an attribute. What attribute?

The style tag. What’s the value gonna be?

Column count one is gonna be our value. Where are we gonna do this?

We’re gonna do it on events grid double underscore main. And we’re gonna go ahead and hit save.

We’re gonna go refresh. It defaults to one column.

We click grid, it goes to two column. We click list, it goes back to one column.

And we can select back and forth all day. And if we go here and we inspect, we’re gonna look right here in this section, style column count equals one, okay?

I click this, it changes the value to two. I click this, it changes the value to one.

See what’s going on? Okay, if you got lost in there somewhere, just go back and watch it again.

Just go nice and slow. Listen to me explain it again.

Now what we want to do is test, does this work with keyboard? The answer is yes.

I’ve made this completely accessible. It announces itself properly because we have a hidden accessibility text.

It works with keyboard navigation. It works with mouse click.

What we need to do now is we need to handle the fact that these cards look terrible when they’re in a grid. So we need to change their structure when they’re in a grid and we’re going to do this with container queries.

So I’m going to hop back over and we are going to use the LI right here as the container itself. So you have to do this in custom CSS.

I’m going to zoom in here. So on my events grid main item, my list item, I’m going to say root container type is inline size.

So it’s going to watch the inline size of this LI and based on the size of that LI, I’m going to be able to do something to the child that is within it, which is our event card. So my event card, I’m going to come down here into the custom CSS and we’re going to make a new comment.

We’re going to say container query and I’m going to say at container and then you do this just like a media query. So I’m going to say max width and what I need to do is go to the front end and I need to measure these cards.

All right so where’s my li right there. Here’s the actual card itself.

So that card right now is 475 pixels. I’m just going to say like 640.

When it gets to 640, we’re going to change the structure. So 640 and below, we’re going to change the structure of that card.

Alright, so I’m going to do my root. And so the root is the event card.

And the first thing I’m going to do is say display. This has flex, right?

We were using display grid to make it a two column card. Now I’m changing from display grid to display flex.

And I’m going to say that the flex direction is column, and I’m gonna say justify the content to flex start, okay? And let’s just see what that did.

So I’m gonna hit save, refresh, zoom out, and let’s switch it to grid, and look at that. So now the image is gone.

That’s probably because the image wrapper needs a minimum height. So I’m gonna zoom back in here and say that on inside the container query we’re going to say root and we need the event card is probably called a media wrapper.

And we’re going to say that the height will just do a fixed height. Let’s guess 24 rem.

All right yeah that’s looking pretty good. All right save, refresh, show me in the, there we go.

I don’t know, 24 rims a little big. Let’s do 20 rim.

All right, save, refresh, and zoom out. Hey, look at what we got going on here.

Okay, this row right here needs to be margin top auto to push it all the way to the bottom, okay? So we’re gonna grab this row right here.

That is event meta. I think this can happen in both instances.

So event meta layout margin top equals auto, save, refresh on the front end, bam, and no, it’s not working. So why?

Why is it not working? We need to diagnose.

Let’s zoom in here. So inspect.

All right, let’s, oh, look at that. So our content wrapper, no, yeah, our content wrapper is not filling the available space.

So if I did something like flex one on this, it would, okay. So the content wrapper, flex one, where’s our content wrapper, content wrapper, event content wrapper.

All right, content, flex grow one. It’s not going to break anything on the horizontal card.

So I’m not doing this in the container query because I don’t think these changes are going to break anything on our horizontal cards, but it is going to help on our grid cards. It does.

Look, so now that’s pushed to the bottom every time. I think what I want to do is limit the text on this description.

So we’re going to do a colon and maybe we’ll try 20, 30, and then I’ll do a dot dot dot after it. Okay, so we’ll save, refresh, there we go.

Oh this is looking really good. Switch it to grid, that’s looking really good.

Absolutely fantastic. Okay, now what we’re going to do is we need a single, actually that’s, sorry, looking at a little OCD here.

Let’s go back to event card article CSS. I’m thinking this is not 20 rem, it needs to be like 16 rem.

I don’t know, the images still feel a little big when it’s in grid. There we go, that’s a little bit better.

That’s a little bit better. Okay.

I think we’re fine here. I think This text right here card descriptions, I’m just doing that’s shade trans 60.

All right, let’s do 50 There we go, that’s a little bit better Another issue that I’m seeing here is that when we hover the hover effect is still going left to right which in a grid layout Doesn’t really make that much sense. It now makes more sense to go top to bottom.

Okay, so what I need to do is let’s get on our event card, and let’s see where this hover style is coming from. So there’s the root hover translate minus one M and then zero.

We actually changed it right here with a media query. We just need to grab this and bring this down into our container query as well.

So I’m going to go ahead and hit save there, refresh, zoom out, and now when we’re in a grid, look at that, it goes up and down instead of left and right. When I go back to the list, it goes left to right.

Again, the power of container queries. This is not possible with media.

None of this, none of what we just did is possible with media queries okay all right let’s do the single template for a single events so what I’m going to do for that I’m going to close this I’m going to close this I’m going to go here back and go to bricks templates add new template and we are going to say that this is events single we might have events archive we might have events something else we have an events single post basically. I’m gonna assign this to single and we’re gonna hit publish, edit with bricks.

First thing that we need to do is come up here into template settings, conditions, and we need to apply a condition. We need to say that this is gonna be assigned to post types, what kind of post type, the events post type, we’re gonna hit save.

And then we’re going to populate content so that we can see what we’re doing in the editor with a single post or page, and we’re gonna search for 10X. So there’s the 10X growth conference event.

I’m gonna apply preview. It’s gonna refresh the builder, and now I’m ready to go.

I’m gonna use frames to just help me out here. I’m gonna go to remote templates.

Please activate your license. Okay, well, we’re gonna go back here, and we’re gonna go to Bricks, settings, templates, save settings.

And so it saves that license key right there. And then I’m gonna go to settings, no, automatic CSS, frames license, just save this here as well, make sure that that’s good.

And then I’m gonna refresh. And we should be able to access frames now.

And we can, okay. So I’m gonna go with, we’re just gonna refresh all these templates.

I’m gonna go with hero, and I wanna choose like a split hero like this, hero Charlie, okay? And then I’m going to open the media image, get rid of that.

Let’s use the featured image. Perfect, that’s gonna pull that in.

Let’s use post title for this dynamic data. Let’s use the event description right here.

Event description, event description, there it is, ACF event description. This needs to go to a div, not a paragraph tag because this is injecting paragraphs on its own.

And we don’t wanna double or duplicate those. Let’s go to the front end and view this.

There you go, 10x Growth Conference. We got the description.

I don’t know what these buttons are gonna do yet, so we’re just gonna leave them alone. Down here, we’re going to create a two column layout for our body.

So this is going to be, I can, it’s a template, right? So I can just use utility classes for this.

Let’s do grid two, three, because we want a little, like a main column and a sidebar situation. Maybe, I don’t know if we want one, two or two, three.

Let’s do two, three. Actually what we want is three, two.

We want the, we want the big side to be on the left, the little side to be on the right. That looks pretty good.

That looks pretty good. Okay, what we wanna do is put two blocks in.

All right, those are our containers for our content. This block, we’re going to add the WordPress content.

I think that’s, no, it’s called post content. Is that what it’s called?

Yeah, post content. And we’re gonna pull this from WordPress, okay?

So we’re gonna hit save there and refresh. And there you go.

So there’s the body of our of our event. And then what we want to do is this is going to be our sidebar.

Okay, so I’m going to call this single event sidebar. And I kind of want this to overlap over the image up here.

So let’s and let’s think about this. I wanna put, this sidebar’s gonna have like the date information, probably the location information and all that kind of stuff in it.

And then the button maybe to like register for the event or reserve a spot or however, we’re gonna work that out in a future episode. So what I wanna do is add a block to this sidebar.

And then, so this is a, let’s call this sidebar, let’s call this main Let’s call this Item okay, so I guess sidebar item so this event single event sidebar. This is single event sidebar double underscore item Okay, and then it’s not gonna have multiple items now.

What what is this gonna? Be this is gonna be the date and time okay, and so we’re gonna add a heading to this.

And we’re going to have to really think about this as we go. So this is going to be date and time.

And I’m going to call this a heading. So this is single event sidebar item heading.

Perfect. And how do we want to do this?

We want to probably do like rows. 0:41:07

So item. 0:41:08

I don’t know if there’s going to be other items. Yeah, I guess there would be with the location.

There will be a row. I’m trying to think how generic we need to make this to be able to use it a lot and not make it specific to like date and time.

So item, item heading, we should have item row. I think that’s what we should have.

So a block called item row. So this will be a row for now.

This is going to be single event sidebar item row like that item row. Okay, I think that’s good.

Then what we’re going to do is do a label and then the value. Okay, so imagine this is like November 15th, 2023, something like that.

So this item row needs to be set to flex and then needs a column gap of like. 5 M.

And a row gap, maybe a. 5 M just in case it has to collapse at some point.

This needs a class called label, so this is single event sidebar item label item row label yeah item row label item row value okay so single event sidebar item row value that seems to work uh for the item row label let’s make this a make that well yeah yes yeah maybe a span maybe a span okay this needs to actually be a date or a time tag time tag okay I’m wondering if I want to group the group the rows I think I want to group the rows so we’re gonna wrap that with a block and I’ll say rows group, okay? So this is gonna be single event sidebar row group.

There you go. I’ll say row group here.

Perfect, and then there’s a row. So there’s a row group and there’s a row.

Row group, item row. Item row, row group, item row.

Maybe it should be row, single inside bar, row. I think that could be a row, just a row.

I like that. So there’s a row group and then there’s a row.

I think that makes the most sense. And then inside the row, there’s a, let’s just call this, we can shorten this up.

Let’s just call this row label and let’s call this row value, okay? Let’s keep these names as short as possible.

So this is gonna be a row label. This is gonna be a row value, okay?

And then once I actually get content in here, I’ll start to change the label so that we can see them and they make a lot more sense. Because this doesn’t give you enough data right now.

Row group, row, let’s duplicate a row and see what happens. Okay, so in our row group, we actually need a row gap, maybe.

25 M. And then in our date time, in our actual item, we’ve got a heading and a row group.

This, we need a row gap in here. Maybe of content gap divided by two.

That seems to work really good. Let’s save that.

Now, let’s get our labels and let’s change the font weight to like 600. Let’s get the line height to be like 1.

1 Let’s get the value and same line height on the value there, and then I see the row group itself needs to be Maybe 0. 5 M between actually let’s let’s use we did content gap divided by 2 up there.

I Wonder if we should do maybe by divided by like three here. 0:45:14

And I don’t actually have a design in mind for this. 0:45:16

That’s looking pretty good. I don’t have a design in mind for this yet.

Cause we might want to do like, you know, line dividers or I don’t, we don’t know yet. We don’t know.

Let’s get the sidebar going. So this sidebar is going to have a padding of space L on all sides.

And it’s going to have a background color of maybe shade ultra light should we do shade ultra light or should we just do white let’s do white and then maybe give it a box shadow so let’s come down to CSS and let’s say I’ll zoom in for you guys here we want to say the box shadow is box shadow M Shadow is Box Shadow M, something like that. Save, come out, and I think, eh, yeah, I guess we do that.

Maybe we give it like a border, like a super light border. So let’s do like one pixels all sides solid, and then do something like shade ultra dark, or just do black.

Trans, I hate that, I can’t get all the way down to the bottom, it’s really annoying. Let’s do shade, ultra dark, trans 10.

And let’s see, okay, maybe. Let’s see what happens after I give it a radius.

So we’re gonna go to border again, and we’re gonna say radius of M. Apply that to all sides, and then let’s do a negative margin top.

I know that this amount of gap right there is section space M and I wanted to go another section space M as an overlap. So I’m going to say that this is section space M times negative 1 is going to make it negative and that’s gonna take it exactly to the top, but then I need to do times two times negative one, times two times negative one will make it overlap, and then if we just add a little bit of a z-index, we’ll just be good to go.

And that’s good, we got a little overlap there. Okay, I think that’s looking pretty decent.

I think I might want this heading to be like the size of an h4 It’s already an h3 right yeah an h maybe an h4 Times 1. 1.

I don’t know just dial it in a little bit there. How’s that look pretty good pretty good?

Might give a little bit of a bottom separator on this that might be a good way to go. So let’s go with root after and I’m gonna zoom in again for you so you guys can read what I’m doing.

Our content is going to be blank. Our I think our width on the actual element itself needs to be a hundred percent and that works better when it’s a colon.

This is going to be width of a hundred percent then as well. Oh my gosh, what is going on with that typing?

Let’s do a height of one pixel. Let’s do a background color of shade light.

And let’s do a display of flex. Let’s do a margin top of point two five M something like that 5.

5 M actually I did content gap right content gap divided by two might make that match exactly it does love variables just love variables and we get something like that and light light might be not light enough so let’s do shade ultra light ultra light there we go. Save, refresh, and let’s do two pixels instead of one pixel.

There we go. That’s what I’m talking about.

What information do we want to put in here? We also need, here’s a row group, here’s a row, row group, date and time.

Let’s duplicate the date and time. This is going to be location information, which we don’t even have yet.

We’re not even doing that until a future one. But I want to get it in here because I want to see what’s going on with our spacing, and I want a little bit more of a sidebar going on here.

I’m also gonna add a button to this sidebar. All right, and we’re gonna say that this is, let’s say, purchase tickets, button action and I also want to just make this go 100% width perfect and I’m seeing right now on our sidebar we definitely need to row gap all of this stuff probably with content gap.

Save, refresh and look at that our sidebars coming along and I want this sidebar to be sticky as well so we are going to go to style on the sidebar we’re going to go to position, sticky, give it a top of space M, just a little bit of a gap. We’re not going to be able to see that yet until we get long content in our event template.

But I think that this is a really, really good start to our event template. Let’s go ahead and take a look at this data here.

So our date, we’re going to need a date and time for single and multi-day events now. So let’s think about this.

Date. Date or start date, okay?

This can be end date. End date.

And this needs to be the end date. Let’s just put this in here.

This is all static content right now. 0:51:03

Let’s do end date right there. 0:51:05

And how do we want to format this end date? We want to say colon Month now, I think if we do an F it’s gonna write the entire month So if I do capital M, it’s gonna do a abbreviated version if I do capital F It’s gonna write the entire word.

So that’s good December Day a D for day comma year And I want a capital Y for the full year comma year. And I want a capital Y for the full year.

That’s the way we’re gonna do it. Okay, save.

Let’s copy that, bring up here to the date. Date, date, date, date, date, date, date, date.

Okay, this is not in date, it’s just date. Nope, I do not want to put a line break in there.

0:51:50 Let’s see if that works.

0:51:51 It does.

Does that work? It does.

So we have November 25th is the, this needs to be start date. Okay, so we have start date.

And then what we need to do is take this row, so this row right here is going to be the start date. This is going to be the end date.

Okay, and the start date, end date, let’s say this end date, let’s add logic. Let’s add conditions while we’re here.

So the end date, dynamic data, end date, end date, is not blank. So if the end date is not blank we’re showing this row.

Let’s refresh and we still see the row. We’re good to go.

All right, the start date is, if this is multi-day, we’re going to show this. Let’s duplicate this first, because I’m going to show you what I’m doing.

So I’m going to have a line that just says date. This is the line that if this is a single day event, you show this.

So let’s add that right now. Dynamic data, we’re going to say duration.

Remember we had a duration selector? Contains single day.

So if it contains single day, then we’re showing this line. So if I refresh, see how we don’t see it.

That’s good. We have the date, we have the value, which is fine.

Then we have a start date row. The conditional logic on this is going to be dynamic data.

And we want multi-day again so duration event duration contains multi-day save refresh and we see it it looks really really really good let’s just look at nick d oh we see another problem here if the format of the photo is different it’s actually affecting the size of our hero. Oh, and for Nick D, we don’t have any date time information.

Did I save this? Okay, we probably need to edit the event again and hit update.

Now let’s view that page. 0:54:14

Date December 15th. 0:54:15

So this is not a multi-day event. Notice that it just has the date, December 15th.

So that’s actually good. This is correct.

And it’s showing the Nick D event date information down here. Okay, so now what I need to do is inside of here, inside of my template, I need to go preview Nick D.

Okay, so let’s preview Nick D and apply preview because we got to figure out what’s going on with this hero section. All right, so the image, does this have a minimum?

That’s height 100%, width 100%. What about this media wrapper?

Ah, no, no. Okay, what is controlling the height?

We have hero padding in here. That’s fine.

There’s no minimum height set on this either. Here’s the interwrapper grid, no minimum height set on this hero Charlie, no minimum height set So what is causing, let me look at CSS tabs, nothing there, nothing there.

Is there anything in the content that would do anything? No, media wrapper, no CSS, image, whoa, why’d that come out of there?

Image, no CSS here. Let me look at the actual image here.

Let’s go to media, oh gosh, media, events, Nick D, square image. Okay, that’s a square image.

We need to put, hmm, hmm. 0:55:50

It’s because it’s a real image. 0:55:51

I think what I need to do is position this absolute. So we’re gonna go media wrapper, position relative.

I’m hoping this fixes it. Media position absolute on the media, yeah, I think this is gonna fix it.

And then top right, bottom left, it’s already 100%, 100% safe. Okay, so let’s go look at Nick D.

0:56:19 There we go.

0:56:20 There we go.

Now let’s look at Dave Chappelle. Let me go back here.

0:56:27 Let’s look at all of them.

0:56:28 Just Kevin Hart, 10X, Dave Chappelle.

So Kevin Hart still looks good. 10X still looks good.

Dave Chappelle still looks good. Okay, that fixed it, that fixed it.

All right, and then Dave Chappelle, edit event and just hit save, hit update, and we should be good to go on our template. Yep, got our date.

So now we need the time in our template. So we’ve got a start date and an end date.

All that stuff’s good. What we need is another row.

So start date, end date, we need to duplicate this. This is gonna be start time.

All right, start time. And we need to take the conditional logic off of here.

Just delete that. All right, so start time, we’re gonna have start time and that’s that.

Let’s duplicate this. This is going to be end time and I’m going to grab this label end time.

Okay row value start time end time. Let’s hit save here.

Refresh, there you go, start time, end time. So now we need, for the value of start time, let’s go event, start time.

I wonder if that’s gonna be the output. This is gonna be the end time.

Event end time. Okay.

Save. Refresh.

It is. Okay.

So how are we going to change the output? Event end.

Oh that’s because I’m choosing the wrong custom field. Never mind.

Event. See it does custom field data and then ACF data.

I need the ACF data. So this is going to be end time.

This is going to be start time and now it should be formatted correctly. Event start time, save, refresh, 5 p.

m. 8 p.

m. You know what I also think we need is a time zone selector.

So, edit field group and add field, and this is gonna be a select box, and we’re gonna say time zone. And our choices are gonna be Eastern Time, and then I can actually, again, you have like a key value here, right?

So the output value is gonna be like the abbreviation of it. We have Central Time, which is CT.

We have what are, all right, list of time zones. Okay, and I’m not going to put every single one.

We have mountain standard time. Where’s a list?

List of time zones. Here we go.

List of time zones by country. Oh my god.

Okay. Chat.

openai. Okay.

Let’s go. What?

Give me a list of all US time zones with their abbreviations. Okay, four main time zones, all right.

Pacific Standard Time, which is PST. So I’m just gonna copy this.

Okay, so let’s just put this in here. And I’ll say, yeah, we’ll just put the value in parentheses.

That should be fine. Let’s bring ChatGPT over here we have mountain standard time MST.

All right put a little colon between those. Central standard time.

All right put that in. 1:00:28

Okay, and if you guys want to, 1:00:29

and you’re doing this duplicating, replicating, using it later, whatever, you can edit these choices and put whatever you want. So I’m gonna go ahead and hit save on that, and we’re going to go to an event.

What event can we go to? Let’s edit Kevin Hart, edit event, and we’re gonna say that this is, oh that’s interesting.

Okay. I need to go to, back to this field group, event data information, time zone, return format label, or value, label.

I think this side’s the label. I’m pretty sure.

Let’s check. Okay, so let’s go to Kevin Hart, EST, Eastern Standard Time.

And then what we’re going to do is, and actually we’re doing the NICD template, so we should probably be editing NICD. But I just did both of them anyway.

So NICD is going to be Eastern Standard Time, Update, Okay, and let’s get rid of that. Let’s get rid of this.

Refresh this. 1:01:41

After our time label, 1:01:43

we can just insert another dynamic data, and this is going to be the time zone right there. And I can just copy this, and we’re going to paste it in the end time as well.

And look at that. Refresh, nice.

Okay, I’m thinking we need a little bit more space between our rows here, so I’m gonna grab our row group. And that’s for our content gap divided by three, I’m gonna do divided by two.

Save and refresh. That’s much, much, much better.

So we have a date, we have a start time, we have an end time. Let’s go back and look at the 10X growth conference.

Has a start date and an end date because it’s a multi-day event. And it has a start time and an end time.

Okay. 9 a.

m. End date.

End date. Here’s the only thing I’m thinking is like, now does the end time make perfect sense to people?

It probably should. Start time, end time.

You guys let me know. You guys let me know if this makes sense.

1:02:50 I think it does.

1:02:51 All right, last thing before we call it a day, we need the price of the event in there, okay?

So let’s go in and we’ve got our date and time group. We’ve got our location group.

Let’s duplicate the location group. Let’s call this a price group.

Actually, let’s put the price at the top. Yeah, let’s put the price at the top.

So this is gonna say price, awesome. And then I need a row group, don’t I?

So I’m gonna duplicate this row group and bring it up into here. And we just need to get rid of all of these things.

So this can be the price, the row label will be price. We’ll do starting price I guess.

Starting price. Okay.

And then the row value will be price. There you go.

ACF starting price 49. We’ll put a little dollar sign ahead of it.

Okay, price, starting price, and then we just need logic for if it’s free. So, price, and then the condition on here will be, when you duplicate stuff, you gotta make sure you check conditions for things, okay?

Let’s clear that out, and let’s say price, starting price is not blank, okay, is not blank, save. And then I need to duplicate this and say free, row label is gonna be just price, and I’ll say zero, like that, okay?

And then our free conditional logic will be, what is this, event, it’s event type, right? Does not equal, I’ll just say equals, equals free.

So if it equals free, then we show that, zero, okay. So we’re not seeing it on here.

What event is free? We need a free event to test.

So event system, events, let’s make Kevin Hart free. So free, update, go view Kevin Hart.

Oh check this out, price zero but he also has a starting price. And Because he, yes, this is a little bit of a problem with ACF.

See when it was paid he had a price, when I switch it to free it took that thing away, but it doesn’t zero that out, right? So I actually need to make the logic of these based on event starting price, no, no, no, no, this needs to be on event type.

Event type contains or just say equal to paid. Now I go to Kevin Hart, now price is free.

Now what I need to do is I need to go back to the events grid and choose Nick D and see if Nick D has a price. Yes he does.

Starting price price, $49. Okay?

All right, I think we’re going to call it a day for this, for part two. More coming in part three.

Make sure you vote on what you want to see. We got a lot of really good ideas for our features, but that’s it.

We got a lot of really good ideas for our features, but that’s it. That’s a wrap for part two.