Demo for Widget For Eventbrite API plugin
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']
Whistle stop tour of the WordPress admin panel. This 15 minute online seminar is intended for business that want to know a little bit more about their WordPress admin panel. The talk will be informally delivered by webinar. The presenter has been working with WordPress for over 7 years.Read More »
Whistle stop tour of the WordPress admin panel. This 15 minute online seminar is intended for business that want to know a little bit more about their WordPress admin panel. The talk will be informally delivered by webinar. The presenter has been working with WordPress for over 7 years.Read More »
A limited edition webinar for new WordPress website owners to understand the basic principlas of security. Covering Baic security principals Practical security steps Understanding the types of threats How to recover from a breach The session will last approximately one hour and will have time for spcific questions. Strickly limited …Read More »
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"]
