Events Calendar Plugin Tutorial - Build an Events Based WordPress Website

Building a Fictional Event Website: Real World Entertainment

Introduction to the Project

• The tutorial focuses on creating a fictional website called "Real World Entertainment," designed for showcasing upcoming events globally.

• Users can view event details such as date, venue, and organizer information, and purchase tickets via PayPal or Stripe.

Plugin Overview

• The site will utilize the Events Calendar plugin, known for its effectiveness in managing events on WordPress.

• The tutorial will start with the free version of the plugin, with an option to explore paid features later.

Site Structure and Features

• The homepage will feature a main banner, sections for upcoming events, musical shows, sports events, past events, and footer content.

• Additional pages include a calendar page for viewing events in different formats and a simple contact page with a form.

Getting Started with Setup

• The presenter has installed the Nexta theme by Posey Myth due to its minimalistic design suitable for an event website.

• Although not widely popular (200 active installations), it offers essential functionality without being overly complex.

Customization Steps

• Two pages have been created: Home and Contact. A primary menu has been set up linking only to the contact page since the logo will link back to home.

• Site title changed to "Real World Entertainment" with tagline emphasizing live global events; important for SEO if it's a real site.

Logo Addition Process

How to Set Up Your Website and Install Plugins

Finalizing Website Appearance

• The speaker demonstrates how to crop an image for the website, emphasizing the simplicity of the process before publishing.

• Recommendations are made regarding theme selection; users can choose any theme but should ensure essential menu items like "Contact" are included. Adding a logo is also suggested for a functional header.

Installing Necessary Plugins

• Attention is drawn to messages prompting the installation of the Nexter extension, which is deemed unnecessary for this course but useful for other projects.

• Users are advised to ignore prompts for additional plugins such as Elementor, focusing instead on essential installations.

Key Plugins Overview

• The primary plugin discussed is the Events Calendar by Events Calendar, with three additional add-ons: Event Tickets and Registration, Event Single Page Templates, and Events Shortcodes.

• The Event Tickets and Registration add-on allows ticket creation for events, enhancing functionality significantly.

• The Event Single Page Templates add-on provides alternative templates for displaying individual events.

Configuring Plugin Settings

• After installing the Events Calendar plugin, users are directed to access settings via the "Events" link. General settings include options like event display limits and enabling comments.

• Important settings include configuring event URL slugs; by default, it adds "/event" to links where all created events will be displayed.

Additional Configuration Options

• Other settings allow customization of currency symbols based on user location (e.g., pounds or euros), Google Maps integration options, and default zoom levels.

• Display options suggest using Tribe Event Styles over Skeleton Styles unless custom CSS is being applied. Users can enable various event views (list/month/day).

Creating Events in a Calendar Plugin

Adding the First Event: Comic Con San Diego 2022

• The process begins by adding a new event titled "Comic Con San Diego 2022," with a description pasted into the text field.

• An event category is created, labeled "Comics," to classify this event appropriately.

• The start and end dates for the event are set from August 26th to August 29th, along with venue details including name and address.

• Organizer information is entered, featuring Dick Jones as the main contact, including his email but no website.

• A featured image is uploaded for the event, and additional options like hiding from listings or marking it as a featured event are discussed.

Publishing and Viewing the Event

• After setting all details, the event is published successfully.

• The published link displays all relevant information such as dates, images, organizer details, and Google Maps link.

• The newly created event appears highlighted in blue on the events page due to its featured status.

Creating Additional Events

Adding Another Event: Sting Concert

• A second event for "Sting" is initiated; it's scheduled for September 9th as an all-day affair.

• Venue selection allows choosing previously created venues or adding a new one; here, "The Musical Hall" is added with an address in Bangkok.

• Dick Jones is again listed as the organizer for this concert with updated website links provided.

Finalizing Details

• A new category called "Music" is created for this concert before publishing it.

• Upon viewing the calendar after publication, both events (Comic Con and Sting Concert) are visible alongside other planned events.

Summary of Additional Events Created

Setting Up Ticket Sales for Events

Overview of Event Ticketing Setup

• The current functionality allows users to view event details, but the goal is to enable ticket purchasing.

• To facilitate ticket sales, payment gateways such as Stripe and PayPal need to be configured.

Configuring Ticket Settings

• General ticket settings allow attachment of tickets specifically to events; pages are not included in this setup.

