How to Embed Your Unsplash Photos in WordPress

Wouldn’t it be neat to embed your Unsplash photography on your WordPress site?  Unfortunately, there’s no WordPress plugin available. If you’re not familiar, Unsplash is a huge library of photographs for commercial and noncommercial purposes. It’s an awesome resource for designers, prototypers, and developers alike. 

If you have a profile with Unsplash, you should check out their API docs. The devs provide some wrappers too. There’s a PHP, Ruby and JS wrapper. Which all-in-all, are pretty fucking dope.

So yeah, I figured it would be cool to add a showcase of my Unsplash photos on my website. Upon closer inspection of the Composer wrapper, it looked like it was overkill for my use. But if you’re gonna make a WordPress plugin using Unsplash, you’ll want to use it.

So I began here — first I made a quick blueprint on how I wanted this to go down:

Just a simple page, and a two column grid layout of my photos.

Next, I took a looked through the Unsplash API docs again. Created an application, and received my Application ID. Very important step. The docs even had an example for listing a user’s photos. Hell yeah 😎

Seems easy yeah? Next, I went to check out what kind of HTTP Response I get from the API with hurl.it and everything is looking hunky-dory so far.

So at this point I realized a few things:

1. I need to make a simple HTTP request
2. Decode the JSON
3. Loop through the array and echo the goodies

I decided on making a simple snippet below:

If you leave line 19 uncommented, you can see the full array and figure out what you want to use from the HTTP request. You can copy/paste that snippet in any template or PHP file and it should work. NOTE: make sure to replace my username and swap YOUR_APPLICATION_ID for your actual App ID from Unsplash.

After a few layers of paint my Photography page now looks like this:

It’s quick and dirty, but at least I won’t have to upload my Unsplash photos to my website manually anymore. It’s all programmatic baby! I’m really happy how this turned out. I tried to make this as simple as possible and under 15 lines of code I think this rocks. But I hope someone else finds this useful!

Let me know how if you have any feedback, improvement or philosophy on this implementation in the comments below. 🙂