Provides both widgets and shortcodes to help you display your Treehouse profile badges on your website. The official Treehouse badges badges and plug
|Author:||Zac Gordon (profile at wordpress.org)|
|WordPress version required:||3.0.1|
|WordPress version tested:||4.3|
|Added to WordPress repository:||03-09-2013|
|Total downloads:||4 510|
Click to start download
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.
Once you have installed the plugin, navigate to Settings > Treehouse Badges in the admin area
Type in your Treehouse username (see FAQ for how to find your username)
Preview your latest badges and your profile information
To add a widget to your site go to Appearance > Widgets. Look for the 'Official Treehouse Badges Plugin' widget and drag to the appropraite widget area. Enter in a title to appear above the badges, enter in the number of badges you would like to appear, check or uncheck the tooltip option to have a tooltip display with more information about each badge
To add badges using a shortcode use [wptreehouse_badges]. You can also use the following optional parameters [wptreehouse_badges num_badges="4" tooltip="off" random="on"]. By default it displays 8 badges with the tooltip set to 'on' and random is set to 'off.'
A preview of the badges displaying as a widget
A preview of the badges displaying as a shortcode
A preview of the tooltip
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.
- 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