Creating a Custom Event Management System (Part 01)

0:00:00 Welcome back my inner circle friends.

It is time for another advanced tutorial this time We are going to be creating a custom event management system We’re going to need three things in order to do this number one Advanced custom fields or you can use meta box. I’m going to be using advanced custom fields You can probably use jet engine and many others as well We’re also going to be using WP Grid Builder for facets and then you need a builder that supports dynamic data.

In this training I will be using Bricks Builder. So I’m going to go ahead and share the screen and we’re going to take a look at a little bit of what we are going to build today.

And I do want to say that this is there’s a lot of ways there’s a lot of ways that we can build an event system. There’s a lot of different facets that somebody might want.

There’s single day events. There’s multi-day events, there’s maybe events with schedules, maybe events with speakers, there’s categorized events, there’s many, many, many different things that we can do.

What I want to do in this training is get you off going in the right direction and I want to nail the most important aspects of a custom event management system. Number one is, well, the ability to search for events, right?

So we want to say, multi-day event, and it’s going to automatically filter and find things that match this search. Another thing that we want is the ability to categorize our events, so that somebody can come in here with a filter like this, and they can show events from a particular category, and everything resorts and figures itself out on the fly.

The other thing that they may want to do is sort the events. You know, show me the oldest event, show me the newest event, sort them by alphabetical order in both directions.

These are things that we can easily do with facets, especially for using WP Grid Builder. Most importantly, most importantly, we need this grid of events, whether and this is a a list format, but we’re still gonna be using CSS Grid.

We need to make sure that we’re not showing past events. So if an event has a date that is before today, we need to not show it.

It needs to be excluded from our output. Doesn’t matter if we’re doing a list format or a grid format, doesn’t matter.

We need to exclude events that happen prior to today. That is probably the most fundamental aspect, the biggest challenge that people run into when they’re trying to do event management on their own, rather than using an event management plug-in of some kind.

But additionally, on these cards we need certain types of dynamic data, for example, maybe the price of the event, whether it’s a paid event or a free event. We need to have the date output here, we need to have the time output.

Now, in this particular training, we are going to focus on single day events. We’re not going to go into multi-day events.

I’m going to probably do a follow-up training that’s going to go more into some various aspects of what you guys want to see. Multi-day events will be one of them.

We’re going to stick with single day events in this first episode, in this first training session. And what we may also tackle here is an event landing page right so every event can have its own page with a unique url still pulling in the dynamic data maybe main event content right here so this is also an option if we get to that in this training i’m going to try to fit that in but the main thing that we’re going to focus on here is the actual functionality of putting in event data and making sure that the output excludes things that happened prior to today.

Okay, I think we’ve said enough, you’ve seen enough. Let’s go ahead and dive in.

So I’m going to go ahead and close this and I’m going to pull up a fresh install. That is this events install right here.

And I’m going to bring this onto the screen. This is a completely clean install.

All we have is automatic CSS, ACF. We have WP Grid Builder with the bricks add on installed, and that’s pretty much all we need to get started.

So I’m going to get, I’m going to start in ACF. We’re going to bring up advanced custom fields and I’m going to go to post types.

We’re going to add a new one called events. The singular label is events and the key is events.

Do I want this to be hierarchical? I don’t think so.

We’re not going to have events nested under other events or anything like that. Advanced configuration.

We can look at some of this stuff in a minute. For right now we just need to get this post type created.

It is called event. The next thing I want is a taxonomy so we can have custom event categories for these events and that’s gonna allow us to filter them.

We can output the category on the event cards. Good functionality right here in a basic event management system.

So I’m gonna add new. This is gonna be called event categories.

The singular label is event category and then I do event cat like this. I just, I don’t like the whole long name.

I just, event cat is good enough. And then I want this to be associated with our event custom post type.

Again, I don’t think it needs to be hierarchical. We’re good kind of with the defaults, at least for right now.

This stuff can be changed later. So what you see now is with very little work, I have an events custom post type where I can put all my events.

I can categorize those events. Actually, I do wanna mark this as hierarchical simply because this is on the categories.

It changes how the categories are displayed when you’re editing a post. And it gives you check boxes for your categories rather than the whole auto-complete search field, which is really weird.

I prefer the check boxes. Okay, so I’m gonna go into my event categories and we’re just gonna create some events and so some event types, I guess we should say.

So I will say comedy shows, that’s gonna be one of our categories. I will say concerts, and then I will say something like conferences.

They all start with C, which is odd, but you know, it is what it is. Okay, so conferences, concerts, and comedy shows.

All right, now what I need is some dummy event content, and we’re gonna have to really think about what kind of custom fields we wanna add to these events. So the way that I do this is I just get started with adding an event of some sort.

And so comedy show, let’s do like Kevin Hart, okay? So Kevin Hart is gonna come to give a comedy show and we need to think about this.

Like what else do we need to have here? Price would be one of them, okay?

So we can have free events and we can have paid events and if it’s a paid event we’re going to need to know what the price of the event is, at least the starting price of the event, okay? So let’s just go ahead and add these as we think of them.

So I’m going to go to advanced custom fields and I’m going to go to field groups this time and I’m going to add new for adding a new field group. And this, I’m just gonna call this events to match with our custom post type of events.

So it’s gonna be assigned to the events. That’s what we’re gonna call it, okay?

Before I add any fields, before I forget, I am gonna come down here and assign it to the event custom post type. So post type is equal to events.

That’s gonna make it show up on all the event posts. And then I’m gonna decide what I want this to be.

I don’t want it to be text. This is gonna be our selector for what type of event is it.

And so I’m gonna say event type, and then naming these is gonna be really crucial as well. There’s gonna be a lot of different naming conventions that you could use.

In my mind, what type of event is it? It’s a free event or it’s a paid event.

This is separate from the category, which we already created a taxonomy for. So if you are managing events that have a type that means something different, you’re gonna have to take that into consideration.

So event type, and then this is going to be a, we could do a dropdown here, we could do radio buttons here. Let’s try radio buttons first, okay?

So event type, and then the choices are gonna be free or paid. And our default value can be free, and that’s it.

Let’s just go ahead and save and then let’s refresh our let me save Kevin Hart here. Okay.

And so I’m going to refresh and you see down here, we get our first custom field, which is event type free and paid. Okay.

Now what we need is some conditional logic to where, Hey, if it is a paid event, let’s ask how much the price is. What does it start at?

Okay, so I’m gonna add a field. It’s just gonna be a text field.

And then my field label is gonna be, we’ll do starting event, starting price, okay? And then what I’m gonna do under validation, under presentation, I do like to pre-pin this.

We’ll put a little dollar sign that’s gonna let us know that this is gonna always be in dollars. And that way we don’t have to actually put the dollar sign in.

I’ll show you in the output how all of this is going to work. And that should be it.

So let’s go ahead and hit save. Only thing now is if I refresh this, you’re going to see we always see an event starting price, even if the event is free.

So this is the part where we need to come in and add some conditional logic, and then I just need to choose event type up here. And if the value is equal to paid, then we’re going to show this custom field, which is event starting price.

I’m going to go ahead and hit save. It kind of does a lot of the heavy lifting for you.

So now that field is gone. If I hit paid, now the field shows up.

Okay, so this, for when you’re entering events, this helps, you know, limit mistakes, data that doesn’t need to exist, so on and so forth. Okay, perfect.

So now I’ve got the Kevin Hart event. I’m gonna go to website ipsum here, and I’m just gonna pretend that this is all of the event copy right here.

And we’re gonna actually utilize the block editor, the Gutenberg editor, for the main body of our event related stuff. Now, we have cards for displaying the events.

We also have a whole page that the event can have, right? So a card may need different content from the actual page, and we don’t want to automatically just pull a certain amount of this content onto the card.

I think the cleanest approach is to have a card description, like an event, like just an event description, which is like a small paragraph that describes the event that’s separate from all this main copy. Right?

Um, so what we’re going to do is go back into custom fields here. We’re going to add a field and this is going to be, you can go text area with this.

You can go whizzy wig with this. I’ll probably go whizzy wig and we’ll say event description.

Okay. And then that’s really all I need there.

I’m going to hit save. And we’re going to, we’ll update this and then we’ll refresh.

I’m just doing this in pieces as we go. I’m trying to talk through this as much as possible so I don’t go too fast.

There’s people who could absolutely be like left behind if we go too fast. So I’m just kind of going step by step by step and we’ll check out how each thing progresses as we move through the stages.

So now I have the ability to have an event description. And so I’m going to grab just this first paragraph right here and plop that in as our event description.

The WYSIWYG editor is nice because you can come in here and still bold all of this. You can do a lot of different formatting options and not have to worry about the person needing to write HTML or anything like that.

Okay, so we have event description, we have event type, free paid, we have the event starting price. Now we probably need to get into the date related stuff.

Okay, so I think what we’re gonna do for this is we’re gonna add a group. All right, so we’re gonna come down and we are going to add a, in fact, I’ll just search for it, okay?

We’re gonna add a layout group and this is gonna group all of these items together right here. Like I said, we’re only handling single day events inside of this training.

We’ll do a multi-day event as a follow-up to this training. Okay?

So, our group is going to be our event date information. Okay?

You can, maybe there’s better naming conventions that you can come up with. If you do, let me know.

You know, I would love to know. Everybody’s going to take kind of a different approach to this, and that’s okay.

At the end of the day, we just want everything to make sense and to be easy to understand. I try to build this as if it’s like, not me adding events, right?

