• All
  • Web
  • Print

Mud Kings

Country : Michigan, United States
Responsibilities : WordPress development
Description : Commercial website for Mud King, a US-based company that organizes "Fun filled mud inspired obstacle courses" for individuals and families. The project consisted in building the live website - writing the front-end code (XHTML/CSS + jQuery) and back-end code (PHP) - from Photoshop mock-ups provided by a multimedia & graphic design company. Users can purchase tickets online using a custom-made registration system built on the WordPress platform.

    The home page of the site uses a 2-column content layout. When the browser window is 820 pixels wide or less, the content of the 2 columns is displayed in a single column to maximize legibility on smaller devices (smartphones/tablets). The 3-column layout of the footer also becomes a 2-column one. This is called responsive design.

    The ‘Obstacles’ page features a graphic of the course with numbers representing the obstacles. Hovering each number displays an image showing the actual obstacle located at this point in the course. This way, the user gets a picture of the actual content of the course he is paying for.

    The PHP template file behind the ‘Events’ page retrieves all the events open to registration from the database and displays them in a table on the page with a ‘Register’ link next to each of them. Every event is an instance of a Custom Post Type (CPT), which is a data structure offered by WordPress. Events’ attributes are in turn stored in custom fields.

    This is the registration form allowing users to register as individuals. Each field value is stored as a custom field in an instance of a Custom Post Type (CPT) called ‘participant’.

    The website accepts payments with PayPal as well as debit/credit cards. The payment data is entered (but not stored) on the site and sent to payment gateway over the Internet using the secure SSL protocol.

    In total there are 4 types of registration (adult, child, adult group, family) accessible through big square tabs in the ‘Events’ page. Access is also possible through a lightbox window (shown above) which appears when the user clicks on the ‘Register’ icon in the footer on each page of the site.

    This screenshot shows the ‘Group’ admin page in the back-end. As people can register on the site as groups or families, there is a data structure for each group/family which is yet another Custom Post Type (CPT) called ‘group’ that connects participants of the same group together.

    Hence in total the website’s registration process utilizes 3 different CPTs (‘participant’, ‘group’ and ‘event’) all connected to each other: [participant-group], [participant-event] and [group-event].

    This screenshot shows the ‘Event’ admin page in the back-end. From this page, the client can create a new event that will become available on the site for registration.

    To create a new event, the client must: click on “Add New” on top, pick a title (will be visible on the Events page and all registration forms), and set a value for all the events attributes: event type, date, location, start time, etc.

More projects