How to Add Event Scheduling and Booking to Your Site Using the Pottery Studio Layout Pack

Posted on February 6, 2018 by in Divi Resources | 40 comments

How to Add Event Scheduling and Booking to Your Site Using the Pottery Studio Layout Pack

If you ever wanted to add event scheduling to your website, this is the tutorial for you. The Modern Events Calendar plugin combined with Divi’s beautiful layouts are an effective combination both in design and functionality.

In this tutorial, I will be showing how to add event scheduling and booking to Divi’s Pottery Studio Layout. I’ll be showing you how to add new events and also create custom shortcodes to display event calendars on your website just about any way you can think of. Here is a brief breakdown of what I will be covering:

  • How to configure the Modern Events Calendar plugin settings.
  • How to create new events.
  • How to enable booking functionality to include a booking form on your event pages, a payment gateway, and email notifications.
  • How to create custom shortcodes to display your event calendar in different ways.
  • How to style your event pages to match your Divi Layout.

Let’s get started!

Sneak Peek

Here is a sneak peek of the event pages we will be creating.

Here is What You Will Need

To complete this tutorial you will need the following:

  • The Divi Theme (installed and active).
  • Pottery Studio Layout Pack. Actually I will just be using the Pottery Studio Classes page layout.
  • Modern Event Calendar Plugin (installed and active)

Modern Events Calendar Settings

To start things off I’m going to go through the settings we need to get the functionality we want for our event scheduling and booking. There are a ton of options available which really is empowering when you are trying to perfect the user experience when scheduling or booking events.

General Options

general options

I’m going to leave these general options to their defaults since this is really a solid setup for what I would expect most people would need.

For SEO purposes, you may want to add your own archive page title.

Slugs/Permalinks

No need to change this setup either. But if you are offering events that are only going to be classes for your site, you might change the main slud to “classes” instead of events. That way your event page url would read something like this… www.website.com/classes/pottery101/.

Event Details/Single Event Page

Change the Single Event Style to Modern Style. I prefer the design of the layout.

modern style

Currency Options

Add the USD currency sign $ here.

currency options

Google Maps Options

If you want to show a google map of the location of your events, check the option to Show Google Maps on event page. Then enter the API Key. I would put the Zoom level to about 14 which is closer to a street level. The Google Maps Style option is also a nice touch, but I’m leaving the default style for now.

google maps options

Google Recaptcha Options

Since you will need a booking form, you could enable this if you want to defend against spam bots.

Export Module Options

Leave both the Google Calendar and iCal options selected so that users will have the option of adding these events to their personal calendars on the event page.

Local Time Module

I’m going to select the option to show event time based on local time of visitor on the event page. This is a better user experience and I don’t have to worry about adding time zones and confusing visitors.

QR Code Module

I won’t be using a QR code, but it is a nice feature. The QR codes will be displayed on the event details page and on the invoice the user gets after they book an event.

Weather Module

Here you can add a weather module to the event page to show the weather conditions for the event. You would need it to register at darksky.net and get an API key.

Countdown Options

Select the Flip Style for the countdown timer. It looks great on the events page.

countdown

Social Networks

I’m going to keep all of the social networks active so that they show on the events page.

Next Event Module

If you want to show upcoming events on a single event page, check to show next event module on event page.

Frontend Event Submission

For this tutorial, I’m not going to allow users to submit their own events. But here is where you would select the page you want to display the event list of events added by users and the page you want users to add and edit their events.

Frontend Event Submission Sections

These are the options available for users to customize their own events. Not relevant for this tutorial.

Exceptional Days

Enabling this option allows you to exclude specific days for event occurrence dates when adding a new event.

Booking

booking options

This is an import option. Click to enable the booking module. Now a user will have the capability of registering for the event with a booking form on the event page. It also allow them to pay for their ticket to the event right there on the page.

I would also suggest selecting all the options that allow auto verification for a smoother registration process all around.

Coupons

