Piper + Heath Travel
Piper + Heath knows how to show travelers the real Africa.

San Diego's Piper + Heath Travel specializes in African safari experiences. With a focus on conservation, and deep African roots and connections, Piper + Heath knows how to show travelers the real Africa.


Project Spotlight Details


Countries and Destinations

Throughout this profile, I'll be talking about content post types and how they relate to each other. At the top level there is the Country post type, which serves as a logical parent for the Destination post type. This creates a one-to-many relationship for countries to destinations, and allows for pulling data from either post type from either post type. Other post types created for this project, but won't be discussed further, are Guides, FAQs, and Testimonials.


The Front Page Grid

The front page grid has several features. First, it is a randomized grid. The first challenge in this with WordPress is that sometimes with random queries, duplicates are produced, and all grid slots have to be unique. The solution was to have a single template file called for every slot. As items are called, the id is stored in an array, and then passed back to the next query using WP_Query's post__not_in. This effectively solves this problem.

The next challenge is that the different slots have different image sizes. Normally with responsive images, image scaling is not difficult. However, the design calls for a few different ratios, so this complicates our goal. Custom image sizes were set up for each destination post, so that when creating them, at that time the user creates an auto-cropped version of the featured photo for each slots width/height ratio.

A nice hover scaling effect was created for each slot, scaling and darkening the image, and the corresponding destination type icon reverses out as well.


Destinations Google Map Mashup

A Google Map mashup is built from all of the destinations entered within WordPress. Clustering the icons helps keep the map useable as the user zooms in closer to view locations. A custom map theme was created and integrated to match the project's color scheme and look and feel. Custom map markers were created and integrated as well. Each marker is tied to the destination detail page, so users can click on the destination marker title link and plan their trip from the map view. As Piper + Heath add new destinations the map will be populated automatically.


Country Edit Screen & Front End Display

Countries have a highly customized edit screen. There are fields to handle text content and images that are used to build the complicated, but completely dynamic front end view of the country pages on Piper + Heath's site. The relationship built between countries and destinations allows for pulling in the country's destinations on the country page, and conversely, allows for showing country information on the destination pages. Country pages also display a randomized duo of destinations near the end of the page.

The layout is responsive, so mobile devices are provided a view that has been carefully crafted to reflow and accomodate smaller screens.


Destination Edit Screen

Destinations are assigned to countries, which builds the association needed to tie them together. Each destination can be part of the random home page grid rotation, and can also be part of the random 'more to explore' duo that appears on the country page and other destinations in that country.

Because of the different width/height ratios required for the home page, the destination feature images section allows them to place an intelligently cropped image that fits the proper ratio for the proper slot. An image can be uploaded once, then set for each field with a custom crop to frame the photo appropriately for each slot.

Destination pages have a slideshow at the top of each page to showcase what each destination has to offer. The slideshow offers the option of adding a video slide or a static image, and can be set in whatever order desired.


Destination Front End Display

The front end of destinations begins with the header slideshow, which is capable of showing either images or a video. The background of the title bar that follows is also user-configurable by Piper + Heath. The title bar also contains a Google Map showing where the destination is within its country. Setting this from within the destination edit screen also adds it to the master destinations Google Map mashup automatically. The title bar also includes a favorites toggle to add the current destination to a running group of favorites. The user can then visit the favorites page and see all of the destinations they have marked with links to each from there. The title bar finishes with a call to action button, taking users to a travel questionnaire that helps people communicate to Piper + Heath their expectations of the travel experience, and their passport status.

The destination content is then displayed with an intro paragraph and a two-column format. The edit screen follows the format shown on the front end, which makes it easy for Piper + Heath to control the content, but keep the site layout and look and feel consistent across the site.

Moving down the page, we see the country graphic that is set on the country post type (so it is only set once and not for each destination). That heads up a set of tabs that present all of the different destination types (Safari Camps, Points of Interest, Hotels & Resorts, and Journeys) for the current country and links to all of the destination pages for each type.

Then the two random country-specific destinations are featured below these tabs, offering a visual preview of Piper + Heath curated destinations to feature here. And the page finished out with a country selector allowing users to jump directly from country to country.

Again this page is completely responsive and will reflow and reformat to display an appropriate view for smaller screens and devices.


Let me help you with your next WordPress project.