Developer Tools – See Tickets Style Guide

Access powerful WordPress code to bring your See Tickets US events to life on the platform that makes content management so easy.

WordPress Event Feed Plugin Suite

Use these plugins to populate See Tickets events on a WordPress website!

DOWNLOAD PLUGIN SUITE

See Tickets Plugin

The See Tickets WordPress plugin takes the dynamic event data from See Tickets and populates it onto WordPress website. Using an XML Feed of event data pulled from the See Tickets client account, custom fields are populated with event details. Map the custom fields to the XML event data in the WP All Import settings. Map the fields needed for display on the website using the See Tickets WordPress plugin settings page. Out of the box, the See Tickets WordPress plugin has the ability to display events in a list view or a calendar view. With little custom coding, a grid view can be created from the list view. The custom fields that display in an event listing can be customized with various mapping settings.

Advanced Custom Fields

With the Advanced Custom Fields WordPress plugin, create custom fields needed for the event post types. Add fields for the dynamic data you want to bring in from the See Tickets admin. We also offer a JSON file for quickly creating all the custom fields instead of manually adding each one. Please read below for information regarding our JSON file. Using the Tools tab in ACF, upload the JSON file and it will create an Events field group with many fields for the event data. Extend the capabilities of an event post by adding more custom fields, such as an RSVP link button.

Advanced Custom Fields Add-On

Save time on development by adding the ACF Add-On to the plugin suite. The ACF Add-On plugin works directly with the WP All Import plugin. This add-on plugin provides the ability to quickly and easily fetch the Event field group and fields from ACF into WP All Import. This allows for the quickest field mapping. Please reach out to the See Tickets Design team for license keys.

JSON

With Advanced Custom Fields and our custom JSON file, the See Tickets event data can be displayed on a WordPress website. Upload the JSON file in the Tools section of ACF, and it will create an Events field group complete with all the custom fields needed for mapping in WP All Import.

WP All Import Pro with XML Feed

WP All Import Pro is the key plugin to process event data from the See Tickets client account into your website. See Tickets offers an XML Feed of client events that is updated by the second. Using the XML Feed, all events can be populated onto the website and appear as a series of posts, or a custom post type, in the WordPress admin. To access the XML feed, first locate your targeted Client ID. Log into the See Tickets client dashboard. Find the ID number in the dashboard URL, and an example URL is below. Use this client ID with the XML Event Feed URL below. Replace the XXXXXX with the targeted client ID. The ID (seen here as XXXXXX) in the URL will be a 5 to 6 digit number. Copy that and add it into the XML Feed URL where noted.

Reach out to the See Tickets Design team for a plugin license key that gives the ability to import the XML Feed every 30 minutes. Please connect with the See Tickets Design team to set up a scheduler that runs more frequently.

Example of an XML Feed:
https://prod-seetickets-core.seeticketsusa.us/api/v2/public/client/XXXXXX/event?format=xml

Example of a Client ID:
https://manage.seetickets.us/wafform.aspx?_act=clientdashboard&Client=XXXXXX

WP Menu in Page Block

Needing to use a WordPress menu in a page block can sometimes occur, but there is no pre-made block to do this. This snippet will display the menu with a shortcode in a page block. You will need to create your menu in Appearances > Menu as normal. You can select a menu by name, and set a class for easier styling purposes.

Place this in your functions.php file.

Your shortcode is: [seetickets_menu]

//shortcode to display a menu in page blockfunction seetickets_menu($atts, $content = null) {extract(shortcode_atts(array( 'name' => null, 'class' => null ), $atts));return wp_nav_menu( array( 'menu' => $name, 'menu_class' => 'your-menu-class', 'echo' => false ) );}add_shortcode('seetickets_menu', 'seetickets_menu');

Full Width Featured Events Slider

The Full Width Featured Events Slider will check the category ‘Featured Event’ for posts and display the posts found in chronological event order. If no events are found in the category Featured Event, it will display upcoming events instead, and in chronological event order. It will display the featured image of the post as a background image with a text overlay of event details and ticket button that links to your See Tickets event page. If the post does not have a featured image it will display a fallback image that you will need to create and upload to WordPress. The text overlay comes from the See Tickets event details found in the WordPress post. The slider will display one event at a time as a full-width image and text. There is a max of 8 events.

You will find the separate files you need here:

DOCUMENTATION

Add two source links to header.php for TinySlider

Add shortcode to functions.php

Add styles to your CSS

Add function to your JS

Don’t forget to add the fallback “no-image”

Your shortcode is: [seetickets_featured_events]

Doors and Event Times

Out of the box, the See Tickets Plugin places the door and event times on separate lines. Some like to have this information all on one line. To do this, use a combination of JQuery and CSS flexbox.

First, create a wrapping div in your JQuery.

JQuery Example:

$('#seetickets.list-view .list-view-item').each( function() {
	$(this).find('.detail_event_time, .detail_door_time').wrapAll('<div class="time-and-date"></div>');
)};

Next, inspect the site to ensure the JQuery is functioning. Once you’ve confirmed the wrapper div exists, you can use it to override the default styles. It is good to display:none the ST Plugin’s detail label class and create your own. The CSS here is to overwrite the declarations coming from the ST Plugin, and to add the new Event / Doors labels to the times.

CSS Example:

#seetickets .list-view-item .list-view-details .detail .label {
	display: none !important;
}

#seetickets .time-and-date {
	display: flex;
	width: auto;
}

#seetickets .list-view-item .list-view-details .detail {
	grid-template-columns: 100%;
	display: flex;
	justify-content: flex-start; /*so the text aligns to the left */
	width: auto;
}

#seetickets .list-view-item .list-view-details .detail.detail_event_time .name:before {
	content: "Event ";
	margin: 0;
}

#seetickets .list-view-item .list-view-details .detail.detail_door_time .name:before {
	content: "Doors ";
	margin: 0;
}

#seetickets .list-view-item .list-view-details .detail.detail_door_time .name:after {
	content: " / ";
	margin: 0 4px;
}

Visual Example:

WordPress Shortcodes

Our lightweight WordPress Shortcodes plugin works in conjunction with our See Tickets plugin to help you build content on your website with more efficiency and dependability. No coding required. Simply copy and paste the provided shortcode.

Clearing your Cache

A browser cache takes elements from the websites you visit and saves them in a database, resulting in faster page load times and a more robust user experience the next time you go to a website you’ve been to before. The cache remembers parts of pages, like images, to help them open faster during your next visit.

The See Tickets Design team often tells users of the sites we build to clear their cache so they see the most recent code updates we’ve added. Here is a straightforward approach to clearing your cache on the 4 major browsers: Safari, Chrome, Firefox, and Edge.

STEP BY STEP GUIDE

WordPress Theme

See Tickets uses the HTML5-Blank WordPress template as a foundation when developing websites. For simple or complex builds, HTML5-Blank can be molded to fit your design and development needs. Out of the box, it is a reliable foundation and ready for styling. The functions file contains a handful of helpful features, such as a quick start to a Custom Post Type (without a plugin), and how to easily enqueue your own separate JS and CSS files. Flexible and powerful, the HTML5-Blank theme will serve as a great base structure for your new site.

DOWNLOAD THEME