What if somebody else is coming along behind me and they’re tasked with adding all the events into the system? Are these fields, is the organization, is it all gonna make sense to them?

Is it gonna make sense to me when I come back in three months and start adding events to this website? Or am I gonna be like, ah, that name doesn’t make any sense, right?

Okay, so event date information. And what we want is to separate all these things out.

We don’t want a whole field that tries to manage the date, the starting time, the ending time, because we need parsable data. We need data chunks that we can look at and analyze and work with.

Okay? All right.

So what I’m going to do is I am going to add a date field. All right, so we’re going to type in date.

So we have a date time picker or a date picker. I’m just gonna go with the date picker.

And we’re gonna call this event date. Okay, that’s pretty straightforward, event date, right?

This gets a lot more complicated when it’s a multi-day event. Suddenly, we can’t have an event date, we have to have like an event start date, we have to have an event end date, and then you gotta decide how much granular data do you want in between the start and the end, and how do you wanna control that?

That’s why we’re doing multi-day separately because it’s a whole nother can of worms, okay? So I have the event date, I want a start time, okay?

So I’m gonna add a time picker and this is called event start time. So we’re gonna have a start time and we’re gonna have an end time.

And then we have different formats down here that we can use. I’m just gonna stick with our defaults for right now.

We’re gonna add another field into the group. This is going to be another time picker and this is going to be event end time.

Okay, again we’ll just leave the defaults for right now. Save.

Now I could also in the event date information area, I could mark that this is an all day event. In fact, we might let’s just go ahead and do that.

So I will say true or false. This is going to be true or false.

Okay. And there’s an actual element called true or false.

And I am actually going to move this up. So after I choose the date, immediately I want to say, is this an all day event or is this not an all day event?

Okay. The default value is going to be false.

The default value is check, which I think means true. I think that means true.

Okay. So this is going to be all day event, and I put a question mark, like I’m asking a question, all day event, true or false, okay?

And then you can even put a little message here, right? Mark true if this is an all day event, all right?

And then I think you can actually do a, yeah, you can do a stylized UI. So you can say on is yes, okay, that’s active, and then no is when it’s false, okay?

So we have on text is yes, mark, I’ll just say, mark yes, if this event is all day, okay. And then what we wanna do is use conditional logic.

If we have an all day event, we don’t need a start time and we don’t need an end time, it’s just, it’s the whole day, okay? So what we’ll do is conditional logic here, turn on the conditional logic.

If all day event value is equal to checked, then we’re going to. This is the logic for showing this field.

So if it’s an all day of not equal to check, so it’s not an all day event. Then we need to show this field.

Alright, that’s kind of how you read that logic. OK, then we’re going to do conditional logic here.

We’re going to turn this on and then all day event is not equal to checked. And then we’re just going to save and we’re going to test all of this out.

Okay, so we’re going to refresh here. All right, so notice that all of these fields are now grouped together under event date information.

This is kind of nice, right? And if I was able to move this around, it would all stay together.

Okay, so all day event. Yes, it’s an all day event.

Look how our fields disappear. Okay?

It’s kind of weird that it’s I always have trouble with these stylized UIs like to me it’s like is the value no right now or am I about to select no. You know it’s like clearly now yes is selected so right here no is selected but it’s still my brain especially again I you know I am dyslexic it’s like these binary things really really I struggle with.

Okay, but the logic appears to be working just fine. So we’ve got an event date.

Now at this point, at this point, you know, I’m like, we can continue brainstorming, right? Let’s in fact, we gotta go get a picture of our friend Kevin Hart.

So we’re gonna go to images. google.

com and we’re gonna go to Kevin Hart and we’re gonna get a, here we go. This is our man, our man coming in to give the comedy show.

Okay, now don’t actually do that in real life, okay? You can’t just go to Google Images and be stealing photos.

I’m on a local install. This is for demonstration purposes only.

You need to use royalty-free photos. And then, you know, if Kevin Hart’s actually coming to give a comedy show, he’ll give you permission to use a specific image.

Okay, so I’m gonna set this as our featured image. We’re trying to use, you know, we are using custom fields, but we’re trying to use some default areas of WordPress as much as possible as well.

Featured image, Gutenberg content, that kind of thing. All right, we are going to make an events folder, and it does help if you don’t have typos in here.

And then we will put in our photo of Kevin Hart, okay? So I downloaded Kevin Hart right here, and it’s already a WebP, okay, and I’m going to say set featured image.

So we’ve got Gutenberg content, we’ve got a featured image, now what we need to do is say that this is definitely a paid event, and our starting price is $79. And I’m going to put a little plus sign to let people know that that is our starting price, okay?

Could you append, yeah, append, append to that in the builder. Yes, when we do dynamic data, yes, you absolutely could.

But then you’re forced to have it. Like, what if the event price is literally 79?

Then, you know, there’s more logic to sort out there. We’re not gonna go that deep into it, okay?

So we are gonna go with just a raw plus sign right there. So we’ve got an event description.

What about, what date is this going to be? This is going to be on the 25th of August, 2023.

And it is not an all-day event. We are going to have a start time.

Our start time is going to be 9 p. m.

Okay. And then our end time is going to be 1 a.

m. Okay.

Which is actually the next day, but that’s okay. We’ll do 1 a.

m. All right.

Perfect. And we’re going to go ahead and we are going to hit update.

So now we filled out our first event. What we wanna do now is start creating our event page, get an event card made, get this bad boy in a grid, think about our layout of how we’re gonna do the page.

Okay, let’s get all of that done. So we’re gonna go over to pages, add new, and we’re gonna call this page events.

We’re gonna publish, publish, edit with bricks. Okay, I’m gonna add a section to this page and we are going to, we’re going to first build our grid, we’ll worry about our hero and all of that.

This is going to be our events grid. Guys, the situation where we’ve got to use BEM here.

We’ve got to use, well, we already know we’re going to be using BEM. This is going to be event section right here.

This is going to be our events grid. We are going to add a block in here, which is, well, we want to think about this.

Do we want to go the sidebar route? We need areas for our facets, right?

Where are our facets going to live? I think what we should do, very traditional, is a sidebar for our facets, and then our main area of our grid for our event cars.

And I’m gonna do that list format that you saw earlier. You can do any kind of grid that you want.

That part doesn’t really matter all that much. Okay.

Um, so I’m going to do events grid. Um, and yeah, I’m just thinking about names here, events grid.

Okay. So there’s a block and a block for our sidebar.

So events grid is going to be display grid and it’s going to be, um, grid one, uh, three. Okay.

I’m just using my grid variables here from automatic CSS. You can do whatever grid techniques you want to do.

You don’t have to use automatic CSS for this. I’m just doing it because that’s my workflow.

I already have a grid gap because I have automatic spacing turned on. So we’re all good to go here.

All right. So this, I just need to give them classes, right?

So events grid sidebar. And this one’s going to be events grid main.

All right. Events grid main.

0:21:34 All right.

0:21:34 So this is the main part of this grid.

OK, and then events grid main is going to get its own grid. Alright, so I’m going to display this as grid and we are going to make this a actually.

Because it’s a block, it’s already display flex one columns going to have gap support. It’s going to be just fine.

OK, so what we will put on here is content gap. We’re going to gap out all of our cards that are in here.

And I’m attaching that to the class of main. Now what I need is a block for our actual event card.

And because our structure panel is starting to grow over here, I’m gonna start labeling everything. Very good practice to keep everything nice and organized.

Here’s our events grid. Here’s our sidebar.

Here’s our main. Here’s our event card.

Okay, perfect. And then this gets a class of event card.

Notice it’s not like events grid double underscore card. It’s a separate component.

It can live on its own. We can put it anywhere.

It doesn’t have to be in that specific grid. So name it as if it’s its own individual unique thing.

Okay, so that’s my event card. Now in this card, I want a wrapper for my media.

Always a good idea to have a wrapper for your media. And I want a wrapper for my main content of the card as well.

I’m sure there’s gonna be other wrappers, but those are the wrappers that we are going to start with. So I’m gonna open this up.

We’re gonna call this media wrapper. We’re gonna call this body wrapper.

Or we’ll just say content wrapper, okay? And then I’m gonna give these BIM classes.

So this is gonna be event card double underscore media wrapper And then this is gonna be event card double underscore content wrapper And then we’re gonna put media in our media wrapper that makes sense right so we’ll get a image in there image right here and For right now because I just what I would recommend doing Build the card you want to see then worry about dynamic data. You could, you know, if you’re advanced, pro user, whatever, you could just go straight into dynamic data from here, but we haven’t even added a loop, we haven’t done anything else.

I want to see a card, I want to know what my card’s going to look like, then I’ll worry about the dynamic data side of things, so that, and I’m very like, let’s work in pieces, let’s just make things work as we go, and that’s the, kind of the best way to get to the finish line. Because then if you go too fast, you get ahead of yourself, you’re doing, and then something doesn’t work, you gotta backtrack a lot, right?

Let’s get things working at every phase and then build on that. Okay, so I’m grabbing the image here, and I’m just gonna, so I’m just throwing a static image of my man Kevin Hart in here.

That’s all we gotta do right now. We don’t have to do anything fancy.

And so right off the bat, I can see, well, I don’t want my cards to be like this. I want the image to be on the left, I want the content to be on the right.

So on that class, I’m gonna go activate a grid and I’m gonna go right back to grid utility classes. And in this case, I might see what grid two looks like.

What does grid two give us? Or do I wanna go with like a grid one two kind of situation?