• A threshold can be set for displaying remaining tickets, with a preference for showing when fewer than 10 tickets are left.

Payment Gateway Integration

• The main focus shifts to enabling payment options by connecting with Stripe and PayPal.

• Test mode can be enabled for both payment gateways to ensure functionality before going live.

Connecting with PayPal

• Steps include logging into PayPal and allowing the plugin to connect automatically.

• Webhooks must be set up for handling various payment statuses like completed or denied payments.

Connecting with Stripe

• Similar steps are followed for Stripe, including selecting events that the webhook will listen to.

• The latest API version should be used when adding endpoints in Stripe's developer settings.

Testing Payments Before Going Live

• Emphasis on testing payments through both gateways before finalizing connections ensures reliability.

Setting Up Payment Options

Configuring Payment Settings

• The video discusses various payment configuration options, including currency code and position on the checkout page.

• Confirmation emails can be set up with a default email address for notifications regarding ticket purchases.

• The system indicates that Stripe is enabled for checkout while PayPal remains disabled due to the active test mode.

Testing Payments with Stripe

• The presenter opts to test payments using Stripe only, despite having the option to connect and test PayPal as well.

• An event (Comic Con San Diego) is selected for adding tickets, demonstrating how to create new ticket types.

Creating Ticket Types

Adding Standard and VIP Tickets

• A standard ticket type is created with a description of "basic perks," a sale start date, an end date, a price of $19.99, and a capacity of 100 tickets.

• A second ticket type (VIP) is added with all perks included, priced at $199.99 and limited to 50 available tickets.

Finalizing Event Setup

• After creating both ticket types, the event is updated to reflect these changes in the system.

• The presenter shows how attendees can view available tickets (standard and VIP).

Testing Ticket Purchases

Simulating Ticket Purchase Process

• The presenter logs out as an admin to simulate purchasing a ticket as a regular user.

• Selecting the standard ticket leads to a purchase page where users can enter their details without needing to log in.

Using Test Credit Card Information

• For testing payments through Stripe, specific credit card numbers are provided along with valid expiration dates and CVC codes.

• After entering payment information, the purchase process continues on a separate order confirmation page.

Reviewing Purchase Confirmation

Checking Attendee Records

• Upon returning to the backend website's events section, it shows one attendee has purchased tickets under the name Alexander Oni.

How to Test Ticket Purchases with Stripe

Testing Ticket Purchase Functionality

• The speaker demonstrates the ticket purchase process, highlighting the security code and the option to check in tickets. They show how results appear on the backend after a ticket is purchased.

• A confirmation message is received in the user's Gmail account, indicating successful ticket purchase. The email includes essential details such as ticket type, number, and organizer's name.

• The admin can view all purchases made on their website, emphasizing the straightforward nature of testing payments with Stripe.

• After testing, it’s crucial to disable test mode in settings under payments to ensure real transactions can be processed correctly.

• The speaker notes that main functionality for users is complete; they can search for events and buy tickets. However, improvements are needed for website presentation.

Enhancing Website Presentation

• The current homepage lacks content, making it difficult for users to find events. Future lessons will focus on improving aesthetics and usability.

• The speaker mentions having created ten events across various categories (tech, music, sports, comics), including past events to demonstrate how to display them effectively.

• Past events are highlighted as an important feature; examples include Comic Con Bangkok and Jazz Festival Cape Town. This section aims to showcase previously held events.

Configuring Homepage Settings

• To set up the homepage properly, adjustments are made in settings where the homepage is linked to a pre-created page from installing the Events Calendar plugin.

• Upon installation of the plugin, three pages are automatically generated: order completed, tickets checkout, and main events page—essential for event management.

Utilizing Shortcodes for Event Display

• Before adding events to the homepage, it's important to utilize shortcode settings from the Events Calendar plugin which allows customization of event displays.

• Various attributes within shortcodes can be modified (e.g., template views), but since Gutenberg page builder is used here, direct shortcode copying isn't necessary.

Adding Content and Events

• The speaker explains how different styles can be applied using shortcodes while preparing content for display on their site’s homepage.

• Emphasis is placed on modifying shortcode values according to desired templates or styles before proceeding with editing pages directly through Gutenberg blocks.

• As part of enhancing user experience on their site’s homepage, a welcoming title will be added along with introductory text before displaying upcoming events.

How to Properly Display Events on Your Website

Importance of Structuring Event Shortcodes