Enabling this feature will show a coupons module on the event page. No need for this option right now, but it is nice to know it is here.

Taxes/Fees

By enabling the taxes and fees module and adding them here, you will be able to select these when adding new events.

BuddyPress Integration

This is a great feature for those using BuddyPress. It allows you to show all of your attendees in the event details page and it also shows the booking activity in the user profiles.

Mailchimp Integration

Here you can integrate mailchimp to add users to your lists.

Make sure your Save Changes and refresh the page. Since you enabled the booking functionaility, you will see another tab in the settings menu that says Booking Form.

Now that we have configured our settings, let’s go on to the Booking Form setup.

Add Custom Fields to Your Booking Form

On the MEC Settings page, click on the Booking Form tab.This is the form that shows on an event page allowing users to book the event. You can add custom fields to this form in the Booking Form section of the settings page. By default you booking form will capture name and email from the user. That’s all I need so I won’t be adding any custom fields.

form fields

Add a Payment Gateway

MEC has 5 payment gateway options including Paypal, WooCommerce and Stripe. You even have the option of setting your payment gateway to Pay Locally.

payment gateways

After a user fills out the booking form to book a paid event, they will be prompted to pay for this event based on your payment gateway options.

Since I will be integrating my form with Stripe, all I need to do is select the Stripe option and add the Secret and Publishable keys.

I’m also going to leave Pay Locally as an option as well.

Configure Email Notifications

On the MEC Setting menu, click on Notifications. This is where you can customize all the notification emails including booking notifications, verifications, and confirmations. Feel free to customize those to fit your needs. Since I selected auto verifications in my settings, my registrants will not receive verification emails, only confirmation emails.

notifications

Configure Styling Options

Next, click on the Styling Options tab. This is an important part of matching the design of the event pages with your Divi Layout.

Since I’m using the Pottery Studio Layout Pack for my site, I’ll use a color that matches the layout’s main accent color (the orange).

Enter the following Custom Color Skin: #fdb467

Under Typography, select Poppins for both the Heading and Paragraph font family.

styling options

Add Labels to be Used to Identify Events by Difficulty

To add a new label, go to the WordPress Dashboard and navigation to M.E. Calendar > Labels.

Add the name “Beginner” and the slug “beginner”. Then give it a color and select Add New Label.

Repeat this to create two more labels: Intermediate and Advanced.

Add Locations for Your Events

Once you add new locations for your events, you will be able to select to display the location on the event page. You can even show a google map automatically as well.

To add a new location, navigate to M.E. Calendar > Locations. Enter a name and slug and enter the address to the location (you don’t have to put the latitude and longitude). Then Click Add New Location.

That’s it.

For this tutorial, I’m going to add Houston as my location.

locations

Add Organizers for Your Events

When you add organizers to MEC you will be able to easily showcase these organizers on the events pages. To add a new organizer, navigate to M.E. Calendar > Organizers. Enter a name, slug, telephone number, email, the url of the organizers profile page (if they have one), and upload an image to serve as there portrait. Then click Add New Organizer.

For this tutorial, I’m going to add the same organizers featured in the Pottery Studio Layout Classes page:

instructors

Adding New Events

Now it’s time to start adding the events you want to offer. For this example, I’m going to offer events that correlate to the workshops and classes featured within the layout pack. I’m going to add 3 classes/events so that users can schedule a certain pottery class. And I’m going to offer 3 workshop events.

To add a new event, go to your WordPress dashboard and navigate to M.E. Calendar > Add Event.

Setting up a One-Time Workshop Event

