Getting EventIn to Play Nicely with Bricks Builder

What Is Bricks Builder?

Bricks Builder is a theme and page builder for WordPress websites. I like it because it allows me to build visually interesting websites without having to hand code a lot of things, and it does that while being both very powerful (I can do a lot of things with it) and very light (it doesn’t slow down my websites with unnecessary code). In fact, while building websites is not my full-time job, the sites that I do build now tend to be built with Bricks. And that includes the site that you’re on right now.

I also like it because I bought a lifetime and unlimited license for it, and I like the fact that I don’t have to pay for it again and again either for each site that I use it on, each year that I want updates for, or both.

This guide is going to assume that you’re reasonably familiar with Bricks.

What Is EventIn?

EventIn is an events management plugin from ThemeWinter for WordPress. I like it because it lets me build events calendars and maintain recurring events, and because it has a lot of other features besides even if I don’t use those features right now, from ticket sales to schedule management to Zoom integration. I also like it because, like Bricks, I bought a lifetime unlimited license for it.

What Are the Challenges in Getting EventIn to Play Nicely with Bricks Builder?

Here’s the basic problem: because EventIn is designed to work with any WordPress theme, it forces certain design options on the person using it to build the site, and that can make it difficult to get it to display events in a way that matches the rest of a site. ThemeWinter provides documentation for creating your own layouts for single events, but (1) that doesn’t cover creating your own layouts for event listings and calendars, and (2) it means coding, which is precisely what we want to minimize by using Bricks.

So I spent some time getting Bricks Builder and EventIn to play nicely together, so that I could leverage the power of Bricks to create better layouts for my events: layouts that matched the rest of my website.

Single Events Pages with Bricks Builder and EventIn

There are two things that I am going to show you how to do in this post: create a single event page that lets you layout EventIn events pages using Bricks, and create an event listing loop that you can insert into any page using Bricks. Let’s start with a single event page.

A single event page is a webpage that has information about a single event. In our case, we want to create a template in Bricks that our website will use to display any event that we create in EventIn. Unfortunately, EventIn only gives us a few options for creating single event layouts, so we are going to override that.

The first thing that we’re going to do is create a set of folders in our WordPress theme that mimics the set of folders in the EventIn plugin. I use a child theme that I just call bricks-child, so my folder structure looks like this: public_html → wp-content → themes → bricks-child → eventin → templates.

The second thing that we’re going to do is create a file in the templates folder that we just created and call that file single-event.php.

And the third and final thing that we’re going to do is put this code in that single-event.php file:

<?php
get_header();

$bricks_data = Bricks\Helpers::get_bricks_data( get_the_ID(), 'content' );

if ( $bricks_data ) {
	Bricks\Frontend::render_content( $bricks_data );
} else {
	if ( have_posts() ) :
		while ( have_posts() ) :
			the_post();
			get_template_part( 'template-parts/page' );
		endwhile;
	endif;
}

get_footer();

This overrides EventIn’s single event file and tells our side to use Bricks data to build single events pages. Now we can create a Bricks template, assign it to the post type of Events, and build the layout just like we would for any other post template!

Event Loops with Bricks Builder and EventIn

Now, let’s move on to event listings, which are just query loops that pull in events. These are a little more complicated because we need to deal with the way that EventIn stores some data, and especially because we need it to pull in both one-time and recurring events.

First things first, we need a query loop. Edit the page where you want this events listing to display in Bricks and insert a container with a query loop. We are going to query Posts and activate the PHP query editor. And our query is going to look like this:

$post_type = '{etn}';

return [
   'post_type' => [$post_type],
   'meta_query' => array(
      'relation' => 'AND',
         'date' => array(
            'key' => 'etn_start_date',
            'value' => date('Y-m-d'),
            'compare' => '>=',
         ),
         array(
            'relation' => 'OR',
                array(
                   'key' => 'recurring_enabled',
                   'value' => 'no',
                   'compare' => '=',
                ),
                array(
                   'key' => 'recurring_enabled',
                   'value' => '',
                   'compare' => 'NOT EXISTS',
                ),
         ),   
   ),
   'orderby' => array (
     'date' => 'ASC',
     'time' => 'DESC',
   )
];

Obviously, you might have other bits and pieces that you want to add, but here’s what this query does. The post_type tells us that we’re fetching posts from EventIn, meaning that we’re fetching events. The meta_query makes sure that we’re fetching events that (1) are starting either today or after today, and (2) are either not recurring events at all or are the child of a recurring event. This is important because EvenIn handles recurring events by creating a parent event (the event in general) plus a child event for each occurrence. This query pulls the occurrences, not the parent event. Finally, it sorts them with the event that’s closest to now first and the event that’s furthest in the future last.

Now, we can layout each post in the loop just like we would for any other loop!

A Note on Dates

One of the last challenges that I ran into with EventIn and Bricks was getting my event dates to display correctly. EventIn has a limited number of ways to display dates, and none of them are my preferred style of month_name month_date, year, which looks something like January 1, 2024. So let’s look at how to get that format, or, I suppose, any other format you want.

First, in your child theme’s functions.php file, add this code:

/**
* Get date for EventIn
*/

function eventin_date($thedate) {
$date=date_create($thedate);
$returndate = date_format($date,"F j, Y");
return $returndate;
}

Then, where you want to display your event date, add this dynamic data (which will also display the date):

{ echo:eventin_date({ cf_etn_start_date } ) } at { cf_etn_start_time }

Be sure to remove the spaces from that, but there you go!

Conclusion

Bricks Builder is currently my favorite site builder for WordPress, and I’m confident that it has a bright future ahead of it. EventIn is a pretty good event management tool, and I’m hopeful that they plan on improving their integration with Bricks. While we’re waiting for that integration, though, you can use the methods above to get them to play a little more nicely together!