Do I wanna do a grid one three situation? I’m looking right now and I’m thinking that grid one two might get the job done here.

Okay. All right.

So then I’ve got my, um, content wrapper over here. Actually, where did I put, okay, I’ve put it on the wrong thing.

I’m putting the grid on the media wrapper because I’m talking too much. I’m going to copy that, get rid of that, get rid of that.

I want to select our actual card. This is where we want to put the grid.

So there’s grid one, two. Awesome.

And I’ve got my content wrapper over here. I’ve got my media on the left.

This is fantastic. Now, I’m gonna start putting things into my content wrapper.

What do we need to put in there? Well, we absolutely know we need a heading.

Like, what is the card heading? All right, so we’re gonna go heading.

That’s an H3, that’s good. We need that description.

Remember that description, okay? I’m gonna do rich text for the description.

And remember, we’re just gonna pull in stuff here, but for right now, I’m just gonna leave it as it is. And then, you know, we, we, you can debate all you want.

Like, I guess right here, you would think about this. Do I want this to be a clickable parent situation or do I want there to be a button or a link in here that people are going to click to get more information?

Me personally, I’m not going to go with a button or a link. We’re just going to make this a whole clickable card, clickable parent situation.

And we don’t need any button or link in there. Okay.

First thing I see right off the bat, I don’t want all this text and images and borders colliding and all of that. So I’m gonna add some padding.

We’re gonna go with space L just to get started with, and that’s gonna bring some nice white space into the mix. And I am going to content gap out all of my content that is in this card.

And right here you see a situation, right? The left and right side are growing.

Let me go ahead and grab the event card. We do wanna make sure that our align items is set to stretch on this card, which is gonna make sure both columns are always the same size.

And we can see right off the bat that our image is not growing in order to take up that entire space. And that’s a problem.

First thing I need to do is have a class on this, right? So event card media, and we are going to make sure that this is wrapped in a figure tag best practice here and we want to say how big does this image need to be guys that’s not 11 1280 pixels it’s not even 960 pixels i’m going to go with medium large here okay that’s the smallest one i have available um good optimization practices here and the first thing i’m going to attempt is flex grow of one i’m going to see if i don’t want to go hide 100% here.

You want to avoid hide 100% in grids because Safari hates them. Hates it.

Things will break. Okay so I’m gonna go with layout and it’s always in a different freaking panel.

Here we go. Flex Grow of 1 and now you see my card has gotten taller to take up the available space.

Problem is my man Kevin Hart looking a little skinny now. Okay looking like he’s been on a diet.

We don’t want that, so what we’re gonna do is we are going to object fit cover Kevin Hart, and now he’s gonna behave more like a background image, okay? I do not want a caption on these, and our alt text we will take care of.

That’s actually gonna pull in alt text automatically from the media library, so that’s all taken care of. Excellent, now on my entire event card, I wanna go ahead and give this a background color.

So I’m going to go into background and I am going to go to. .

. let’s see if we can explore our base options here.

We got base light, we got base ultralight, I don’t even have a color scheme on here. Let’s in fact let’s just go black and white okay.

I’m gonna go with shade ultralight on here and I you know I hopefully you guys can see the distinction between white and ultralight. I just, we’re going to go very minimalist here.

Okay. Also on my event card, I want to round the corners out a little bit.

So we’re going to go with a border. We’re going to go with radius of M.

And when you do a radius on a card, that’s got other elements in it, especially like an image, always a good idea because you’re going to see here, let me refresh. Notice it doesn’t look like the corners are rounded over here, even though they’re clearly rounded over here.

And that’s because the image is overflowing. The corners of the image are kind of overflowing and making it seem like your card does not have rounded corners.

And the way that you fix that is by going to overflow and setting it to hidden. And now we have rounded corners on our actual image.

Okay, guys, we are getting close. Now what we wanna do is we wanna test this for, does it support extra content?

Does the image grow properly? Does anything break if we have more content in?

So I’m gonna go to website Ipsum and I will grab a larger paragraph here. And I’m gonna drop that in to that card description area.

And you can see, watch, our card’s getting bigger, but nothing breaks. The image is good, it’s growing with the amount of content that’s in the card.

All of this is absolutely fantastic. The thing is, is we don’t have any other relevant data on this card right now and this is always a balance of how much of that event data do I want to show?

Do I just want to show the date? Do I want to show the times?

Do I want to show the date and the starting time but maybe not the end time? Do I want to show the price?

Do I want to or do I just want to show if it’s free or paid? These are decisions that you have to make and that’s why you know you can go in many different directions.

So what I’m teaching you are the concepts of how to get to where you want to go so that you can potentially go off in your own direction and make this as robust as you want to make it or keep it as simple as you want to keep it. Okay?

All right. So what we are going to do is think about maybe having another wrapper in here, maybe another container where we can contain what I call our event meta data.

Okay? So I’m going to go ahead and add a block here, and this is gonna be called event card double underscore meta wrapper, all right?

This is gonna be our meta information. Our meta’s gonna be like our time, our price, and all of that good stuff.

Now you could also, you know, why don’t we make this a little more fun? We’ll put the time information over here, and the price information over here, but we’ll put the date in here, like floating over this image, which means this image is also gonna need a little bit of an overlay action going on.

Okay, this is gonna be fun. And we’re just, we’re improv-ing here, okay?

Let’s tackle the date thing first. So event card media, maybe we’ll actually even make Kevin Hart grow when the card gets hovered.

0:31:18 Okay, this is good.

0:31:20 I don’t know how this tutorial’s gonna be, but we’re having fun with it, we’re learning things, that’s what’s important, you need to tune into the entire thing.

Okay, let’s do it, let’s do it. All right, so what we need to do, we’ve got our, that’s why we put a wrapper over here, by the way, guys, the wrapper always seems to come in handy okay so we have two ways we can go we can add our own overlay here or we can use brix’s overlay i i’m gonna stick all custom i’m just gonna stick all custom because we may want to do stuff with this overlay that’s not possible with the brix overlay let’s just stick all custom okay so on the media wrapper we’re going to go to layout position relative and because we’re going to use an absolutely positioned element inside of here that is going to be a div so we’re going to pop a div in here and this is going to be a vent card okay media overlay just like that and then I’m going to go with absolute positioning on this zero zero zero zero it’s going to attach it to all sides and I’m going to test out and see whether or not we have a let’s just put a background color on here and we will do base, no, we’ll do shade, trans, 50, 60.

It’s already a dark image, okay? But we’re gonna test different images to make sure our overlay looks good on all images.

We can even do actually a gradient here. Probably wanna do a gradient now that I’m thinking about it, okay?

All right, let’s do a gradient. So we can do a custom gradient on our own with just custom CSS, or we can actually just come in here and apply a gradient to the backgrounds, and this is probably what we’re gonna do.

So I’m gonna choose a shade, and we’ll do a shade like maybe 80, and then on the other one I wanna choose transparent. So I’m just gonna write raw transparent right here, and that’s the gradient we get.

I wanna flip the order of our color so that the dark is down below, and then what I wanna do is with our transparent, let’s do 80% on that 50% let’s do, let’s do 60% 70. Oh no, no, no.

Sorry. Go the other direction.

40, 30, 40. We’ll do, we’ll do 40.

Okay. That should be perfect.

Uh, and then that’s going to save, so I can have my date stuff down here. Okay.

So I’ve got an overlay right here that’s on top of our image. Then I’m going to put in additional content, and we’re going to wrap this in another div.

So we’re going to put another div in, and this is going to be our date wrapper. Date wrapper, just like this.

I’m going to do event card double underscore date wrapper, just like that. Then we’re going to figure out how to position this as well.

Absolute, all right, so layout, position is absolute. Awesome, and then we need to put some stuff in here.

So text, text, I’m gonna put two text elements in here. One is gonna be the month, the next one is gonna be the day, okay?

Awesome, so we’ve got month and day, and I’m thinking about this. How are we going to, I’m pretty sure with our output it’s gonna be okay.

I’m pretty sure with our output it’s gonna be okay. We’re in uncharted waters here.

I’m just, we’re riffing on this. All right, so this is gonna be event card double underscore month and then this is gonna be day.

So event card double underscore and we have date. Okay, I’m actually gonna, we’re gonna revise.

We’re gonna revise. Date double dash day.

Okay, we’re gonna think modifiers here. This is gonna be date month, okay?

Date double dash month. And both of them are gonna get the event card date.

This is just for, I don’t even know if this is gonna be needed. I just know from experience, event card date, that this kind of approach gives you maximum flexibility Okay, so our month again.

I just want data in here, so I’m gonna say May Our day is gonna be 28 actually I’m gonna put in because it is August okay, so I’m gonna say aug aug up there Okay, now what we want to do is position this date wrapper away from the corners I want it down here in the bottom. Left zero, we’ll pin it to the left side.

So it’s now pinned to the left bottom corner of this of this card right here. What I want to do is move it in from the left and in from the bottom, right?

I want to, how much? 1M?

Probably good. All right, so 1M there and now you see it’s right there.

Now what I can do is style my event card date month. All right, so we’re gonna go typography.

The month is gonna be equal to my H1. I want it to be big, I want it to be big, okay?

And we’re gonna go with uppercase. And then inside of date wrapper, I’m gonna try to use inheritance and see if we can just make all this white.

So I’m gonna scroll down and find white right here. See how it all turns white if I use inheritance.

I don’t have to do it on each individual item. And then look at this.

