Widget For Eventbrite API

Demo for Widget For Eventbrite API plugin

Calendar Layout Demo

by

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' popup='true'] which will display the calendar layout and the links will open in a new tab

Grid Layout Demo

by

A popular grid layout using shortcode [wfea layout="grid" newtab="true" tickets="true" limit="9" ]

Put Eventbrite in a Pop up

by

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

by

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

Ended Events

by

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

by

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.