A WordPress Theme for Venues

Scroll Down to Discover More

Highgate: a WordPress Theme for Venues

I’ve designed and built a number of websites for venues over the years. As most small and medium venues have the same goals and problems, and I’ve always believed that a low cost template-based solution would more effective and a lot cheaper than a bespoke solution.

The goal of this project was to develop a WordPress theme that solve in a cost effective way most of the problems encountered by small and medium venues.

I also wanted a solution that was easy and quick for me to re-brand but retain the same information architecture and site layout. The theme's default styling has been kept neutral to allow it to be quickly re-branded with a venue's logo, font, colour palette if they exist.

Scroll down to find out more, or view the live site here.

Note: since developing this theme I have discovered the website builder platform Wix has a small venue template which on first glance looks pretty good. Obviously there are pros and cons of using a service such as Wix so I'd do some research.

Design

Most small and medium venues have or should have, the same marketing goals. These goals are: promote up-coming events, facilitate the purchase of tickets, provide information about the venue. This can include information such as how to get to the venue, disabled access, equipment used and so on. It follows then that venue websites should have roughly the same information architecture. An analysis of the IA requirements, produces the following layout:

Main Navigation

The main navigation includes links to various standard pages a link to the list of events. Including an events link allows users to go directly to the events list without having to view the main ad content. The navigation collapses to a hamburger style navigation on mobile. A feature of the main navigation is that it is transparent on the home page, becoming solid as the user scrolls. This gives a more integrated look to the homepage particularly if the main ad slot is used for venue branding image.

Website screen capture showing main ad with menu overlayed

Main navigation background transparent

Website screen capture showing main ad with menu overlayed

Main navigation background visible

Main Ad

The main advert utilises Bootstrap's built-in carousel module as the main promotional space. Several ads can be added and are automatically rotated.

If only one main ad is required the carousel controls are hidden. This allows the main image to be used as either a static venue branding image promoting the venue, for example a picture of the venue, or a rotating ad space that can be used to promote selected events. Having only one main ad means a faster mobile experience for the user. In practice however, a rotating carousel gives venue managers the ability to promote particular events. For example a large Halloween show may not be listed for several pages depending on the number of shows in the previous weeks. Having a carousel allows the show to be promoted to site visitors several weeks before the event.

Website screen capture showing main ad with seasonal ad

A main ad used to promote an event

Website screen capture showing main ad with interior

A single main ad with brand image

Events List

Events are listed in calandar order and are split across several pages depending on how many events need to be listed on one page and how many confirmed events there are in total. The event image is implemented as the background image for the content 'card'. This means any size image can be used without having to be cropped by the content author. Guidelines are provided for authors on the reccomended. The events list uses a 'card' style on desktop devices and a 'list' style layout on mobile. This allows the maximum number of events to be displayed on both devices. There is a subtle CSS animation applied to the events which is triggered as they appear in the viewport. This is done via the scrollreveal JS library.

Website screen capture showing events list desktop

Events list desktop layout

Website screen capture showing events list mobile

Events list mobile layout

Secondary Adverts

Secondary adverts are displayed at the bottom of the events list on each page. These ads allow venue managers an additional promotional area. The ad image is overlayed with a semi-transparent layer to ad text legibility. Like the events images, these can be any size and do not require a content author to crop the image or source and image of a certain size.

Footer

The footer contains Mailchimp's form embed code which is then styled via the main style sheet.

Event Pages

Event pages list more info about the event including the show and stage times and large 'Get Tickets' button.

Build

Bootstrap is used for the build with a HTML prototype being built then converted to a WP theme. A custom query sorts the events into the correct order and there is some custom PHP added to the carousel to hide the carousel controls if there is only one main advert. A number of minor modifications were made to Bootstrap's default styling for the mobile hamburger menu. This was mainly done to make the menu more touch friendly.

Content Management

Three custom post types are used the manage the content. The main ad, the event and the secondary ad. The theme originally had an extensive theme options page where users could upload the logo or update the address fields but I've disabled these options because of the support overhead. It's a lot quicker for a Developer to resize and upload a new logo, and adjust the CSS for the correct positioning, than writing and maintaining documentation. It's likely that such documentation wouldn't be used because of the complexity in explaining issues such as vector logos versus raster logos, cropping areas etc.

Screen capture showing entire site

Website Screen Capture

Mobile

Most mobile page re-flows that don't involve a WordPress loop are taken care of by Bootstrap's grid. The events list and secondary adverts use custom CSS and a number of custom media queries. These basically transpose the 'card' style layout on desktop down to a 'list' style layout on mobile. The list style allows more events to be displayed on mobile. I've also modified Bootstrap's default mobile hamburger menu styling making the touch targets for the menu items and social icons larger.

iPhone mockup home page

Homepage mobile

iPhone mockup Event page

Event page

iPhone mockup hamburger menu open

Hamburger menu open

Logo Development

A simple place holder logo to indicate that the theme is brandable.

highgate logo

Placeholder logo

Ebridge logo lockout

Placeholder favicon / touch icon

Typography

I've used Robotto as the default font because it's free from Googlge fonts, has a contemporary feel and comes in lots of weights. Bold is used for headers and sub-headers and regular for body copy.

Roboto sample typeface

Colour Palette

A palette of shades of black is used. I've used maketintsandshades.com an on-line colour tool to create shades of the base colour in 10% increments. I like to keep it simple and use two shades darker and two shades lighter of the primary colour. In this case the colour stops are at 10% and 30%. The CSS names used are SASS friendly if you use SASS in your project.

This dark palette compliments the live photography style which is used by many artists who play at smaller venues. Artists that perform at smaller venues generally don't have access to branded material that could be used for the promotion of their shows. Most bands however will have a photo of them on stage. These photos are easy to find and thus removes some of the work in sourcing promotional images for events.

Hex: #1c1e20
CSS bcp-d3
Hex: #242729
CSS bcp-d1
Hex: #282b2e
CSS bcp
Hex: #3e4043
CSS bcp-l1
Hex: #696b6d
CSS bcp-l3

Visit the Live Site

View the live site here