How To Create A Custom Halloween Ticket Theme

Halloween is around the corner, so in this article I am going to show you how to create a Custom Halloween Ticket Theme and make it our own. By modifying a simple template and CSS, we will transform the Pavilion Ticket Theme into a spooky, Halloween-inspired design that’s perfect for your next Halloween event.

A FooEvents Ticket Theme is a set of template files used to render ticket emails in FooEvents. When setting up an event with FooEvents, you can set which ticket theme to use for that event. The ticket emails will then be generated using the specified ticket theme. In addition, ticket themes can also be used to generate PDF tickets and in-person tickets using FooEvents POS.

What We’ll Cover

We are going to download and rename a free FooEvents Ticket theme.
Next, we are going to add our logo and header graphic to the images folder and change the logo and header image paths to point to these images.
We will then upload the ticket theme and send a test ticket to see what colors and styling need to change to match our design.
Then, in incremental steps, we will update the CSS and HTML to use the same colors as our design, while testing regularly.

1) Getting Started

To keep it simple, I’ve modeled the Halloween design on the Thème du billet pour le pavillon. This makes it easy to modify as most of the changes are simple color changes. Download the free Pavilion Ticket Theme from its product page and unzip it on your computer.

Tip: Our ticket theme catalog includes many base designs that incorporate different structural layouts. Find a base theme that is similar to your design structurally and use it as a starting point.

2) Rename the Ticket Theme

Once downloaded, rename the unzipped folder (pavilion_ticket_theme) to halloween_ticket_theme. Keep it lowercase and use underscores—no spaces. This naming approach is how FooEvents expects custom themes to be organized.

Ouvrir le halloween_ticket_theme folder and edit the readme.txt et config.json files.

En readme.txt, change Thème du billet pour le pavillon à Thème du billet d'Halloween. You can also update the description, author, etc.

Next, update the name value in config.json file, change: “name”: “Pavilion Ticket Theme” à “name”: “Halloween Ticket Theme”.

You can also set which formats this ticket theme can be used in (HTML, PDF, and POS). I recommend disabling PDF support (“supports-pdf: false”) so that we can focus on the HTML email theme. You can use a separate print-friendly PDF theme, or, if you can leave supports-pdf set to vrai, be sure to test the rendering of the PDF ticket thoroughly.

Next, replace aperçu.jpg with your own thumbnail so you can recognize your theme instantly in the Ticket Themes screen.

3) Update the logo and header graphic

By default, the original Pavilion Ticket Theme allows you to set the logo and header graphic in Product > Ticket Settings. Typically you would use those options to set the logo and header graphic; however, for the Halloween ticket theme, we are going to hardcode paths to the logo and header graphic.

The reason for this is that the logo and graphic are very distinct to the design of this ticket theme—you wouldn’t really want to use them print-friendly PDF version of the ticket. Hardcoding the logo and header graphic in the ticket theme will allow us to specify a different logo and header image for the PDF and POS versions using the Ticket Settings form.

First, place your logo and header image in the images folder:

halloween_ticket_theme/images/logo.jpg
halloween_ticket_theme/images/header_img.jpg

Ouvrir le ticket.php file and find the following code toward the top of the file:

<!-- LOGO -->
<?php if ( ! empty( $ticket['WooCommerceEventsTicketLogo'] ) ) : ?>
<p>
<img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketLogo'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin-bottom:20px;"/>
</p>
<?php endif; ?>

<!-- GRAPHIC -->
<?php if ( ! empty( $ticket['WooCommerceEventsTicketHeaderImage'] ) ) : ?>
<img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketHeaderImage'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin:0 auto; padding:0; display: block; vertical-align: bottom"/>
<?php endif; ?>

The two PHP “if” statements that wrap the images check if the logo and header image settings are enabled. We will not be using those settings, so you can remove the checks.

Next, replace the image paths with the following:

Logo path:

<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/logo.jpg

Header image path:

<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/header_img.jpg

Your updated code should look like this:

<!-- LOGO -->
<p>
<img src="<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/logo.jpg" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin-bottom:20px;"/>
</p>

<!-- GRAPHIC -->
<img src="<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/header_img.jpg" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin:0 auto; padding:0; display: block; vertical-align: bottom"/>

4) Upload the theme to your test site

Let’s test these changes and make sure the new ticket theme can be assigned to a product, sent successfully, and source the logo and header image correctly.

Upload the ticket theme

You will need a testing site that already has FooEvents installed and configured. Using FTP/SFTP, upload the new ticket theme folder to the following location:

/wp-content/uploads/fooevents/themes/

FooEvents loads custom themes from this path. If you prefer, you can also use FooEvents → Ticket Themes (in WP admin) to manage and preview themes, but for code edits it’s better to use FTP, as you will need to update various files. Later, when we are ready to test, we will upload edited theme files to this same folder and then send ticket emails to a test account.

Set the ticket theme for a test product

Next, we’re going to update a product’s ticket theme settings to use this ticket theme so you can send actual test tickets while you iterate. That way you’re testing the real data and layout you’ll ship.

In WordPress, edit your event product and open Product data → Ticket Settings. Set the HTML ticket theme to your uploaded Halloween Ticket Theme. You will not be using the logo, header image, and color options, so you can leave them blank for now. Later on, if you are using FooEvents PDF Tickets, you can use those settings to customize the PDF ticket.

Send a test ticket

Open an existing order for this product or create a new order, and use the Resend Tickets option in the sidebar to send test ticket emails. Be sure to test single tickets as well as ticket emails that include multiple tickets.The ticket should look similar to the original Pavilion Ticket Theme, the only difference being that the logo and header image are now hard-coded rather than using the logo and header path settings.

5) Modify the colors and layout to match the custom Halloween ticket theme design

This next step can be tricky; however, the templates are designed to be as simple as possible and should be relatively easy to modify. Find existing colors and replace them with the colors used in the design. If your design differs structurally, modify the HTML and CSS to match your design. The output of the template consists of three main files:

├─ header.php ← Logo/header/event meta/top section 
├─ ticket.php ← The main ticket block (repeats per ticket) 
├─ footer.php ← Footer/contact info

Modify these three files as needed, but keep in mind that email clients are opinionated. Keep the markup simple (tables or minimal divs), inline the important styles, and use absolute image URLs. Avoid modern CSS that many clients strip or render inconsistently. It’s best practice to keep the HTML/CSS basic for high compatibility. See the FooEvents guide for reference: Ticket Themes Help.

When you’ve made changes, upload the updated files to:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/

Tip: Test regularly and keep changes small and incremental. Each time you upload changes, you can hit the resend button on the order screen without having to refresh the page (that will save you a few seconds). Once you have modified the ticket theme to match your own design, test it under different scenarios. Be sure to test single tickets as well as ticket emails that include multiple tickets (sent to purchasers).

Final checks before going live

View the email in Gmail, Outlook, Apple Mail, and on mobile if you can. If you use a preview service like Litmus, run a sweep across common clients. When you’re happy with the ticket design, upload the ticket theme folder to your live site and enable it for your product(s). Run an additional round of testing to make sure your changes reflect correctly and your image paths are working.

Final Word

Customizing a FooEvents ticket theme is super simple. Start with a solid base, rename it, add your artwork, then iterate on the CSS/HTML in small, testable steps. Keep the markup email-simple and don’t get fancy with CSS that clients will ignore.

Feel free to download and modify my Halloween Ticket theme design as well as the completed Halloween Ticket Theme, links below.