Stephen Petrey

How to Embed Your Unsplash Photos in WordPress

Published 3 years ago

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 😎

From Unsplash’s Documention

Seems easy yeah? Next, I went to check out what kind of HTTP Response I get from the API with 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. 🙂