Skip to main content Accessibility Feedback

Working with the Petfinder API

The PAWS New England dog rescue website is responsive, but the Petfinder widget they were using to display the dogs they have available for adoption was not.

Last month, I built them a custom solution using the Petfinder API. Today, I wanted to talk about my experience implementing it.

Working with a Grid

Screenshots of the PAWS Petfinder API on an iPhone, iPad, and laptop

Adopting a dog is both a logical decision (size, energy level, etc.) and an emotional one (this dog is cute/manly/awesome). I wanted to tap into both sides of the decision-making process by displaying big, beautiful photos of dogs alongside key information.

One of the things I love about working with responsive grids like Kraken (which powers the PAWS website) is how flexible they are. Building a responsive showcase for PAWS dogs was as simple as tying into the existing grid.

Potential adopters can search for their new best friend on any device with an internet connection.

Cached for Faster Loading

APIs can be slow, and Petfinder’s is no exception.

The biggest factor impacting Petfinder API performance was the number of animals you were requesting information for. PAWS saves hundreds of animals each year, and we obviously want people to see all of the dogs they have available.

The API was taking upwards of 60 seconds to load, and because their site is powered by WordPress and generated on-demand, nothing would display until the API was finished rendering. Not good.

The solution to this was really simple.

The PAWS website already uses the Quick Cache plugin to increase site performance. The plugin pre-builds the dog list page once an hour and serves that, eliminating the need to ping to the API every time someone wants to see a list of dogs.

Client-Side Filtering

A screenshot of the PAWS Petfinder API sort functionality

There are a lot of different things you might look for when adopting a dog.

Puppy or older dog? Small, large, or somewhere in between? Male or female? How are they with other dogs? With cats? Only interested in certain breeds?

I wrote a simple jQuery script that allows for real-time, client-side filtering.

Rather than rebuilding the page each time someone changes criteria, everyone gets the same HTML (which allows us to take advantage of the cache plugin I mentioned earlier). Each dog is assigned classes for various things: gender, age, breed and so on. When you toggle one of the filters, the jQuery script looks for dogs who match that class and hides or shows them based on your criteria.

Very lightweight. Very fast.

Progressively Enhanced

A screenshot of a progressively enhanced PAWS dog listing

Given the diversity of devices that can access the internet today, it’s really important that sites are fully functional on devices that lack support for media queries, JavaScript and so on.

The list of PAWS dogs starts as a simple grid with photos of dogs and basic info. Clicking on a dog takes you to their Petfinder listing.

If your browser supports JavaScript, the filters are added, allowing you sort through dogs that match your criteria. Clicking on a dog opens up a drop-down menu with more information and a full-description, as well as a link to an adoption form if you really like the dog.

But even without JavaScript, the page still works.

A little help

I have to give major kudos to Bridget Wessel and her Petfinder Listings plugin. While my solution forgoes the plugin, her PHP was instrumental in getting the API data into WordPress.

Definitely give her work a look.

The Petfinder API for WordPress Toolkit

To help other developers who may be looking to do something similar, I open sourced my code. Check out the Petfinder API for WordPress Toolkit on GitHub.

Note: I’ve released a CMS-agnostic JavaScript plugin for working with Petfinder called petfinderAPI4everybody.js.

And if you’re looking to adopt an awesome dog (or just want to see a whole bunch of cuteness), check out PAWS New England.