Demo for Widget For Eventbrite API plugin
The Eventbrite display plugin has many pre styled formats and one such format is a calendar layout as shown here ( see alternative such as grid layout )
This uses the shortcode [wfea layout='cal' newtab='true' limit='999'] which will display the calendar layout and the links will open in a new tab
A popular grid layout
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
Shortcode [wfea layout='cal_list' thumb='true' limit='9999999']
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']
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']
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.
Remove the Book Now button totally using a shortcode like [wfea layout="grid" booknow="false"]
