DEG recently had the opportunity to build a responsive, WordPress-powered website for Travois, a mission-driven consulting firm focused on promoting housing and economic development for the American Indian, Alaska Native, and Native Hawaiian communities. They’re doing stellar work you should definitely check out.

One of the feature requests was a way to showcase the various projects that are currently active or complete. These projects are spread across the country and are unique with regard to the services provided. DEG was challenged to find an impactful way to display the large amount of data available per project – not to mention the sheer amount of projects (prior to launch they expected 175 active/complete!) – in a friendly, responsive manner.

Leave it to our DEG artist to nail the design:

SVG map

 Project requirements:

  1. Data beyond the traditional Title/Content WordPress format.
  2. Data filters. The ability to sort by Category, Organization, Project Type, and Status
  3. AJAX and Pagination
  4. A Responsive, Interactive Map

Without getting too specific, I’d like to share some high-level details about how we met these challenges and the tools we used to do so. My hope is that it provides some guidance on your next project.

 

Data beyond the traditional Title/Content WordPress format

To grow beyond the out-of-the-box Title and Content that WordPress provides we chose to harness the power of custom fields. More specifically we used the Custom Metaboxes and Fields (CMB) helper from Jared Atchison. We chose CMB because it’s very simple to setup and use. There are also built-in functions for displaying the data once it’s in the database.

Custom Metaboxes and Fields

 

Data filters

If there’s only one thing you take away from this article it’s that you should create a Class (or two) for getting your custom data out of the database. It’s a little extra effort upfront, but it will save you hours in the long run by removing the need to copy/paste the same code over and over again.

One of the Classes we wrote was used to handle the four data filter dropdowns. And secretly, this Class also handles the backend data for the interactive, responsive SVG map. One method per Class to handle the Category, Native Organization, Project Type, and Status. Each of these methods does one thing and only one thing. Fetch and return the data from the database (if it’s available of course). Clean, simple, maintainable.

Data filter

It’s also worth mentioning that if you’re only interested in pulling a small amount of data from the database you should query the database directly instead of using WordPress helpers. There are a couple benefits to doing it this way but it is primarily for the performance gains. Smashing Magazine has a great article on interacting with the WordPress database.

 

AJAX and Pagination

Doing AJAX the right way in WordPress is always a hot-topic. Micah Wood recently gave a great presentation at WordCamp Atlanta that we found helpful for anyone interested in doing it the “right” way.

As for the pagination? WordPress core to the rescue! It’s easy to forget the WP_Query class supports pagination using the $paged parameter out of the box.

 

Responsive, Interactive Map

You’ll just have to wait for our next post to see how our UI team conquered the map.

 

One last thing…

For Travois, the projects mechanism was big enough to warrant its own plugin. And while our plugin is in the traditional sense a WordPress plugin, as in you can activate, deactivate, delete. It doesn’t do anything upon activation. It only provides the platform for the theme developer to hook into. In general, it’s a good idea to put these types of functions in its own plugin because the client can take their data with them when/if they change themes.

We followed the structure laid out by Tom McFarlin by using his WordPress Plugin Boilerplate. WordPress may not be a very OOP platform, but that shouldn’t stop you from organizing your plugin responsibilities across multiple files.

Read more about the Travois project: Leveraging Advance Web Features.

Leave a Reply to Erik Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments

  • Erik

    Erik

    7 years
    Reply
    I won't lie. This just made my day. I'm setting out to experiment/play with this concept as we speak. Love the finished product. Take care!
    • DEG

      7 years
      Excellent! Glad to hear it. Let me know what you come up with, I'd love to see other ways people are using CMB.