To setup a one-time Workshop event, follow these steps:

  1. Add a title.
  2. Add an event description
  3. Add the start and end date and time of the event. Since it is a one time event that lasts only one day, put the same date in the start and end date input fields.
  4. You can add an hourly schedule for your workshop here. This is helpful to give an overview of what will happen during the day of the event.
  5. Select your event Location you entered already from the dropdown input box.
  6. Select one of the event organizers from the dropdown input box.
  7. Enter the cost for the event. This will be displayed at the top of your event page.
  8. In order for activate the booking form on this event page, you will need to add a ticket for the event. Enter the ticket cost, the ticket cost label, and the number of tickets available for purchase.
  9. Add any tags you have created for your events.
  10. Add any categories you may have. For example, you can enter a workshop category so that you can filter your events by this category if you want.
  11. Add an event color for your event.
  12. You can create labels for anything. Since I already created three labels to designate the level of difficulty, select a level of difficulty for you label.
  13. Set a featured image for the event. Make sure your image is big enough to span the full width of the browser for best looking results. A size of 1920×600 is ideal in my opinion. Also you will want to keep all of your event featured images the same size so that they look consistent when displaying your events in a list or grid format
  14. Save Your Event.

workshop

Now let’s check out what the event page looks like:

vessel alt

For this tutorial, I created a total of three workshop events.

Setting up a Recurring Weekly Class Event

To setup a recurring weekly class event, follow the same steps as you did to create a one-time Workshop event with the following differences:

Enable the Event Repeating option. Then select how you want the class to repeat. Since I want my class to repeat every Monday, I selected Certain Weekdays for my repeats option and then I selected Monday for my Week Days option.

events repeating

I also selected the event to end after 6 occurrences. This equates to 6 Mondays or six weeks.

ends repeat

Also, you will want to select class as your category instead of workshop.

class category

This is what the final result looks like for the class event:

workshop final

For this tutorial I created a total of three classes.

Building Custom Shortcodes to Display Your Event Calendars

Now that we have our single event pages created, we can build a page to showcase all of our events. Fortunately, MEC gives you a ton of options for displaying your events. I’m not kidding. You can display event calendars pretty much anyway you want using their shortcode generator. You can access the shortcode generator by navigating to M.E. Calendar > Shortcodes.

The shortcode generator allows you to choose from 16 different skins.

skins

And each skin comes with it’s own using style options:

styles

And you can filter what events you want displayed under Filter Options.

filter options

You can also choose to enable a search form to be displayed on the top of your calendar which allows users to filter the calendar themselves using the form.

search form

Once you have your shortcode completed, you simply need to copy the shortcode in the shortcode box and then paste it on your page.

shortcode code

For this tutorial, I’m going to create two custom shortcodes to display my calendar in a slider view and in a minimal grid view.

Slider View Shortcode

To build the slider view, add a new shortcode and update the following:

Skin: Slider View
Style: Type 3

slide view

Save shortcode.

Grid Skin Shortcode

To build the grid shortcode, add a new shortcode and update the following:

Skin: Grid View
Style: Minimal
Show Search Form: Disabled

minimal grid

Save shortcode.

Now that we have both of our shortcodes created. Let’s create the event page to showcase our events.

Building a Custom Event Page

For the Event Page, I’m going to use the Pottery Studio Classes Page layout. Create a new page, give it the Title “Classes and Workshops” and deploy the visual builder. Then upload the Potter Studio Classes layout from the library.

classes layout

Add a fullwidth section under the first section with a fullwidth code module. Then add the Slider view shortcode we created previously to the content box under the Content tab.

slider view

And then give it a custom margin of -20px bottom under the design tab.

Save settings.

Delete the original top section that served as the header of the page so that the slider is now the top section.

In the second section, there are three rows. Click to edit the text module in the second row. In the content box, delete the dummy text and add the shortcode for the Grid Skin shortcode created previously.

add grid

Delete the row directly underneath that row. And then change the background of that section to white.

Now you have a slider that showcases your workshop and class events as well as a grid layout of the same events. Users can click on any of this events and they will be taken to the single event page where they can see event information and register for the event.

event page final

Managing Your Bookings

MEC allows you to manage all of your bookings from within the WordPress dashboard. You can even add bookings manually, which is a nice feature.

manage booking

Final Thoughts

I can’t help but feel like I’m cutting this tutorial short simply because there is much more the Modern Events Calendar plugin has to offer. The shortcode generator can create so many other options. Let me show you what the full calendar view looks like:

