How to make a "My Treehouse Badges" Widget for your Website

Hi Riley Hilliard,

This is really cool! I'm pinging Tommy Morgan (Dev Team Leader) and Jeremy Jantz (Design Team Leader) to see if they have any tips for you. It would be cool to make this an official thing from Treehouse to make it easier for others.

I actually just added points data to the JSON output. Putting together an official widget is something we've been planning for a while now, maybe if there's a lot of interest to that we'll bump it up in the priority queue :)

Hi folks!

Our next WordPress project is How to Build a WordPress Plugin and we make a Treehouse Badges plugin!

We also released an official Treehouse Badges plugin with a few more customizations :)

http://wordpress.org/plugins/official-treehouse-badges-widgets-and-shortcodes/

Thanks Riley Hilliard for your awesome work!!!

Thanks so much Lee Hughes! Stoked people are getting it fired up on their sites :D

Tommy Morgan Yeah, at the very least it would just start generating a ton of links into Treehouse from users that want to display it on their sites. I have been trying to hone it down to display the most relevant info that personal site visitors (hopefully employers) would want to see, so the points information is going to be another really good addition to start playing around with.

I used this snippet from Codepen to make a Treehouse badge widget on the main page of my website. I modified it slightly, since I wanted to display the things I most recently learned, so I had jQuery prepend badges rather than append them.

I do really like the honeycomb formatting for the badges, it looks really slick.

Nathan Fulkerson Digging the JavaScript you used!

Riley Hilliard I only wish I could say it was all my doing. :) But it is really elegant and simple. I'm going to tweak it to my needs as I shuffle along the Treehouse adventures. Already in mind, I need it to grab the course titles and add them as alt text, and I need to limit the number of badges fetched so that the layout won't break when I finish reorganizing the site.

Also you are pulling the html data. It is available in JSON at http://teamtreehouse.com/vaughanslater.json which would be faster, easier to parse, and easier to access the various elements you want to pull.

This is awesome Riley. I downloaded the plugin and it looks amazing. inspired

Just awesome Riley.

Thanks!

We need this as a wordpress plugin :D

Hi guys. Are there are non-WP plugin for this as well? I want to use it on my BitBucket page, which only accepts static pages.

Thanks!

Hi guys. Are there are non-WP plugin for this as well? I want to use it on my BitBucket page, which only accepts static pages.

Thanks!