How to Create a Custom Ticket Theme

A ticket theme is a collection of template files that determine the appearance of a FooEvents ticket email. In this guide, we will show you how to create your own custom ticket theme and implement your unique design. Let’s get started!

If you’re planning an event and using FooEvents, you’re probably already familiar with FooEvents Ticket Themes. They are essentially a collection of template files that render the HTML for a ticket email. There are many ticket themes to choose from and you can personalize the logo, header image, and colors when setting up your event. These options make it easy to align the ticket design with your brand, however, if you prefer to use your own custom ticket theme design, that’s easy too.

In this guide, we will cover:

1. Understanding How Ticket Themes Work
2. Creating a Custom Ticket Theme
3. Customizing Your Ticket Theme
4. Testing Your Custom Ticket Theme
5. Setting Your Custom Ticket Theme for Events
6. Keeping Your Custom Ticket Theme Updated

Understanding How Ticket Themes Work #

When you first install the main FooEvents for WooCommerce plugin, it will create a folder in your WordPress uploads directory called fooevents/themes. A copy of the FooEvents Default Ticket Theme is then automatically added to this folder: wp-content/uploads/fooevents/themes/default_ticket_theme. The location of this folder ensures that any customizations to the ticket themes will not be overwritten when the FooEvents for WooCommerce plugin updates. You can also download additional ticket themes from our Ticket Theme Gallery and upload them to your site by going to FooEvents > Ticket Themes > Add New in your WordPress admin area.

When configuring an event, the ticket theme dropdown options will display all ticket themes currently uploaded to the themes folder. The selected ticket theme will then be used when generating the HTML ticket that your customer receives.

Creating a Custom Ticket Theme #

To create a ticket theme, you will need to create a new ticket theme template and upload it to your website. When creating your custom ticket theme, we recommend modifying an existing ticket theme and making it your own. The Default Ticket Theme or our Starter Theme are good places to start as they include all essential functions to ensure your tickets reflect the correct ticket, event, and attendee details.

Please follow these steps to set up your custom ticket theme templates:

1. Download the FooEvents Default Ticket Theme or FooEvents Ticket Starter Theme from the FooEvents Ticket Theme Gallery.
2. Extract the ticket theme ZIP file that you downloaded on your desktop.
3. Rename this folder to something else. Use one word or words separated by underscores only, no spaces! E.g., my_custom_theme
4. Open the folder and rename the “name” field in the config.json to match the folder name. Use one word or words separated by spaces only. E.g., My Custom Theme
5. Save the changes. Your new ticket theme is now ready to be customized.

Customizing Your Ticket Theme #

💡A basic understanding of HTML code is needed to customize ticket theme templates. If you are not comfortable working with HTML, we have partnered with Codeable, who we highly recommend for these types of projects.

Next, you can begin customizing your ticket theme. Each ticket theme includes three template files:

• header.php: Contains the logo, header image, general event details such as the time, location, and “Add to Calendar” link.
• ticket.php: Contains the barcode and specific attendee details such as the name, custom fields, and seats. The code in ticket.php will be repeated for each ticket if the customer purchased multiple tickets for the same event in one transaction.
• footer.php: Contains the contact information.

You can either modify the existing HTML and CSS to make the theme your own, or you can implement a completely new HTML design. For the latter, we recommend the Starter Theme as a starting point. Here are a few things to consider when customizing the HTML and CSS:

• You can either upload your images to the images folder in the theme folder or host them somewhere else. In both cases, make sure that you are using absolute URLs and NOT relative URLS to reference the images; otherwise, they will not display when the HTML is sent as a ticket email.
• If you’ve uploaded your images to the images folder, make sure that the src attribute starts with the following code: <?php echo $themePacksURL.'theme/images/'; ?>
• You can change the image called preview.jpg to something that represents your theme.

Testing Your Custom Ticket Theme #

Now that your theme has a new name and you have implemented your new HTML design, it’s time to upload it to WordPress:

1. Use an FTP client such as FileZilla to access the files on your server.
2. Browse to the directory /wp-content/uploads/fooevents/themes/
3. Upload the complete ticket theme folder to the FooEvents themes folder. E.g, /wp-content/uploads/fooevents/themes/my_custom_theme

Next, you will need to test the ticket theme to make sure it works as intended:

1. Log in to your WordPress admin area and go to Tickets > Ticket Themes.
2. Look for the new ticket theme that you’ve created and click on the image thumbnail.
3. Use the Send Ticket Preview option to send a test ticket email to your email address so that you can see an example of how your tickets will look using your theme.
4. If you are not happy with the result, go back to modifying the HTML and CSS and re-upload the modified files to your server. Continue this process until you are 100% happy with your new custom ticket theme.

Setting Your Custom Ticket Theme for Events #

Once you are 100% happy with your new ticket theme, it’s time to apply your shiny new theme to an event. Go to Products in WordPress, edit your event, and head over to the Ticket Settings tab. Here, you can select your custom theme from the HTML ticket theme dropdown menu for both HTML. If you have the FooEvents PDF Tickets plugin installed, you can also set the ticket theme for the PDF Ticket. Don’t forget to click Update to save your changes. Now, your event tickets will have a fresh, new look! Be sure to test thoroughly before you start to sell tickets to the public.

Keeping Your Custom Ticket Theme Updated #

From time to time, we might release updates to our ticket themes, adding new features or improving functionality. To keep your custom theme up-to-date, simply download the latest version, make your custom changes, and upload it again. It’s a good practice to keep your theme files backed up, especially if you’ve made extensive customizations.

Conclusion

Customizing the a ticket theme is a fantastic way to add a personal touch to your event tickets. It’s not just about aesthetics; it’s about creating a cohesive brand experience for your attendees. By following these steps, you’ll have a set of tickets that not only look great but also make your event stand out. So, go ahead and get creative—your attendees will notice the effort you put into making their experience special.

💡For more detailed instructions on how to use and modify ticket themes, please refer to this help guide.