Treehouse is an amazing online technology company that teaches graphic design, web design and development, mobile development and business. As you watch videos, take quizes, and complete code challenges, you earn badges showing the work you have completed. Everyone’s profile page at Treehouse [http://teamtreehouse.com/profilename] shows off the badges you have earned. These badges are great to add to your personal web site to show off what you have learned, and more and more employers in the industry are starting to recognize the work and knowledge that Treehouse badges represent.
This plugin allows you to show off the badges from your Treehouse profile and display them on your WordPress site. You can use a widget to display your badges in a header, sidebar or footer or use a shortcode to display badges in the main content are for a post or page. The plugin offers two customization options:
- Number of Badges – Choose how many of your recent badges you would like to display
- Tooltip – An optional tooltip with the name of the badge and the related course
Along with these features, the plugin also includes an affiliate widget so you can encourage people to sign up at Treehouse and get a discount off your monthly membership.
This is the official badges plugin for Treehouse and was created along with a video series on How to Build a WordPress Plugin.
There are a few options for installing and setting up this plugin.
- Download and unzip the plugin
- Upload the ‘wptreehouse-badges’ folder into the ‘/wp-content/plugins/’ directory
- Go to the Plugins admin page and activate the plugin
Install Via Admin Area
- In the admin area go to Plugins > Add New and search for “Official Treehouse Badges Plugin”
- Click install and then click activate
To Setup The Plugin
- Find your Treehouse username (see instructions under FAQ).
- In the WordPress admin area go to Settings > Treehouse Badges and then enter in your username
How to Use the Badges Widget
- Setup the Plugin (refer to above)
- Go to Appearance > Widgets and drag the ‘Treehouse Badges Widget’ to your sidebar.
- Enter in a Title to appear above the badges. For example “My Treehouse Badges”
- Choose how many badges you would like to display
- Check the box if you would like to have a tooltip display with information about the badge
How to Use the Shortcode
- Navigate to the post or page you would like to add the badges to
- Enter in the shortcode [wptreehouse_badges]
- Customize the number of badges displayed by adding a the parameter ‘num_badges’ with the number of badges you want to display. [wptreehouse_badges num_badges=’4′]. By default, 8 badges are displayed.
- Customize whether a tooltip will appear along with the badges by using the parameter ‘tooltip’ with a value of ‘on’ or ‘off’ [wptreehouse_badges tooltip=’off’]. By default the tooltip has an ‘on’ setting.
- If you want to display a random selection of badges then use the parameter ‘random’ with a value of ‘on’ or ‘off’ [wptreehouse_badges random=’on’]. By default the tooltip has an ‘off’ setting.
- You can use any of the parameters together like so [wptreehouse_badges num_badges=’4′ tooltip=’off’]
How to Use the Affiliate Widget
- Setup the Plugin (refer to above)
- Go to Appearance > Widgets and drag the ‘Treehouse Affiliate Widget’ to your sidebar.
- Enter in a Title to appear above the badges. For example “Join Treehouse”
- How do I find my Treehouse username?
- Login to your Treehouse account.
- Hover over the link in the top right of the navigation with a settings (gear) icon and your profile picture. From the dropdown menu select ‘View Your Profile.’
- The username is appended to the teamtreehouse.com url. So your username should appear like teamtreehouse.com/username.
- It’s taking a really long time when I submit my username in the admin area
Congratulations! That means you have a lot of badges to pull in from Treehouse. Just give it a few seconds and it should load properly.
- How to I customize the CSS for the badges?
Here is the basic markup for how the badges are displayed.
<pre> <ul class="wptreehouse-badges frontend"> <li class="wptreehouse-badge"> <img src="#"> <!-- Optional Tooltip --> <div class="wptreehouse-badge-info"> <p class="wptreehouse-badge-name"><a href="#">badge Name</a></p> <p class="wptreehouse-badge-project"><a href="#">Course Title</a></p> <a href="#" class="wptreehouse-logo"><img src="badge.png"/></a> <span class="wptreehouse-tooltip bottom"></span> </div> <!-- End Tooltip --> </li> </ul> </pre>
You can style the badges just like you would any other HTML elements. Note though that the tooltip is absolutely positioned based on the size of the image. If you change the size of the badge image you will need to adjust the positioning of the tooltip as well.
- How Often Does the Profile Information Get Updated?
Whenever someone visits a page, the plugin checks to see if the profile information was updated in the last 24 hours. If it has been longer than 24 hours, then the plugin will update the profile information. The next time someone visits the site or clicks on a page, the latests badges show.
- Can I Choose What Specific Badges I Want to Display?
Unfortunately, not yet. For future releases, we are considering more customized ways to choose what badges you want to display, instead of just showing the most recent badges. However, we recently released the ability to display random images.
Contributors & Developers
“Official Treehouse Badges Widget and Shortcode” is open source software. The following people have contributed to this plugin.Contributors
Interested in development?
- Fixed broken affiliate image url
- Updated thumbnail image in repository
- Added ability to display badges in random order
- Added Treehouse Affiliate Widget
- Fixed spelling mistake on error message
- Fixed logo link issue
- Fixed CSS link issue
- Optimized screenshots
- Initial launch of the plugin
- Display most recent badges of a user
- Option to choose how many recent badges to display
- Option to have a tooltip display showing information about each badge