It’s going to come in handy. The shared class right here is going to come in handy.

I want them both to be line height of one. Okay.

I also want them both to be minus 0. 25 M.

Woo. That is, that is a lot.

That is tripping. Okay.

Oh one five, Oh two five, three, five, four, five, five, five. I want to just dial this letter spacing in a little bit.

And then on date month, I want that to be font weight of 700. Perfect.

Okay. And then I want to figure out how big the day is going to be.

H1, we’re going to figure out what looks good. Maybe, maybe exactly the same.

Maybe actually month goes smaller. We make this equal to like our H2, H3.

Ooh, look at this. So that can be like equal to our H3.

0:37:17 I like that.

0:37:18 I’m kinda digging it, guys.

I’m kinda digging it, okay? Now, our event day, we can go font-weight 700 on that too.

And in that case, what I’m gonna do is take off font-weight 700 from here, and I’m gonna go back to our shared class. Now, both of them can be set to 700.

Okay, I’m liking that. I am liking that.

Let’s bring this down a little bit. I wanna go H1 divided by 1.

1. I want it to be like 10% smaller, and that creates, guys, almost like perfect alignment right there.

Okay, as I often say, I don’t even get that close when I shave. Okay, let’s go.

Shout out to Nick D. Shout out to Nick D.

All right, so how sexy is our card looking now, guys? That is a sexy looking card.

Now, we are going to put in our time, right? So I’m gonna need a div in here, and probably another div.

This is gonna be, we’re gonna think, time and price, okay? So this is gonna be our event card, double underscore time wrapper.

This is gonna be our event card, double underscore price wrapper. Okay.

And then that is all contained in meta wrapper, which we want to use a flex. So we’re going to say display flex, and we’re going to put those two things in a row.

And then we’re going to probably space between them so that they are on opposite ends of the card from each other. Probably the best way to do this.

Now, I don’t even know, we might end up putting this price somewhere else. If I don’t, like I’m not working from an existing design I’m just playing around here.

Okay so event card time rever we want these to be flex by the way let’s put both of these as display flex now that we have classes on them. Okay let’s handle the time first so we’re gonna have our start time and our end time that means we need two different elements and I’m just gonna put in normal text for now so we’re gonna say like 9 a.

m. I think it goes like that.

And then we’re gonna say 1 a. m.

All right? So we have nine and that, sorry, that was 9 p.

m. So it’s 9 p.

m. to 1 a.

m. This will all be dynamic data in just a minute.

Now we need to think of our classes again. So this is gonna be event card, time.

We’re gonna use the same approach that we did with the date. So I’m gonna say time.

Both of them are going to get that class event card time. Excellent.

And guys, event, event cards are a very involved thing. Okay.

You can whip these up with ID styling. You can be, you can be done much faster.

I’m also talking through all of this. We’re focusing on scalability, maintainability and doing this stuff properly.

Okay. Next thing I want to do for these is HTML tag needs to be a time tag.

All right, these are times. So we need a time.

And then they’re gonna have a date time attribute. So if we come over here, we can go to attributes and we’re gonna say date time is gonna be our attribute and what the value of that is going to be is again, dynamic data.

I’m gonna grab this one, also gonna have date time attribute on it. Perfect, just like that.

Okay, so now we’ve got two times. What I wanna do is put a separator in between these.

I prefer, because maybe there’s a start time that’s not, there’s maybe there’s a there’s no end time. You can’t have an end time without a start time, right?

But you can have a start time without an end time. So I like to do this on the end time.

And so what we’re going to do is events, card, double underscore, time, double dash, end. This is the end version of our time.

And then we’re also going to have a start version of our time. So this is going to be time double-dash start just like this.

So now we have the ability to have shared styles between our times, but unique styles with each individual time as well. This event time end is going to have a unique style.

So I’m going to go to root, and we’re going to use a before element, and we’re going to say, and I’ll zoom in for you here. Then I turned off recently the auto expansion of this.

I don’t know if that’s good or bad. I’m still weighing the pros and cons here.

So our content is going to be a separator like that. All right.

And then I’m going to say that the margin inline is 0. 5 M.

And look at that. So we have automatic like spacing of things here.

I’m going to go ahead and hit save. And then guess what guys, if the end time for some reason didn’t need to exist, watch how clean this is.

Watch what’s going to happen. I’m going to go to layout display of none.

Look out. It just leaves clean, perfectly clean.

The start time. There’s no dash missing a time.

None of that shenanigan nonsense happening. So this is really good right here.

And then over here, we want to have our price. So I’m going to add in our price here and we’re going to say that this is $79 just like that and I want this to be a probably just a span right.

Okay you can put schema involved in all of this that’s again that’s 2. 0 that’s the 2.

0 version of this of this training. Okay so I’ve got a price down here, I’ve got times down here.

I’m not even going to worry about styling this right now. This is going to be the price wrapper, this is going to be the date wrapper, this is going to be the date meta or I’m sorry event meta.

Okay, this is going to be the description and look I didn’t put a class on there. Got to cross your T’s, dot your I’s my friends.

Event card description, perfect. Alright, let’s see how we’re looking now.

Guys, we have a, this is really, really, really coming along now. In the interest of, you know, we’re not gonna spend too much time on styling anymore, I just wanted to demonstrate a few little things here and there, we gotta really focus on the functionality of this training now.

Okay, first thing I wanna do is loop this up, all right? Now remember, we only have one event in our database, so even though we loop it, we’re probably still only going to see one card.

But then we’re going to go add a second card and then we’re going to get a little bit deeper into this. So what I’m going to do is I’m going to take a look at the structure here.

We’ve got our main, we’ve got our event card and we’ve got a media wrapper. Now we probably want to have an article tag on these cards.

These are articles. Technically they are articles.

And they are going to be in a list because it’s a list of events. So we need a UL, LI, article inside the LI and the card, the article is our card.

So I can just go right now and change this HTML tag to article, okay? And then if we go look in the DOM, let’s go ahead and inspect this and I will zoom in over here, okay?

All right, so bring this down. Here’s our event card and look, there’s our article right here.

There is our card. But look, we have no list structure going on up here.

And in order to get this list structure proper, this main is gonna be our ul. So we’re gonna go HTML tag of ul on our main, and then we’re gonna go to style, and then I believe it adds default user agent padding.

We’re just gonna zero that out on our class. So doesn’t look like a list is happening here.

You can also margin top and bottom zero. Sometimes it does that on ULs.

Our event card is already an article, so it can’t also be an LI, right? So what we need to do is wrap this with a block.

And that block, we’re just going to call LI. So that’s going to be our list.

And then for main, we’re going to signify that this is our unordered list as well. It’s good to be able to see this structure at a glance.

Okay, and then I’m gonna say that this is an article right here. So we’ve got our LI, so we’re gonna come in here and HTML tag of LI on this, and then we’re gonna save and we’re gonna preview this.

Okay, so we have inspect, okay. All right, let’s collapse all this stuff down.

So look at this, we have an unordered list and we have a list item inside of that. Inside the list item we have an article which is our card.

So this is all fantastic from a DOM perspective. Okay and don’t worry we’re going to go through clickable parent, we’re going to do all of this stuff.

Okay all right so I want to focus on looping now. I am going to loop my card, guys.

If I loop my card, it’s gonna create multiple cards inside of a singular list item, inside of a singular LI. I want to loop the thing that needs to repeat, even though it has other things inside of it.

And it’s like, the LI, I can’t even see it on the page, but I know I need to loop my LI. I need multiple list items inside of this list.

So I’m gonna go use query loop, and then the post type is going to be events. All right, we’re going to hit save and now we’re going to go refresh on the front end.

We still only have one event. That’s okay.

We’re going to do dynamic data now. So I’m going to say that and this is how you know the loop is working.

You can go in here and say post title and you’ll see Kevin Hart right here, which it says events. Sometimes Bricks messes this up, but on the front end, clearly it does say Kevin Hart.

I’m going to refresh and see if Bricks can, there we go. So Bricks gets some cobwebs in his brain sometimes and you just got to clear those out.

Okay so here we go we’re going to go with ACF we’re looking for event description. See how I named everything?

It makes it very easy to find everything when you’re looking at dynamic data. Okay that’s pulling in that.

Now we’re going to pull in the time. Alright so what is the time we’re gonna go with?

Dynamic data event time it’s down here somewhere event data information Start time right here. That’s exactly what we want and then we’re gonna go over to end time Clear that out and event end time ACF in time We’re gonna put that in and then we’re gonna go check on the front end again and look at that It is all perfect.

I’m gonna refresh the builder so you can see it all in there. Awesome.

Next thing I’m going to do is get our price. So we’re going to pull in our price, starting price.

Notice it’s just going to pull in a raw value, okay 79 plus. So my job here is to tack on that dollar sign statically and that’s going to add that to my output.

So now it has $79 there. And I can just style that up.

Let’s just give that a quick little basic style. So I’m gonna grab my price wrapper for padding.

I’m gonna go like 0. 25 M, 0.

25 M, 0. 5 M, 0.

5. I’m just guessing right now.

We’re gonna go typography, line height of one. Excellent, and actually on these event card times, line height of one on those, these don’t need a lot of line height.

They’re just gonna add extra spacing to your card. Things are gonna look a little bit off.

Okay, let’s go back to our price wrapper here, and we are gonna give this a background color of, this, you know, I love transparencies in these situations, like shade, trans 20, 10, let’s do 10. Let’s give this border radius of 50 VW, something like that.

