Updated on 30 Jan 2023
The Events Calendar is one of the most popular event plugins for WordPress.
With The Events Calendar active, single event pages appear fine out of the box in Bricks.
However, in certain situations, you may want to customize the layout inside the Bricks editor and in this Pro tutorial, we share how this can be done.
Go to Events → Settings → Display.
This is a Pro members-only tutorial.
To get full access, login below or sign up for a Pro Account
Sridhar Katakam is a WordPress expert with more than 12 years of experience. Sridhar is the founder of WPDevDesign and BricksLabs. He lives in Melbourne, Australia.
Step 4 doesn’t work, when clicking the link I get “Your request is blocked due to invalid referrer. If you are trying to hotlink this page, please use: /raw/fPZ2U12y”
Is there another way to obtain this file?
Fixed the link.
It is https://pastebin.com/raw/fPZ2U12y.
The template is not taking over the post type – it’s defaulting to the Events Calendar layout. Please advise.
Does it work when you set the Events template display to Default Page Template?
That solved the problem. But the shaded area container is at the bottom of the page instead of superimposed over the image. Changing the Left Container > Image to position: relative and the Left Container > Container to position: absolute fixed that. You might want to update the mirror .json file (where I got the file from).
Just the relative position was needed for Left Container > Image.
I have replaced the template export in the tutorial with the updated one.
Hi Sridhar, would you know how to show additional fields separate from each other?
I can get them to show with the but it shows all custom fields types in a row separated by a comma so it shows brand name, region, tactic, e.t.c
Currently, it shows like this in the admin:
Which outputs the front page like this
Region: Brand name, tactic name, region name
I need it to show like this on the front end:
Brand: brand name only
Region: region name only
Tactic: tactic name only
I can’t find a way to separate them by the separate “Additional Fields”
If you know how or can figure it out, that would be awesome.
Solomon, Can you share more info about your fields setup? Screenshots and an export of the field group would be good. Are you using ACF or Meta Box?
Can you also share a screencast of your setup?
Hi Sridhar, apparently in my original post some of the things didn’t end up posting due to the curly brackets, like this screenshot here https://www.dropbox.com/s/cmtnre4cw5h3scu/CleanShot%202023-01-24%20at%2020.49.25%402x.png?dl=0 so I’m sure that ended up being pretty confusing.
Anyway, I’m using The Events Calendar pro version and they have their own custom “Additional Fields.” you can see here in this screenshot here
If I’m using Metabox custom fields I have no issues getting them to display correctly.
However if I’m using Metabox fields I don’t know how to get TEC filter bar to filter them, so I’d need to set up the same custom field twice: once for in the TEC “additional fields” for the filter and once in Metabox custom fields to be able to output them correctly on front end. If it’s set up like this my client would need to input the same information in two places. If all else fails, I think I might need to go this route, but I’d prefer them to not need to double input the same information.
If possible, I’d like to use Metabox for all the custom fields if there’s a way to get the filter bar to work with them. Or I’d be just as happy if I can get the TEC additional fields to output separately on the front end like the figma wireframe here https://www.dropbox.com/s/yupjhhmchf6wdc4/CleanShot%202023-01-24%20at%2021.09.58%402x.png?dl=0
Current template setup:
Bricks template currently calls the TEC additional fields like this screenshot here (same as the 1st screenshot) https://www.dropbox.com/s/cmtnre4cw5h3scu/CleanShot%202023-01-24%20at%2020.49.25%402x.png?dl=0
On the front end it outputs like this screenshot here https://www.dropbox.com/s/pnmb3mqbsck3tkw/CleanShot%202023-01-24%20at%2020.58.41%402x.png?dl=0
You can see on the front end where everything is combined and I need them separated like in the wireframe screenshot.
I found the “tribe_get_custom_fields” from this page here https://docs.theeventscalendar.com/reference/functions/tribe_get_custom_fields/ but not finding a way to be able to separate them by ID name or anything.
Admin area template basic setup, note there are some metabox fields here I was playing around trying different things but this shows basically what I’ll be setting up.
Hopefully this all makes sense and is a bit more clear of what I’m looking to achieve.
This should be straightforward to work around.
Since tribe_get_custom_fields() returns an array we just need to define a custom function that returns the value of the supplied key.
This is assuming that the array is not multi-dimensional.
Can you share a screenshot of the output of https://gist.githubusercontent.com/srikat/e520fd7622ff511e5c90cc7e9f6330a9/raw/421f77bcbc107a5c297ca6c2c525418c7f022195/gistfile1.txt in a Code element?
Hi Sridhar, I believe this is what you’re asking for here https://www.dropbox.com/s/p40wvxdp0u8jatu/CleanShot%202023-01-26%20at%2011.57.21%402x.png?dl=0
If it’s not if you can give me a little more instruction I can get you what you’re looking for.
Or, if this is what you’re looking for and nothing returned then maybe the array is multi-dimensional like you mentioned.
Please let me know when you can.
That doesn’t look right. The array is just empty.
Can you send me your WP login via https://brickslabs.com/support/?
Hi. I have tried to follow this tutorial and change the layout etc. However, although it shows correctly in Bricks backend it seems as if the various functions i.e and not actually managing to receive the post ID so I get the current time for the first function and nothing for the second one when I publish the template an access individual events.
Yes, add me to your mailing list