A new feature since 2.8.0 – you can now display Eventbrite within a popup to keep visitors on your site by specifying popup=’true’
e.g. [wfea popup='true']
Cal List with date range
Using the Calendar List template with date ranges
[wfea length="21" layout='cal_list' limit="99999" booknow="false" start_date_range_start="-9 months" start_date_range_end="+1 year" status="live,started,ended"]
Note: status to be defined as live,started,ended to get prior events
Calendar List View by Month
Shortcode [wfea layout='cal_list' thumb='true' limit='9999999']
Calendar with Images instead of text
To get this effect requires some technical work, however I created an add on plugin that will do it for you https://github.com/alanef/display-eventbrite-template-calandar-image
the shortcode used here is [wfea layout='imagecal' limit='999']
Ended Events
Show the last 5 events that have ended or already started, and show the most recent first
[wfea limit='5' status='ended,started' order_by='desc']
Custom Grid Layout
With a bit of CSS you can make your layouts unique to your design, in this example I have added a bit on animation, changed the number of columns, and tweaked the colors
To start with I have wrapped the I have wrapped the shortcode with an html div with a class of ‘custom1’ so I can make css changes without impacting my other examples. I have hidden the excerpt and set the book now text, and link directly to the ticket screen.
<div class="custom1">
[wfea layout="grid" newtab="true"
tickets="true" limit="99999" excerpt="false"
booknow_text="BUY TICKETS"]
</div>
Now for styling: using css I will color the background to black and the text to white and force uppercase, tweak the entry meta section text size and padding and the CTA button height.
.custom1 section.wfea.grid .entry-meta {
border: none;
color: #fff;
font-size: 75%;
padding-left:5px;
}
.custom1 .post, .custom1 .entry-header,
.custom1 .booknow, .custom1 button {
background-color: #000;
}
.custom1 .entry-header p, .custom1 .entry-header a {
color: #fff;
}
.custom1 section.wfea button {
color: #e7e535;
text-align: left;
margin-bottom: 0;
}
.custom1 .booknow {
line-height: 1;
}
Also let us remove the top date – just leaving the lower date and time.
.custom1 .entry-header time {
display: none;
}
Now, to change the number of columns, you will need to work out your own media break points based on your own theme. Here I am going from 5 columns, to 3 columns, to 2 columns, to 1 column
.custom1 section.wfea.grid {
grid-template-columns: repeat(5,1fr);
grid-gap: 30px 15px;
}
@media only screen and (max-width: 1200px) {
.custom1 section.wfea.grid {
grid-template-columns: repeat(3,1fr);
}
}
@media only screen and (max-width: 1024px) {
.custom1 section.wfea.grid {
grid-template-columns: repeat(2,1fr);
}
}
@media only screen and (max-width: 600px) {
.custom1 section.wfea.grid {
grid-template-columns: repeat(1,1fr);
}
}
Then lets add some animation, I’m going to make the individual post move up on hover, and also add an arrow on the CTA button
.custom1 .post:hover {
margin-top: -20px;
transition: margin 600ms;
}
.custom1 .post {
margin-top: 0px;
transition: margin 600ms;
text-transform: uppercase;
}
.custom1 section.wfea .booknow button:after {
content: '\2192';
opacity: 0;
transition: all 500ms;
}
.custom1 section.wfea .booknow button:hover::after {
opacity: 1;
padding-left: 1em;
transition: all 500ms;
}
And below is the final output, so with some CSS and a bit of experimenting you can create your own unique look.