full calendar

And this is what a carousel view looks like:

carousel view

And that is only breaking the surface of all the different options available for displaying your events.

All in all, once you get all of the elements in place, adding and displaying events is an extremely easy process. And with the added bonus of being able to embed shortcodes within the Divi Builder, there really is no reason you can’t have a gorgeous event scheduling option for your website.

I look forward to hearing from you in the comments.

Cheers!

40 Comments

  1. A long waited tutorial.. I find it hard to find a booking plugin that sweet my needs. Wish there was a demo so we can test the final result of this tutorial before implementing it :/

    • B.J. Keeton

      I have had that issue with a lot of Events plugins, too. It’s hard to find them that offer exactly what you need, and the refund policies and trials are all over the place.

  2. Jason, this is amazing. I literally just needed something like this for a greenhouse/farm market that has lots of events. I’m going to do this, hopefully on Saturday! I’ll share the link with you when I’m done. Thank you!

    • Jason Champagne

      That’s great Nelson. Let us know how it goes.

  3. Thanks Jason, very nice tutorial. Do you have a link to share to see it ?

  4. I haven’t tried this plugin yet. It looks awesome. Thanks!

  5. I’ve been using Modern Events Calendar since it was new. I think it’s a great plugin; I just wish there was a developer license available, so I don’t have to keep buying single licesnse from Code Canyon over and over again.

    • Jason Champagne

      I wasn’t aware. I’m sure they will offer one at some point.

      • Envato will never offer this unfortunately. They make way too much money offering only single licences.

  6. I seem to have collected about 6 event plugins but haven’t yet found one that could do what I want. We teach mediation using online video classes using zoom. In our classes different students take on different roles. One needs to sign up to be the mediator, one as party 1, one as party 2 and others (up to 20) as observers. There are scripts to guide the parties in their role play.

    Its a bit like booking different kinds of seats at a theatre – only there is one “Royal Box” seat for the Mediator, two “Dress Circle” seats and twenty places in the stalls. I’d prefer for students to be able to see when and who the various roles are filled, as they prefer to vary who they work with, and it needs to work on local time as I have 5 time zones to work in during our summer.

    If this or any other plugin can do this I’d really like to hear as it quite difficult and error prone doing this on a shared google spreadsheet.

    • Jason Champagne

      Thanks for reaching out, Paul. I’m still not sure what it is you are lacking from the plugins you’ve tried. Can you pinpoint the functionality you want for me?

  7. Thanks for the write-up really cool stuff!

  8. You, Jason, are a mindreader! I was just browsing the web up and down looking for a better event plugin for a new project coming up… I will give this a try as soon as my client gives me the “go” 🙂

  9. Explain how to do it with free plugins. in elegant themes always focus on payment Plugins

    • Jason Champagne

      Elkin,

      I understand your pain. I actually always start researching free solutions first. But sometimes these free versions are way too limiting, especially when it comes to design. So I try to find a balance. I will definitely try to incorporate more free plugins though when I can.

      Thank for reaching out.

    • +1

  10. Could I use the shortcode to add event listings to a module in a two column section on a homepage?

    • Jason Champagne

      Yes. you can add these shortcodes basically anywhere you want.

  11. I’ve had so much trouble with CodeCanyon in the past that I don’t trust in the ability of the platform to keep good quality plugins that don’t break your code, offer what they say, give a warantee, have a decent customer service.
    I’ve bought 3 plugins in the past from Codecanyon (one of them was a calender appointment plugin) and they just gave me trouble…. not solutions.

    • Unfortunately that is often the case there. Better would be to give examples with free plugin options instead!

  12. Thanks Jason, for this tutorial. I searched for a long time before I found something I could use. I’ve used a combination of Events Calendar Pro and Event Tickets Plus to create a paid for weekly events schedule. I’ve also managed to get an export from the installation to a CSV file so that each time there is a new session, the tutor can download the file before the class and take a register to check attendance. There is also the option for QR codes within this system. It’s difficult to compare set ups but the choice you have made here looks to be a great value one as it looks very good value (much cheaper than the combination I’ve chosen). However, I think the value could be short term as I do question buying through Envato as quite often I find a great plugin, install it for a customer, take great pains to configure it and make it work for their needs, only to find that after a year or so the plugin author has moved onto something else and the plugin is no longer being developed. I’m not saying that this will happen with the plugin you have chosen but the longer term option and more expensive for the customer (but less time for the developer not having to start all over again) is to choose a company that’s whole reason for existing is to deliver and sell their products. I think I’ve found that with Tribe Events Calendar but will certainly take a good look at this option. I just hope the author continues to nuture and develop the plugin alongside the core WordPress progression as it certainly looks very promising.

  13. Where is that mentioned Pottery Layout Pack – can’t find a link to the layouts and the Images like usual.
    Thanks

    • Jason Champagne

      Divi’s layout packs are now stored within the Divi Builder. They will show up under the premade layouts tab when you select the “add from library” button.

  14. I can’t get the Pottery pack to install. What’s the deal?

  15. Thanks a ton.. i badly needed this for one of my clients.. is there any way i can integrate this with mailchimp to send an RSVP Mail to remind customers about the event

    • Jason Champagne

      Yes you can. Under the MEC settings you can enable mailchimp.

  16. Thanks for this great tutorial.
    I’m having trouble displaying the google map, have tried everything i can think of but its just not showing up.
    Did you encounter any difficulties with this and if so whats the solution please?
    Thanks.

  17. Hi, I have deployed the minimal grid event module exactly according to this tutorial (as well as checking on your Youtube tut, but despite updating etc. after insertion of the shortcode inside the page section I get the message that ‘No Event Found’!
    Please help me out here 😉 thx

    • Jason Champagne

      Assuming you have already added some events, this may be related to the filters you are using when building out your custom shortcodes. I would try creating a new event calendar shortcode without any filters and see if that solves the problem.

  18. Is there any way to switch on the divi builder functionality within the Event Description content box? I love this plugin (thanks for the recommendation) but I also want to add a video and gallery to the same page. And ongoing, I want my customer to be able to easily update it.

    • Jason Champagne

      Unfortunately, no. You can’t use the builder within that content box because it is a custom post template that pulls a lot of information into one place.

  19. Hi Jason! Thanks for this great tutorial.
    then read this I bought and installed mec and everything is very nice. But I have a problem .. maybe with the latest update of Divi are no longer compatible? Since I updated Divi, something seems to have changed.
    My problem is that the event category pages are the same as the post category pages. Although I set the category skin in “mansory grid” or another values.
    Even the pages of my individual events are not shown as in your tutorial but as a post with the same layout. I did various tests and I was able to understand that if I put the file “single-mec-events.php” in the root folder of my diver-child, I can see the single event correctly with the right and beautiful layout. Without that file my event seems like a post and it’s really bad. So I tried to insert the other files of the mec “archive-me-events” and “taxonomy-mec-category” to see the layout of the categories take the aspect of mec and not from the divi layout of post. But this does not work. Can you help me or understand what happened between divi and mec?

  20. Bought the plugin and went through the whole tutorial. I wanted to use it for a voluntary centre. that organise activities free of charge.
    Seems you can only book an acitvity when there are costs connected.
    No way to fix this in an easy way according to the support staff. I need to hire somebody to write css. So big disappointment here…

  21. Nice Work! Where can i download the Pottery Studio Classes page layout?

  22. Hi Jason!
    I just bought the plugin, installed the pottery layout, had a look at your youtube tutorial and other tutorials, but one (for me important – because fit’s my usual webPage style) feature I could not realise – it’s the full width size of the picture on the “single event site” (which is shown in the example picture on top of this page).
    How can I realise?
    Can I setup in Divi, or do I have to add some CSS-code?

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest