hypertext, words and more


  • 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. 🙂