Okay, because I want it to have like a pill shape. And there you go.

There’s a nice little badge for you. You can also come in here.

Oh, this is the actual text, doesn’t even have a class yet. So we’re gonna go event card.

We have price wrapper. This is actually the price, okay?

So we’re gonna put this in as the price and then we can go typography. Font weight is gonna be 700 here and that’s looking really, really, really good.

Now you could argue, maybe you have a little bit more padding in there, whatever. We’re just going to leave it like that for now.

I’m also just going to quickly style this up by going again, we’re going transparency on this really easy way to make this stuff work. You go 60% on the text or so, and now you’re going to start getting some extra contrast going on this car to really highlight what is important.

Okay, our meta stuff is going to be like our times, shared class, we’re gonna go color again, kind of the same thing, shade trans 60, get us a little lighter contrast in there. So really what stands out is the event title and then all of this stuff has proper contrast.

Now the price is standing out as well. And you could even go price and say, hey, that’s gonna be our website’s action color for sure.

Right? And then if you’re gonna go action color on that, this is where having the whole color system available to you really, really comes in handy.

Your background, instead of shade trans 10, you can go action trans 10 or action trans 20. And this really just feels like everything’s starting to tie itself together automatically for you.

Okay, so I’m really liking that we can also go border Let me show you a little border trick here. So we’re gonna go in on our price wrapper border We’re gonna go with one pixels on every side here.

We’re gonna go solid and again. I’m going back to transparencies, I’m gonna go with action ultra dark trans 10 and that’s gonna give us a slight little border there, and if that’s too much, you can always go from Action Ultra Dark to Action Dark Trans 10.

And that’s gonna give you a little bit more subtle border effect. Same color family, only a 10% darkness of the border.

Really subtle, but you don’t have to think about, oh God, what hex code is it gonna be? How do I go generate it?

It’s all done for you when you’re using automatic CSS. You just, it’s at your disposal.

It’s your job to use it, okay? All right, so now what we’re gonna do is another event.

We gotta get another event in here. See if our loop is working, then we’re onto facets, then we’re onto filtering, then we’re onto logic of not displaying, you know, past events, things like that.

Okay, events. So what we need, we got a comedy show.

Did I categorize this as a comedy show by the way? I did not.

So here we go. Comedy show.

Let’s go back. Now we’re gonna make a concert.

Nick D coming to town. Nick D is coming to town guys.

You know I’m buying tickets. If Nick D is coming to town, I’m buying tickets.

Let’s see if we get Nick D into action here. There’s a little Nick D.

All right, and we’re gonna go into our add new event. We’re gonna put this as the featured image and we are going to bring Nick D in here and we’re gonna hit save.

Perfect. This is gonna be a paid event as well and we are gonna start his tickets.

He not Kevin Hart level, okay? We’re gonna go $49 on Nick D.

And then event description, we are going to go to website Ipsum and we’ll just grab, we’ll grab this paragraph down here so it’s different. We will put that in here, and then of course, we want all of this text to be in the main body area of this.

And then we’re gonna go event day. So when is Nick D coming to town?

He’s coming to town in September. He’s coming September 8th, okay?

This is not an all day event. His concert is going to start at 5 p.

m. He’s doing a 5 p.

m. show.

I don’t know. I don’t know if that’s a thing, but that’s what we’re doing.

5 p. m.

to 6 p. m.

No, got to have a longer concert if Nick D’s coming to town. 5 p.

m. to 8 p.

m. We’re going to go ahead and hit publish on this.

I do need to mark this as a concert. Okay.

All right. And then what we’re going to do is refresh and look at this We got Nick D in here and we see one error of our ways Our date is not using dynamic data yet.

And our images is not using dynamic data yet Everything else is looking good except for those things So what we do is we come in here and we find our image we clear that out. We go featured image Pull that in and then for our date, this is what’s gonna be tricky.

Okay, can we parse this data out? So I’m going to come in here and I’m going to say start date, start time, no, no, no, sorry, date.

Okay, post date, ACF, event date, event date right here. I know I can do a colon here and then do I just get the month?

Is that, bam, bam, just like that. Okay, let me explain what I just did, okay?

So what we’re doing is we’re pulling in the date, but we’re giving a code of M. And if you go to Bricks, Bricks documentation, Bricks, date, dynamic data.

Maybe this search will get us there, I don’t know. Yeah, here we go, dynamic data.

You scroll all the way down to dates, and it shows you some of the stuff you can do with these colons, right? And with dates, it uses the PHP date manipulation, write this, PHP date format.

So like the year, year, month, day, things like that. This comes in really, really, really handy for your date outputs.

So basically what I’m telling it to do is just output the month, right? Okay, so it’s putting September and then this is August down here.

And so we’ll just, hey, look at that. I mean, absolutely fantastic, right?

Okay, the next thing we need is the actual day. So I’m gonna query the exact same thing.

So we’re gonna query the date, but this time I want the day, and I’m gonna do lowercase just as a guess and see if that works out. 0:54:40

And that is working out. 0:54:41

Guys, this is so fantastic. Now, what I think I wanna do because these are not always gonna be in perfect alignment due to the different widths of characters and things like that.

My date wrapper, I want to center all of the text. And that’s gonna keep that, you know, at least, you know, somewhat centered.

I don’t know if that’s the, I don’t know. I don’t know.

See, now I’m going back on that. Now I don’t know if that’s the right way to do it.

I don’t know if that’s the best approach. What I also maybe wanna do is take the month one and we’re gonna, instead of white, we’re going to do white trans like 70.

So maybe we get, yeah, uh, that may be too much though. Let’s go white trans 80.

I know this is not, you know, super important. Kevin, leave it to a designer.

Get, get your, call your, ping your designer, Kevin, and have him do this stuff. Okay.

All right. I’m just playing around showing you what, you know, what is available to us as our, as our options.

Um, I can also, I do think that that’s a little bit, I’ve already line hided that out. So I’m going to go on our month, we’re going to go margin bottom minus 0.

5 M. I want to pull these closer to each other, but I don’t want them to touch.

0. 25 M, 0.

15 M, just really kind of tighten up that spacing a little bit. Okay, perfect.

All right. I think I think we’re pretty good here.

What’s going on that we’ve got extra Feels like we have extra space. Ah, I think what we need to do We need to align this to the bottom in our meta.

We need to align The cross axis to end. There we go.

And that’s gonna take up all that. No, I’m still getting extra space in here and I don’t know why let’s inspect this we’ve got that’s got a p tag on it by default why do I feel like this card is too tall maybe it’s the image yes it’s probably the image it’s probably the aspect ratio.

So this needs to say root, not rop it. Rop it does not, it doesn’t work as good as root.

Root works the best for sure. We’re gonna go aspect ratio one to one.

And actually now I’m like why, why? Oh, probably because it’s width and height is controlled by the flex one that’s on there.

I’m feeling like maybe we should go position absolute on this. We got our media wrapper, everything else is already position absolute in here.

Let’s just go position absolute with this as well. Position absolute, okay.

And once it’s position absolute, I go top left. I now can actually do 100% height.

Okay, let me see if that fixes our problem. It does, it fixed our problem with our card height.

I can also go 100% width, save, refresh, that’s good. We just need to make sure, I mean, it’s always gonna have content in here.

I’m gonna check the size of this card. Not in mobile, let’s get out of here.

And let’s go to our article. The height of that card is 321 pixels.

I’m gonna take our card right here, our event card article, event card, and our minimum height, just to make sure we’re good with this. Let’s do 300, okay?

I’m gonna do a static value, 300 pixels minimum. That should be good to go.

Okay, now we’re looking really, really, really sharp. Next thing I can do is maybe add a little bit of a border there to our entire card.

So I’m gonna scroll down to border, one pixels on all sides, solid that, and then we’re gonna go shade, ultra dark trans 10. Love these transparencies for borders.

Really, really good for subtle, subtle borders that are in the same color family, all that good stuff. Okay.

I really am liking the way that this is shaping up. All right, let’s zoom out.

There’s our cards right now. Now we need to think, um, getting, we need to make an event that’s in the past.

Okay. Let’s, let’s get that out of the way first.

Let’s make an event that’s in the past and let’s make sure that it does not show up. All right.

So what are we going to do? We have, uh, we need a conference.

All right. So what’s a really good how about the the 10x conference shout out Grant Cardone right the you know love it love them or hate him love them or hate him all right we don’t need to get into the whole Grant Cardone thing right all right so 10x growth conference we’ll just say that that’s the name of his conference I’m just gonna say grants go grant with straight-up Chumpville he’s got he’s doing a free event.

This is a free 10x. Grant suddenly doesn’t care about money, he’s doing a free event.

Okay, 10x because we need a free one just to see with our filtering and faceting and all that. So I’m going to mark this as a conference, all right.

We’re going to go to images again, we’re going to say 10x conference. Let’s grab a photo for the 10x conference.

Let’s grab this one right here, save image as okay and we’re going to go in to events add new event that is our featured image let me pull that in right here okay and by the way this is where you do your alt tags guys okay 10x growth conference and then this is Nick D and this is Kevin Hart and it’s bricks is going to take care of the automatic alt text output. We’ll take a look at that in just a second.

So I’m going to sign the featured image right there. Perfect.

Now we’re going to go to our website, Ipsum, again. We’re going to grab this paragraph right here.

And this is going to be our event description, of course. And then we don’t need all the content in here because this is a past event.

