![\"Custom](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/halloween-ticket-theme-cover.png\" "\\"\\"")
<\/p>\n<\/p>\n
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\u2019s perfect for your next Halloween event.<\/p>\n
A FooEvents Ticket Theme<\/a> is a set of template files used to render ticket emails in FooEvents<\/a>. 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<\/a> and in-person tickets using FooEvents POS<\/a>.<\/p>\n To keep it simple, I\u2019ve modeled the Halloween design on the Pavilion Ticket Theme<\/a>. 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.<\/p>\n Tip:<\/strong> Our ticket theme catalog<\/a> 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.<\/p>\n Once downloaded, rename the unzipped folder (pavilion_ticket_theme<\/strong>) to halloween_ticket_theme<\/strong>. Keep it lowercase and use underscores\u2014no spaces. This naming approach is how FooEvents expects custom themes to be organized.<\/p>\n Open the halloween_ticket_theme<\/strong> folder and edit the readme.txt<\/strong> and config.json<\/strong> files.<\/p>\n In readme.txt<\/strong>, change Pavilion Ticket Theme<\/strong> to Halloween Ticket Theme<\/strong>. You can also update the description, author, etc.<\/p>\n Next, update the name value in config.json<\/strong> file,\u00a0change: “name”: “Pavilion Ticket Theme”<\/strong><\/em> to “name”: “Halloween Ticket Theme”<\/strong><\/em>.<\/p>\n You can also set which formats this ticket theme can be used in (HTML, PDF, and POS). I recommend disabling PDF support (\u201csupports-pdf: false\u201d) 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<\/strong> set to true<\/strong>, be sure to test the rendering of the PDF ticket thoroughly.<\/p>\n Next, replace preview.jpg<\/strong> with your own thumbnail so you can recognize your theme instantly in the Ticket Themes screen.<\/p>\n By default, the original Pavilion Ticket Theme allows you to set the logo and header graphic in Product > Ticket Settings<\/strong>. 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.<\/p>\n The reason for this is that the logo and graphic are very distinct to the design of this ticket theme\u2014you wouldn\u2019t 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.<\/p>\n First, place your logo and header image in the images folder:<\/p>\n Open the The two PHP \u201cif\u201d 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.<\/p>\n Next, replace the image paths with the following:<\/p>\n Logo path:<\/strong><\/p>\n Header image path:<\/strong><\/p>\n Your updated code should look like this:<\/p>\n Let\u2019s 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.<\/p>\n 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:<\/p>\n FooEvents loads custom themes from this path. If you prefer, you can also use FooEvents \u2192 Ticket Themes<\/strong> (in WP admin) to manage and preview themes, but for code edits it\u2019s 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.<\/p>\n Next, we\u2019re going to update a product\u2019s ticket theme settings to use this ticket theme so you can send actual test tickets while you iterate. That way you\u2019re testing the real data and layout you\u2019ll ship.<\/p>\n In WordPress, edit your event product and open Product data \u2192 Ticket Settings<\/strong>. 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.<\/p>\n Open an existing order for this product or create a new order, and use the Resend Tickets<\/strong> 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.<\/p>\n 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:<\/p>\n 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\u2019s best practice to keep the HTML\/CSS basic for high compatibility. See the FooEvents guide for reference: Ticket Themes Help.<\/p>\n When you\u2019ve made changes, upload the updated files to: Tip:<\/strong> 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).<\/p>\n View the email in Gmail, Outlook, Apple Mail, and on mobile if you can. If you use a preview service like Litmus<\/a>, run a sweep across common clients. When you\u2019re 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.<\/p>\n 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\u2019t get fancy with CSS that clients will ignore.<\/p>\n Feel free to download and modify my Halloween Ticket theme design as well as the completed Halloween Ticket Theme, links below.<\/p>\n 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\u2019s perfect for your next Halloween event. A […]<\/p>\n","protected":false},"author":1138,"featured_media":200840,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[53],"tags":[],"class_list":["post-200243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howto"],"_links":{"self":[{"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/posts\/200243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/comments?post=200243"}],"version-history":[{"count":32,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/posts\/200243\/revisions"}],"predecessor-version":[{"id":200888,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/posts\/200243\/revisions\/200888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/media\/200840"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/media?parent=200243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/categories?post=200243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/de\/wp-json\/wp\/v2\/tags?post=200243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What We\u2019ll Cover<\/strong><\/h2>\n
\n
1) Getting Started<\/strong><\/h2>\n
![\"Comparing](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/comparison_original.png\" "\\"\\"")
<\/p>\n2) Rename the Ticket Theme<\/strong><\/h2>\n
![\"Custom](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-23-at-13.16.50.png\" "\\"\\"")
<\/p>\n![\"Custom](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-23-at-13.16.35.png\" "\\"\\"")
<\/p>\n3) Update the logo and header graphic<\/strong><\/h2>\n
![\"Custom](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/halloween-ticket-theme-diagram-1024x819.png\" "\\"\\"")
<\/p>\nhalloween_ticket_theme\/images\/logo.jpg\r\nhalloween_ticket_theme\/images\/header_img.jpg\r\n<\/code><\/pre>\nticket.php<\/code> file and find the following code toward the top of the file:<\/p>\n<!-- LOGO -->\r\n<?php if ( ! empty( $ticket['WooCommerceEventsTicketLogo'] ) ) : ?>\r\n<p>\r\n<img src=\"<?php echo esc_attr( $ticket['WooCommerceEventsTicketLogo'] ); ?>\" alt=\"<?php echo esc_attr( $ticket['name'] ); ?>\" style=\"width: auto; max-width:100%; margin-bottom:20px;\"\/>\r\n<\/p>\r\n<?php endif; ?>\r\n\r\n<!-- GRAPHIC -->\r\n<?php if ( ! empty( $ticket['WooCommerceEventsTicketHeaderImage'] ) ) : ?>\r\n<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\"\/>\r\n<?php endif; ?>\r\n<\/code><\/pre>\n<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>\/images\/logo.jpg\r\n<\/code><\/pre>\n<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>\/images\/header_img.jpg\r\n<\/code><\/pre>\n<!-- LOGO -->\r\n<p>\r\n<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;\"\/>\r\n<\/p>\r\n\r\n<!-- GRAPHIC -->\r\n<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\"\/>\r\n<\/code><\/pre>\n4) Upload the theme to your test site<\/strong><\/h2>\n
Upload the ticket theme<\/h3>\n
\/wp-content\/uploads\/fooevents\/themes\/\r\n<\/code><\/pre>\nSet the ticket theme for a test product<\/h3>\n
![\"FooEvents](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-23-at-13.14.36.png\" "\\"\\"")
<\/p>\nSend a test ticket<\/h3>\n
![\"WooCommerce](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-23-at-14.28.19-1024x630.png\" "\\"\\"")
<\/p>\n5) Modify the colors and layout to match the custom Halloween ticket theme design<\/strong><\/h2>\n
![\"Comparing](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/comparison-1024x987.png\" "\\"\\"")
<\/p>\n\u251c\u2500 header.php \u2190 Logo\/header\/event meta\/top section \r\n\u251c\u2500 ticket.php \u2190 The main ticket block (repeats per ticket) \r\n\u251c\u2500 footer.php \u2190 Footer\/contact info\r\n<\/code><\/pre>\n
\n\/wp-content\/uploads\/fooevents\/themes\/halloween_ticket_theme\/<\/code><\/p>\nFinal checks before going live<\/strong><\/h2>\n
![\"Screenshot](\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-23-at-12.58.57-1024x830.png\" "\\"\\"")
<\/p>\nFinal Word<\/strong><\/h2>\n
Resources<\/strong><\/h2>\n
\n