DJ Gigs Plugin Prototype

One of the things I wanted on joshuaiz.com was a way to enter my dj gigs and display them on the site. While I knew there were some pretty sophisticated event management WordPress plugins available, I wanted something simple and focused on gigs not just generic events. After a bit of searching, I decided to try out GigPress. GigPress is robust and has a lot of features including iCal and Google Calendar integration, the ability to group gigs by artist or venue, tour support and related events.

With a few tweaks, GigPress did a good enough job but it is more geared towards musicians and bands and was lacking certain features that I thought were crucial for dj gigs. For one, the event or party name is equally if not more important then the venue and GigPress didn’t support event names. What’s more, I wanted to be able to add flyer images to each gig and GigPress didn’t support those either. Event end times were also not included which were also a much needed addition. So instead of spending time editing plugin files to get GigPress to do what I needed, I decided to build my own DJ Gigs plugin prototype.

For this prototype, it was important to get the functionality down so I used a combination of code and existing plugins. First, I used GenerateWP to create the ‘djgig’ custom post type. If you haven’t used GenerateWP it is a great tool for quickly building WordPress code blocks: custom post queries, shortcodes, menus, custom post types and much more.

The djgig custom post type

Then, I needed custom meta boxes for this post type to enter in all the data for each event. Unfortunately, GenerateWP does not support meta boxes yet but Advanced Custom Fields is the next best thing. This is an incredible plugin that lets you create all kinds of inputs for any post type and display them easily on the site. So I created the following fields:

Event Title (using built-in WP Post Title)
Event Image (front of flyer) [image upload]
Event Image 2 (back of flyer) [image upload]
Event Date (jQuery date picker)
Event Start Time
Event End Time
Event Info (other djs, presented by, description, etc)
Google Map (event location)
Venue Name
Venue Address 1
Venue Address 2
Venue City
Venue State/Province
Venue Country
Venue URL
Event URL 1
Event URL 2
Ticket Price
Ticket URL

Once these fields were added I could add my dj gigs and then it was a matter of displaying them on the front end of the site on my Gigs page. As much as we all hate html tables, that is the best way to lay out all this data so I used this basic online html table generator to quickly get the html structure. Then I could start plugging in my custom field data into the table cells.

Advanced Custom Fields (ACF) makes this super easy:

And so on for all of your fields using the ACF the_field function. Different ACF fields have different requirements: for example, the datepicker field returns a date object which needs to be parsed in either js or php datetime formats. And getting a Google Map with (or without) a marker requires additional code to work with the Google Maps v3 API.

From there, I had to add some styling and functionality to the table. I wanted to have a summary row with the date, image, event title, venue, city and country showing gigs in list form with the option to expand each row to get more detailed event information. A little bit of css and some jQuery magic and everything came together.

Eventually I’ll recode this all myself and develop it into a fully functional custom plug-in. Aside from what the prototype can do already, here are some other features I plan on adding for the initial version:

  • possible other fields: venue phone, artist URL, set time(s)
  • iCal/Google Calendar support (export to calendar)
  • venue and artist taxonomies
  • ticket sales/purchase (PayPal integration)
  • recurring events (weekly/monthly)

This will be my first WordPress plugin so I wanted it to be something I would actually use. Hopefully I can get a beta ready by summer. If you have any feedback or feature suggestions leave them in the comments below.

See All Posts →

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">