We’re not even going to look at it anyway. The event date, oh, it already happened, my friends.

It was back in July. July 20th it went down and it’s start time doesn’t even matter.

We’ll say that it started at 1 p. m.

and it ended at 11 p. m.

Okay they went late on that. Actually that was an all-day event.

There you go, it was an all-day event. All right we’re gonna go ahead and hit publish here, publish here, and we are going to refresh.

Okay, guys, 10X growth, we’re already putting things in order. No, actually, no, we’re not.

We’re not putting things in order. Okay, you know what we need to do?

We need to, oh, and this is gonna be ordered by MediKey. Okay, we’ll handle that in just a minute.

Well, what we need to do is look at some other things first. Number one, look at our price batch, because it’s a free event, it has no price.

Our price badge is just sitting there like so looking super chumpy, right? Super chumpy, it’s like, ah, that’s broken.

And then over here, we have no time. That’s super chumpy as well.

And so what we wanna do is we wanna take our date wrapper right here. Basic text makes it, well, there’s two ways we can do this.

Date wrapper, time wrapper. Okay, I’m just thinking through this.

I think what we wanna do is put another text element in here and this is gonna say all day, all right? So this will be all day.

This is gonna be end time. This is gonna be start time.

So we have start time, end time, all day. Start time, I wanna go conditional logic conditions, okay?

And we’re gonna say dynamic data, and we want to search for if it has a start time. Event starting time is not blank.

Show this if the starting time is not blank. We’re going to save, and then our end time, we’re going to do the same thing, except it’s going to be end time is not blank.

Okay, perfect. And then for all day, our condition on all day is going to be dynamic data and we’re going to do all day is equal to, not equal to, I love to do the opposite, it’s safer.

Okay, not equal to true. And what we have to do is like, is it outputting true?

Is it outputting no? Is it outputting yes?

This is, we’re gonna figure that out, okay? Refresh.

All right, and then we see, let me go, 1:03:27

where are we at? 1:03:28

Where’s our all day event? Our all day event, let’s get rid of conditions, needs to say all day, not a whole string of things.

And then I can make this a paragraph tag or it can be a span tag probably just a span tag doesn’t really need any contextual meaning here okay so we do have an all-day event and then that means the class the shared class to get the shared styling of time right event card time it is technically part of the time so now it looks like all the other time slots okay all right so we see that there’s clearly some stuff going on with the conditional logic here so the output of yes no it’s probably true and false that’s probably what it’s looking for true or false okay so I’m gonna try to fix this this badge first no I put true or false so show if it’s equal to true. And I said not equal to true.

Let’s do not equal to false and see if it shows up. Our badge shows up now, okay?

So it’s not equal to false. I’m dyslexic, so thinking about the logic right now, with me and logic, literally I’m just gonna ramble or sit here and watch my brain spin in circles because the dyslexia kicks in tremendously like when logic comes into play.

Okay, now we gotta figure out, 1:04:59

actually the date thing, 1:05:00

the date thing is working just fine because we have no dates on here, we have dates on here. Now we just gotta figure out the price situation.

So there’s multiple ways to handle this. I mean, how do we wanna approach it?

That’s the real question here. I’m gonna refresh the builder because I don’t like what’s going on up here with these tags that are displaying.

I want them to snap into action. Oh, because they don’t have data.

It’s going to sit there like that and be blank. Ugh, bricks, ugh.

1:05:27 Okay.

1:05:28 Let’s think about the price.

So we have a price wrapper. This should be nice and easy, right?

And that has price on it. Okay, so we’re going to say another text element.

This is called free. This is our free badge.

And we’re just going to put price just like that. So it’s the same exact style.

Okay. This is going to be a span as well.

And we are going to say that this is free. It doesn’t need any dynamic data.

It just needs conditional logic. OK, so the conditional logic is dynamic data.

Select it. Type right ACM event type.

There you go equals free. Save.

There it is and I have free. The only difference is, oh, I know why that’s correct.

That’s correct. We didn’t do the conditional logic on here.

OK, so dynamic data and we’re going to go to price. And then we’re going to show this.

No, no, no, we’re going to type. I’m sorry type.

OK, event type and then this is going to be show this if it’s equal to paid. I’m going to say not equal to free though.

OK. Awesome, because that can result in less breakage, right?

Both things are operating off the same logic input. Okay, let’s tackle getting the old event to not display anymore, okay?

The way that we’re gonna do this is with a meta key. So I’m gonna open the query loop, okay?

This is on our main LI, the whole thing that’s running the query here. We’re going to scroll down to meta query.

The way that this works is it takes one piece of data and compares it to another piece of data. You can see the compare field right here.

You can say, are these two things equal? Is one greater than the other one, or greater than or equal, or less or lesser equal?

Is it like it? Is it not like it?

Is it in it? Is it not in it?

You can do a lot of comparison work here. And so this is really, really, really good.

Now what we’re gonna do is go to Bricks, dynamic data date output, and then we’re gonna go to the documentation here. And I wanna show you guys this so you can empower yourselves, right?

There’s a lot of stuff you can do with dates. We’re gonna choose this one right here.

We want the year, the month, and the day. We want the year first, then we want the month, then we want the day.

This is going to be the best way to compare dates. Okay, we’re going to bring this in and we’re going to put this as the value right here and then the key is going to be our date from our custom field.

Now in ACF it’s a little bit, especially if you put things in groups, it’s not super intuitive okay. I’m gonna open event date information and then we’re gonna see right here we’ve got event date and if I grab this it’s I don’t think it’s gonna work okay so I’m just gonna put in event date like this it doesn’t need to be in the little curly braces but I’m gonna put in event date and then we’re gonna say greater than okay and I’m gonna hit save and you see that everything disappears nothing is being queried.

So I’m gonna go try lesser than. So lesser, save, again, nothing.

And it’s because this is not the actual custom field ID, okay? So what we need to do is hop back over into the field group.

So we have event date, which is correct, but because this is inside of a group called event date information, we need to append or prepend event date information to that. All right, so we’re going to drop that in and another underscore.

So it’s event date information, event date. This is the, like, think of this as a path to getting to the custom field that we’re trying to compare.

And then we can choose greater or equal or whatever here. Okay.

And for some reason, when I do, let’s see, where are we at here? This, this, okay, let’s,

1:09:40 it’s a greater disappeared.

1:09:41 It’s like a bug in bricks.

Like where did greater go, right? Then if I remove that, now I can suddenly see greater than again, okay?

I don’t know what’s up with that. So I’m gonna hit save, refresh.

Look at this guys. Okay, greater than or equal to.

So you decide, do we wanna show events that are happening today? I think that would be greater than or equal, that it would show events that are still happening today.

But look, the past event is not showing anymore. This is the secret sauce to hiding events that happened in the past, okay?

All right, perfect. Now, the way that it’s ordering these is by the date that we put them in, not the date of the actual event.

We can use a very similar approach for determining the order of the event. Order by meta value right here.

Okay meta value and then our order meta key is going to be the event date thing. I believe this is how we’re going to do it and then we’re just going to see if we can, there we go, see how we can change ascending descending and it’s flipping them.

Now we have to add another event to make sure that this is correct. In fact, what we’ll do is we’ll unhide our past event.

That’ll show us if this is actually working, okay? So what we can do is, do I have to delete that?

I do have to delete it, okay. Current date, YMD, just remember that in your brain, all right?

So this is gonna bring back our old event, and now we see July, August, September. Let’s go ahead and reorder.

So we’re gonna say ascending, and now July, August, September, going in the opposite direction. So now instead of ordering our loop based on the dates these things were put into the system, it’s ordering them by the date of the literal event, which is exactly how you wanna do this in an event grid.

So that’s using meta value order by and the order meta key just like we had down below. Now, I’m going to add our meta query back for hiding the past events.

So that’s going to be this and it’s going to be current. Actually, I think I can just pull it from here.

Current date, and we just remember colon YMD like that. Then our comparison is not equal, it’s greater than or equal to.

Okay, that is the value that we want there. Save, refresh.

Okay, we’ve got Kevin Hart in August, Nick D coming up in September. We don’t have our past event.

Okay, let’s make the whole card clickable and then let’s add some facets. So what we wanna do is we wanna link this to dynamic data.

It’s gonna be linked to the post URL. It’s going to take people to the post page for this event.

OK, and then we need to say that this is going to be clickable parent and not parent E. That doesn’t does not work.

OK, clickable parent. And then what we want to do is go to the whole card itself and say focus parent shadow.

Alright, and then we’re going to go test this out. So whole card is clickable.

Everything is clickable. Nothing outside is clickable.

That’s good. And then can I focus and look at that?

I can focus on the entire card properly. This is really, really, really good.

Okay. And is that going to take us to our URL?

It is, which we have no template for yet, but that is all working exactly as it’s supposed to. Let’s get some facets going.

Okay. I’m going to add another container to this section and what you want to think about doing is creating like an L shape okay.

Where is this container? Let’s get it up here.

There you go. See I have an L shape going on where I have a box above my stuff and then a box to the left side of my stuff and then I can even come in here.

This is a container gap. I can even put a container gap into my grid.

And then this will make a perfect look at this. Some perfectly symmetrical gap between this up here and this over here in this element over here.

Really, really, really nice. OK, alright with the sidebar you know there’s a bunch of different ways to do this.

We can go with some padding in here, so we’ll do space L. OK, just slinging variables around background color.

We’re going to go shade, ultra light on this. That’s good.

We’ll leave that up there. I might tone this container gap situation down a little bit.