• It is crucial to place event shortcodes within a row or column to prevent the events from stretching full width, which can disrupt the website's layout.

• Demonstration of adding an event shortcode block inside a one-column layout using Gutenberg for better presentation.

Customizing Event Display Settings

• Users can modify shortcode values such as event categories, template styles, and limits on the number of displayed events (e.g., limiting to five).

• Options are available for displaying events within specific date ranges and enabling social share buttons.

Enhancing Page Presentation

• Adding headings like "Upcoming Events" improves clarity and organization on the page.

• The default setting for event display shows only upcoming events, ensuring that users see relevant information.

Creating Sections for Different Event Categories

• A separate section titled "Musical Shows" is created by adding another heading and configuring an event shortcode block specifically for music events.

• Style options are subjective; while style two is demonstrated, personal preference may lean towards style one due to its presentability.

Finalizing Additional Event Categories

• A new section for "Sports Events" is added following the same process as previous sections.

• The addition of a "Past Events" section allows users to view previously held events, enhancing user engagement with historical data.

Experimenting with Layout Styles

• Various styles can be tested; however, some may not display featured images effectively (e.g., style three).

• Switching back to more visually appealing styles (like style one or timeline layouts), ensures better aesthetics in presenting past events.

Summary of Homepage Structure

• The homepage now includes distinct sections: Upcoming Events, Musical Shows, Sports Events, and Past Events.

Creating a Timeline Page

Steps to Create a Timeline

• A new page titled "Timeline" is created using the event shortcode block, selecting the timeline layout with 10 events and enabling share buttons.

• After publishing, the timeline page is viewed, showcasing a well-organized display of upcoming events.

Adding Links to Main Menu

• The process begins by confirming the creation of the timeline page; if an events page isn't visible, a custom link can be added directly.

• Accessing the menu settings allows for adding both the timeline and a custom link for events or calendar.

• The menu is updated to include "Calendar," which links to an events display in calendar format alongside the timeline and contact pages.

Building a Contact Page with WP Forms

Installing WP Forms Plugin

• The tutorial introduces WP Forms as an ideal plugin for creating WordPress forms; users are encouraged to download, install, and activate it.

Creating a Contact Form

• Users start by naming their form "Contact Form" and selecting a simple contact form template that includes standard fields like name, email, and message.

• Additional fields can be added easily; for instance, a phone number field can be included by dragging it into place above the message field.

Customizing Form Fields

• Preferences for form fields are discussed; opting for a single name field instead of separate first and last names simplifies user input.

Configuring Notifications and Confirmations

• Settings allow modification of notification preferences (e.g., where notifications are sent), subject lines, sender details, and confirmation messages after form submission.

Finalizing Form Integration

How to Create a Contact Form and Modify the Footer

Creating a Simple Contact Form

• The process begins by navigating to the "Browse All" section and typing "form" in the search box, where you can select WP Forms.

• After choosing the contact form, it is updated and displayed on the page, providing a simple interface for users to fill out.

• Suggestions are made to enhance user experience by adding introductory text encouraging visitors to fill out the form.

Modifying the Footer

• The current footer consists only of copyright text; plans are discussed to transform it into a more functional design with three columns.

• A proposed footer layout includes two menus (site links and partner site links) along with a column dedicated to social media links.

Preparing for Footer Design

• Viewers are given an option: continue learning about footer design or skip ahead to discussions on paid plugins.

• Instructions include creating additional pages such as Privacy Policy, Refunds, and Terms & Conditions for menu inclusion in the footer.

Setting Up Menus and Plugins

• Two menus have been created: one for site links (including newly created pages), and another for partner sites with custom links.

• Viewers are instructed to install two plugins: Next Extension (for header/footer templates) and WordPress Gutenberg Blocks (for enhanced block options).

Utilizing Additional Resources

• A YouTube tutorial covering various blocks available in both free and paid versions of Gutenberg add-ons is recommended for further learning.

• Encouragement is given to explore these resources before proceeding with building out the footer.

Building Out the Footer Template

• To start building the footer, viewers navigate to Nextup Builder, create a new template titled "Footer," selecting normal display rules for all website pages.

• The need for three columns is emphasized; however, since only four-column layouts are available, one column will be deleted after selection.

Customizing Footer Appearance

• Background color customization is discussed; viewers learn how to select colors within Gutenberg's block settings despite existing challenges in usability.

• A specific dark blue color choice is made for aesthetic appeal before publishing changes.

