How I Added Instagram to My WordPress Self-Hosted Site

I’m a big-time user of Instagram, the photo sharing service with the great iOS application. Recently, I setup this blog to display my most-recent pics. Below is a short recap of how I did it — and I mean short, as it was very easy.

Initial Setup

It started with a decision on how to present my Instagram content. My original goal was pulling each photo into its own individual WordPress post, which from there I could use as emergency content during weeks I wasn’t able to write more frequently.  However, I didn’t find any solution which behaved like this (I’m sensing a business opportunity here).

The best compromise I found was the Instapress plugin for WordPress. It seemed to be the most flexible compared to the other options currently available.  It comes delivered with a shortcode that can display my feed (or anyone else’s) with different options for picture count, size, and more.

The Actual Execution

The only issue I’ve had with Instapress is how it outputs its HTML. I would have preferred for it to publish HTML similar in look and feel to a WP Gallery.

WP Galleries are a nest of <dt> and <dl> tags, mixed in with a wealth of gallery-specific CSS classes. Instead, Instapress posts each photo wrapped in a <div> and entirely-different classes.

My site is currently employing the Wumblr theme from Themify. It’s control panel allows me to insert custom CSS without modifying the theme itself.  So I just cribbed Wumblr’s WP Gallery styles and applied them in duplicate to the Instapress classes. It does the trick well enough.

Author: Matthew

Husband to Jenn, father to Zachary and Penelope, blogger, artist, WordPress consultant, OpenCamp organizer, and running enthusiast. Brother, can you spare an extra hour in the day?