We’ll see. Now, what we want to do is put a facet in here.

I’m going to just do a block and we’re going to call this like a events grid sidebar facet group. Okay.

I’ll do sidebar facet wrapper. There you go.

Sidebar facet wrap. That makes that makes more sense.

Okay. Now in the sidebar facet wrapper we’re gonna need our own.

I’m a big fan of doing our own headings. Okay.

I don’t like using the facet headings. So we’re going to say that this is going to be a sort by, and I don’t even know what we’re going to put here yet.

Okay. And then this needs a events grid sidebar facet wrapper heading.

I know it’s getting long. 1:15:04

It’s getting, it’s getting a little long there, but it’s okay. 1:15:06

What we’re going to do is typography, make this like an H4. Perfect, okay.

Now let’s hop over here and let’s go into grid builder. Let’s talk about our facets.

We’re gonna go into facets. First thing I know, the search facet, I want the default one.

The load more facet, I want the default one. And then the, we can do a result count too, maybe find a way to throw that in there.

We need the sort facet. These are all, you can just import these, okay?

And then what we’re gonna do is we’re gonna rename them because there may be multiple search facets on a site, right? This is gonna be event search.

All right, so we’re gonna save. We’re gonna go back to facets and then we’re gonna say event sort.

1:15:54 Okay, we’re gonna go back.

1:15:56 We’re gonna load more, event load more, save, go back, and then event results.

Event result count. That’s fine.

1:16:10 Save.

1:16:11 Okay?

Awesome. Now, what we’re going to do is give this a little refresh here.

I’m going to grab this, which is going to be a facet wrapper. Okay?

And, you know, if you want to shorten these names up here, sidebar facet wrapper, you can just do events grid facet wrapper. Like it doesn’t, actually it doesn’t matter that it’s in a sidebar or not in a sidebar.

And that’s going to make this one, I just love the fact that you can come in here and edit these class names. So even if you mess up on your class names, you can just go edit them, it’s really nice.

So I am going to insert a facet here. And WP Grid Builder does so much of the heavy lifting for us.

So I want the sort facet and I’m going to say it’s asking me which grid do I want to do by the way. And I’m just going to choose this one there’s only one loop on here you’re just choosing the loop.

So I’m going to go in here, facet title, get rid of that. Save.

Okay. And we’re going to save on here.

We’re going to refresh. And look at this.

I already have a sort by. Look how that’s, they’re colliding, right?

They’re touching each other. No problem.

I’m going to refresh the builder real quick so I can see what’s real. And then I’m going to grab facet wrapper, row gap 0.

5 M. I even just probably, you know, content gap, actually content gap divided by two would work really well here.

There you go. Look at this.

Now problem here is that ain’t doing, it’s doing the newest and oldest don’t work, but the A to Z work out of the box because that’s based on the post title. Okay.

But the oldest and newest, oh wait, they do. I just don’t know if they’re working by post-date or event date.

I think they’re working by post-date, not event date. So we’ll check out that.

We’ll take a look at that in a second. I’m telling you guys, events is no joke, right?

There’s a lot of stuff to think about. I’m just going to duplicate these.

I just want to see what, look at that. I mean, look at the spacing.

Look at the spacing just automatically taking care of itself. Okay, next thing that we want to do is we want to round the corners of this because it’s offending my OCD.

So we’re going to go border radius m, bam bam, okay? So we got a little nice little border radius action happening on the sidebar that matches the cards perfectly.

I love when stuff just starts really coming together, don’t you? Okay, what else do we want to do?

We need to add a different facet. So, question, should we add the search facet up here?

No, we’re only going to put the result count facet up there. So this is going to be the search.

So this is going to be search. And I’m just going to swap this facet out guys.

So instead of event sort, it’s event search. And then the only thing I need to do with these facets is get rid of their titles.

So let’s open search load more result count Get rid of the title save Get rid of the title that one doesn’t have one which is good that one doesn’t have one which is good close close close Refresh refresh refresh, okay, there’s our search. Let’s search for Kevin Hart Automatic just works out of the box guys is so easy.

That’s why I love WP Grid Builder, makes things so, so, so easy. Okay, so sort by newest, what else do we need?

What other facet do we have? We can do load more, which is clearly not gonna go on the sidebar.

We need categories. Yes, yes, yes.

So we’re gonna go create a facet, event categories, behavior, and we’re gonna do radio buttons. And our taxonomy is going to be event categories not just regular categories event categories and this is going to be filter filter by we’re filtering by event categories okay save and you know there’s a lot of other stuff you can play with I’m going to refresh here the builder and then I’m going to come down here and this is going to be sort by I’ll say sort by date.

I’ll just say sort because you can do date or alphabetical right? Sort events okay we’ll do that.

Filter by category. You can do stuff based on the price you know show me events under under $100 you know whatever you want to do here.

We’re not going to cover every single use case, right? I’m just showing you the main things.

So event categories, I’m going to go ahead and hit save. Look at this, comedy shows, concerts, guys.

Look how easy, it’s so easy with WP Grid Builder, right? Okay, let’s add a facet in here.

This facet up here in our container is going to be a result count and it’s based on this right here and there is our result count. All right this is called events grid.

What is this going to be? Okay events grid it kind of goes with the grid even though it’s not in the grid.

We’ll call it a top bar. I don’t know what else to call it right now.

And we’re going to align stuff to the end to put that over there. Bam!

One to two of two posts. Now we’re going to go take a look at that facet and see if we have any options.

Event, result count. Okay, we’re going to go to behavior, result count.

Look at this. text singular so one post found no no no no no one event found of two total events okay save now let’s go refresh refresh one to two of two events showing really really really nice what we need to look at is is it truly doing it by the date we put the event in or is it doing it by the date date?

I already know the answer but this is how you go through this process of testing right? Okay so we need another event.

We got a concert, we got a comedy show. Who’s another?

Who’s another? Let’s go Dave Chappelle.

Dave Chappelle gotta come into town. Let’s go images.

There he is right there. There’s the man.

We’re gonna go featured image. I’m getting a little loopy, sorry.

It’s a long training and I already did a live stream today, almost two hours on the live stream. Things are getting a little loopy.

Let’s bring in Mr. Dave.

Oh, we’re also gonna look at the responsiveness of all of this, of course, of course. Look at the responsiveness.

Okay. Website Ipsum, grab this one right here.

It’s gonna be our description. Our event date, what are we going to do with this?

We want it to be in the past, but not so that it does not show up. So it’s the 15th of August right now, we’re going to do the 16th.

All right, all day event, no, start time is, Dave goes on late, Dave goes on late, 10pm, end time, Dave going to stay on until 1am, 2am. Okay, we’re going to go 2 a.

m. all right and then we’ll do start time is 11 p.

m. I don’t know why I’m you know caring all that much about a fake event but it is what it is okay comedy great categorized don’t need to worry about the page okay Dave Chappelle August 16th, August, September, oh there, so we got our answer.

There’s an August, September, and an August, okay. Does that give you the answer?

That gives you the answer, alright. I mean but look how good these cards are looking, like right, and I just, I did barely any styling on this.

I’m not even a designer. I mean we’re just, we’re looking pretty good.

Okay, what we need to do is go into that facet. Let’s go take a look at our facet behavior.

So we need to go to the filter event sort right here. Behavior sort by newest.

So not the post date. We need to do a custom field.

And I wonder if it’s not gonna, is it gonna pull it in? 1:24:50

Direction descending. 1:24:51

Field name, and I may need to go back to ACF and get this. Okay, events, event, date information.

So we’re just gonna piece this together up here. Okay, that’s number one, and then I come down here the event date bam just like that event date information event date get an underscore okay now come in here here’s our custom field wait a minute oh you can search look at this you can search okay event date oldest event date Bam.

1:25:35 Save.

Okay. 1:25:37

Cross your fingers. This is the part, guys, where you just, you cross your fingers.

Now, the other thing I’ll say is you want to re-index. After you make changes like that, re-index the facet to make sure the facet’s pulling all of the latest information.

So newest, September, August, August. Showing newest, show oldest yes now i don’t know if newest oldest actually makes sense as labels here but it does appear to be working okay so our label can be recent to recent to latest now i don’t know latest like recent to furthest?

Does that make the most sense? Order by, I can just say date, ascending, date, they’re actually backwards, descending and ascending, save.

Maybe this is the best way to do it. Refresh, data sending, they D sending.

My logic brain is like, is this right? I mean, it’s doing the filtering right.

No, no, August, September, August. They’re both pulling from the date field.

1:27:08 Oh, look at this.

Custom field. 1:27:12

I got to switch this to custom field. 1:27:16

There we go. 1:27:17

Save, re-index, save again just for good measure, refresh. Okay.

Date descending starts with September, then August 25th, then August 16th. Date ascending starts at 16th of August, 25th of August, 8th of September.

1:27:39 Yeah, I think that makes the most sense.

1:27:41 I think that makes the most sense.

1:27:42 Okay.

1:27:43 And then you can also A to Z, D, K, N, A, B, C, D, E, F, J, E, A, B, C, D, E, F, G, H, I, J, K, L, M, N.

1:27:53 Okay.

1:27:53 And then we go the opposite direction, N, K, D.

Okay. Looking really good there.

All right before I forget let’s do all of our hover stuff that that we I promised you earlier, right? Okay, so let’s go ahead and first we need this card to do something when we hover over it so I’m gonna grab the Event card itself.