Finalizing Footer Display

Creating a Footer Menu in Gutenberg

Adding the Partners Menu

• The process begins by selecting the "Futa" option and editing it to add a new footer menu. A heading titled "Partners" is created, and its text color is changed to white.

Configuring Site Links

• In the second column, another heading called "Site Links" is added with white text. The navigation block is used again to select the desired menu for site links.

Social Media Section Setup

• A third column is designated for social media, labeled simply as "Social Media." The text color is also set to white, preparing for social media icons.

Adding Social Media Icons

• The TP Social Icon plugin allows adding various social networks. Initially, Facebook, YouTube, and Twitter are included; Instagram can be added easily by clicking on "Add Network."

Customizing Icon Appearance

• Each icon's appearance can be customized (e.g., background color). Although not matching Instagram's actual colors, black was chosen for demonstration purposes.

Finalizing Footer Layout

Adjusting Icon Size and Alignment

• After testing different sizes for social media icons, a size of 15 pixels was deemed appropriate. Additionally, alignment adjustments were made to align icons leftward with their title.

Refreshing Changes

• Upon refreshing the page after updates, the layout appears more cohesive with all elements aligned properly.

Header Configuration Overview

Existing Header Satisfaction

• The speaker expresses satisfaction with the current header layout featuring a two-column design with a logo on the left and main menu on the right.

Modifying or Creating New Headers

• For those wishing to modify or create headers, instructions include accessing builder options where various header types (normal sticky or transparent headers) can be selected based on preference.

Event Single Page Templates Plugin Introduction

Purpose of Event Template Plugin

Event Plugin Installation and Issues

Overview of Plugin Functionality

• The plugin is designed to display events with features such as a featured image, title, date, time, and description embedded on the image.

• Additional sidebar elements include countdown details, venue information, organizer details, and more content related to the event.

Current Issues with Theme Compatibility

• There are compatibility issues between the plugin and the Nexta theme; users may encounter fatal error messages when accessing certain features.

• The speaker notes that this issue arose recently after previously functioning correctly, suggesting a potential update conflict between the theme and the events template plugin.

Options for Users Facing Issues

• Users who dislike the current event display style can deactivate or remove the plugin. Alternatively, they might consider switching to a different theme if they prefer this style.

• The speaker expresses regret over these unforeseen issues but emphasizes transparency about recommending the plugin initially.

Exploring Pro Version Features

Advantages of Upgrading to Pro Version

• The pro version offers enhanced features compared to the free version, including premium support and options for creating recurring events.

• Users gain access to various calendar views (week view, photo view, map view), calendar shortcodes, custom event fields, Elementor integration for website building, additional widgets/blocks for calendars.

Enhanced Event Management Capabilities

• In settings for managing events in the pro version, users can modify how recurring events are displayed on their site.

• The pro version allows viewing events in a more efficient manner through an improved backend interface compared to just list view available in free version.

Display Options Available in Pro Version

• With paid access, users can display events in multiple formats: day view, map view, photo view alongside traditional list/month/week views.

• Demonstrations of summary views and gallery-style displays highlight increased flexibility in presenting event information visually.

Venue and Organizer Pages in Pro Version

Separate Pages for Venues and Organizers

• Each venue now has its own dedicated page where detailed information can be presented; similar functionality exists for organizers as well.

• For example: individual pages provide contact details (phone number/email), along with listings of all associated events organized by specific individuals or venues.

Recurring Events Feature

Creating Recurring Events

Event Series Functionality in Paid Plugin

Overview of Event Creation Features

• The paid version of the plugin allows users to create recurring events, such as a comic con event that can be scheduled weekly or bi-weekly on specific days and times.

• Users can set an end date for the series of events, providing flexibility in managing multiple occurrences.

Shortcodes and Additional Functionalities

• The paid version includes various shortcodes like mini calendar, events list featured view, and event countdown features that enhance user experience.

• Users are encouraged to explore the Events Calendar website for a comprehensive list of shortcodes available with the paid version.

Key Features Highlighted

• Other functionalities include location search and filter bar support, which are considered strong features of the paid plugin.

Conclusion and Call to Action

Wrap-Up of Tutorial

• The tutorial concludes with a summary of building an events website using the Events Calendar plugin, encouraging viewers to engage with content by liking and sharing.

Engagement Encouragement

• Viewers are invited to subscribe for future tutorials and leave comments or questions for further interaction.