Get Creative with FooEvents Ticket Themes – Part 2

Do you want to customize the tickets that your customers receive beyond the standard options? In Get Creative with FooEvents Ticket Themes – Part 1 we explained what FooEvents Ticket Themes are and how to use them. In this post we will show you how you can access and modify the source files for the HTML tickets directly and make the tickets look exactly the way you want! If you’d like to learn how to work with PDF Ticket Themes we recommend that you first read the steps below and then read this article for additional information.

Here is a step-by-step guide that shows how to achieve this:

PLEASE NOTE: HTML and CSS skills are required!

Step 1: Download a Ticket Theme

Download the FooEvents Ticket Starter Theme or one of our many free premium ticket themes

Step 2: Make your Changes

1. Extract the ticket theme ZIP file that you downloaded
2. You can rename this folder to something else. Use one word or words separated by underscores only, no spaces!
3. Open the files “header.php”, “ticket.php” and “footer.php” in your favourite text editor:

• The file “header.php” contains the logo, header image, general event details such as the time, location and “Add to Calendar” link
• The file “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
• The file “footer.php” contains the contact information

4. Customize the HTML and CSS:

• • If you want to change the colours in a premium theme you will have to search for every occurrence of the colour in the inline CSS styles
  • 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 your are using absolute URLs to reference the images
  • 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/'; ?>

• If you’re using images in the “images” folder, remember to change “theme_name” to the same word that you’ve named your theme folder in Step 2
• You can change the image called “preview.jpg” to something that represents your theme

Step 3: Upload Modified Files to Server

1. Use an FTP client such as Filezilla to access the files on your server
2. Browse to the directory “your-wordpress-install/wp-content/uploads/fooevents/themes/”
3. Upload the complete themes folder here

Step 4: Test your Theme

1. Login to your WordPress Admin Area and go to Tickets -> Ticket Themes
2. Look for the new ticket theme that you’ve created
3. Click on the image
4. Send a preview to your email address to see an example of how your tickets will look if they use this theme
5. If you are not happy with the result, go back to modifying the HTML and CSS and re-upload the files to your server

Step 5: Set your Theme

You can apply your new ticket theme to your event once you are happy with it.

1. Go to ‘Products’ in your WordPress Admin Area
2. Edit your event
3. Click on the “Ticket Settings” tab
4. Select your theme in the “HTML ticket theme” dropdown list
5. Update your event

The tickets that your customers receive for this event in the future will now use your new template. You can also test your ticket theme again by resending an existing ticket to your own email address.