You don’t really want to do this on the Li let’s do this on the event card itself and we’re gonna say that when this card hovers we’re going to go into CSS right here and I’m going to say root hover okay when this hovers what do we want to have happen I actually want this to translate most likely do I want it to translate on the y-axis or do I want it to translate on an X axis, a potential X axis translation, maybe of minus one M, that’s probably good. Yeah, I don’t think I want a Y axis translation.

Let’s just do that, okay? And then what we want to do here, because this is on the actual event card class right here, it’s not on the hover.

We want to say that we’re going to transition the translate 0. 3 seconds and we’re going to ease it.

And that’s going to do something like that, okay? So that just right off the bat gets us our basic hover translation, okay?

Which is good. I can zoom back out again.

There’s your behavior on that. Looks really good.

And we can check the announcement here. 1:29:27

VoiceOver on Chrome. Events, Events System, Google Chrome, Cabinet, Window, Events, Builder, Tab, Group.

You are currently on a tab inside of a group to select VoiceOver off. 1:29:39

I think now it’s coming in. You might want to, you know, earmuffs or whatever.

I don’t know what the volumes are at here. Let me just, I can’t hear it myself.

Actually, let me, let me put this on. Okay, let me, let’s, let’s try this.

1:29:52 Voiceover on Chrome.

Okay. Events, event system, Google Chrome, Kevin window, entering events, sort content, search content, sort content, non search content, comment, link, Dave Chappelle, article, visited, link, Kevin Hart, article, link, Nick D, article, voiceover off.

1:30:09 Okay, so we get good announcement, proper announcement.

It’s not trying to read everything in here, it’s just reading the headline, that’s the benefit of clickable parent. Now what I said I wanted to do is I want the person’s image to grow when we hover the card, okay?

So what we need in order to do this is quite easy. This you know a lot of people have this question it’s quite easy.

We are going to go to the media wrapper first and we’re going to set the overflow to hidden. Okay and I’m going to explain why we’re going to do that in just a second.

The next thing that we’re going to do is we’re going to get the image it’s the media itself and get that class event card media. We’re going to go to our card, back to where our hover styles are.

I will zoom back in. Root, when we hover, do something to this class.

That is not the one that I just did. Event card media.

When we hover event card, we’re going to do something to event card media. What are we going to do to it?

We’re going to scale it 1. 1, okay?

And now you see it grows when I hover the card, all right? That’s a good start.

Now, event card media needs to set a transition. So the way that I’m going to do that is I’m going to say root event card media so I can put all the instructions right here.

What I don’t want to do is go now hop over to event card. Then I’ve got stuff scattered everywhere, right?

I want this to just stay all in one place. So I’m going to say, transition the scale 0.

3 seconds ease. And now it’s going to nicely transition the scale along the same line.

Now the scale is making the image physically bigger, but because I cut off the overflow you can’t see it coming out of the wrapper. Let me go to the media wrapper here again.

Let’s take off the overflow and it’s still actually it’s very hard to tell it’s actually coming out of the one side of the box because overflow is hidden on the entire card but you can see it’s overflowing to the right side of the container but just think of the whole thing getting bigger than the box but then you chop off the extra with the overflow hidden. So overflow hidden needs to be on here overflow hidden on the event wrapper as well and now let’s zoom out and take a look at what we’ve got on the front end.

That is pretty slick. Okay let’s check out responsiveness and let’s get that all wrapped up.

So we are going to come in and just start looking. Right there I want to break this grid already.

Okay so we’re gonna go grid one here. Perfect and then okay yeah you see that when that does that we’re actually gonna need a different layout here.

Hmm and actually you know what now I’m thinking thinking about this. No, that’s fine, that’s fine.

We just want the grid to be first. 1:33:19

We just want the grid to be first. 1:33:21

So down here for main on this breakpoint, we’re gonna go order minus one. So we’re gonna put the grid first.

And imagine there’s a hero up here that says, hey, this is the event page and all that stuff. So it would say all of that, then it would show the events and then people can sort and filter events down here.

And what we may want to do is put another, like you could take this actually, you could take this facet right here, and you could plop it up here. Okay, I’m not on SSL, so copy-paste is not going to work.

Sidebar facet wrapper, we’re just going to duplicate that. And that one will come up here just like that.

Okay and did I do that right? Facet wrapper, facet, yeah perfect.

Okay so the top bar what are we looking at here? Top bar is going to be flex, row, correct, align everything to the baseline down here.

That’s got some extra padding or margin in it or something, but we actually don’t want to show this on this this breakpoint right here. So this facet wrapper, I’m just going to do this at the ID level.

We’re going to go display none. And then what we’re going to do is this breakpoint, we are going to display flex and it’s going to bring it back.

And I need to get the Is that a padding in it or margin on it or we got to inspect and find out what’s going on with these facets Okay, that that at least leaves us a search box at the top for people to use I’m just gonna go ahead and guess I’m just gonna I’m just gonna make a wild guess that if I just do root input Margin bottom zero. That was a bad guess, wasn’t it?

1:35:16 Okay.

1:35:17 Let’s go ahead and inspect.

So I’m going to inspect this and just find out where that’s coming from. Oh, it’s not coming from the input.

What is it coming from? Oh, the field set.

Okay. So if I just say root field set, margin bottom zero.

There you go. And I’m just doing the ID level to affect this one search box, okay?

All right, that is good there one out of one to three of three events. I Don’t really like how that’s being scrunched up I Wonder if I give that more space maybe if we go instead of flex on the top bar If we go with grid.

So let’s go with grid. First of all we got to, yeah okay there we go.

Clear all that out and go just grid two and see what happens. Save, come down, there we go.

That’s behaving much better now. Okay and then what we want to do is align items to the end like this, save, refresh.

1:36:32 Why is that?

1:36:33 Oh, because we displayed none.

1:36:35 It’s gonna put that there.

1:36:36 It’s gonna put that in the first cell more or less.

Okay see everything that we fix creates a new a new problem. And I just want to see there we go that’s the correct alignment for that.

So here here we’re pretty good I mean you you would want this facet wrapper that’s just a facet. Okay, style, layout, flex.

1:37:19 And I don’t know if we’re, yeah, we are.

Okay, there we go. Put that on that side.

1:37:22 All right, good.

The only thing is on desktop. How are we going to handle that?

How are we going to I think what I can do, oh man, this is just some root grid column 2. 1:37:47

And then we want to do that same flex treatment that we did a minute ago. 1:37:50

We did that at the wrong breakpoint. We should have done that way up here.

display display this as flex and then end content okay now we’re kind of back to where we were on desktop but then as we come down and we break to one column now look our search box appears right away this is all still aligned perfectly now we’re just focusing on what’s going on with our cards okay so Okay, so let’s come in here. We’re good.

We’re good. We’re not good Yeah, okay, I need to see my breakpoints probably aren’t even set up properly so yeah 478 We need to be looking at like 379 right here And then I can update that one and then this one We’re looking at 479 or need to be looking at 479 and then this one we need to be looking at 768.

1:38:52 Okay.

1:38:53 All right.

Now those are configured. Let’s refresh the builder.

Let’s zoom out. Let’s look at this.

Look at it. Now we see the correct thing.

Now we need to break that here. Okay.

So event card article goes to grid one here. And now we see a problem with our image.

That’s the problem I was wondering about earlier. Our media wrapper needs to have a minimum height on it.

Okay, so we’re gonna go to style, layout, minimum height 300, and that’s gonna bring it back. Oh and look, look at what our hover is gonna cause a problem on mobile devices here.

Okay, and I’m actually gonna make this 200 pixels or maybe 240 pixels something like that really dial that in our date still looking really nice and they’re really sharp so this is good this is good let’s go back here here here here okay so let’s take a look at our our hover so we’re gonna come in to our card we’re gonna activate our class come down here and find our scale scale here’s our translate right here okay so we want to translate that only at like nine nine one and up so this calls for a min width media query okay so what we’re going to do is we’re going to write at media min-width 991, open the curlies, stick this inside there. Once we stick this inside there, that means it’s only going to happen.

See, it’s still happening on desktop, still happening here, but when it stacks, that’s still up. Oh, wait.

Yeah, hold on. Maybe because we’re in the builder.

Let’s refresh, maybe the builder, maybe Bricks has a little cloudiness in the brain. It did, it did.

See, it was just Bricks. If there’s a situation where it’s like, no, no, no, no, no, no, I told that did not happen.

Refresh the builder and see if it’s still like that. We can cut this right here.

2. 0 will cover multi-day events and the template for your event page.

That’s what we’ll cover in 2. 0.

And then if we need a 3. 0, make any requests that you guys want.

Let me go back to camera. Make any requests that you guys want for functionality.

We will do a potential 3. 0, addressing some additional customization options that you might wanna put in here.

And then if we get to like the best event system that’s ever been created with advanced custom fields. I will actually save all of this as like a package.

Like you get the event grid, you get the facets export, you get the event page template, you get the advanced custom fields export. So literally you could just import the custom fields, import the templates, import the facets, and you got your whole event system duplicated for you.

And you can use it exactly how you want. That’s gonna rely on you guys giving some feedback, letting me know what else you wanna see inside of this system.

When we get to multi-day event, it’s gonna be fun because we can do like different, like an event schedule per day maybe. I don’t know, it depends on how advanced you guys want to get.

Let me know in the comments. It is up to you guys.

All right, that’s it for episode one of this event grid or event It is up to you guys. All right, that’s it for episode one of this event grid or event management system series.

Peace.