This is a quick-tip to illustrate a real world example to Sawyer’s post: An In-depth Look at the Dashboard Widgets API.
When working with WordPress on client projects, I really try to budget in a custom & white-labeled experience. I’ve written in detail on the topic of white-labeling WordPress over at Art of Blog, but ultimately it is something I try do to set my business apart from the rest. Most recently, I have introduced client specific screen-cast tutorials that walk users through the custom functionality of their site. It’s super easy to implement, and your clients will absolutely love you for it.
You can use any type of video delivery method, but I have a PLUS account with vimeo, which offers some pretty crafty privacy settings. Not only can I control which URLs a given video can be played on, I can also hide the video from Vimeo.com as well.
To customize your settings on Vimeo.com, navigate to your screen-cast and click the settings icon that sits to the right of the video title. From settings, navigate to privacy and submit your requirements. Be sure to block the site from vimeo.com and add the site you plan to use it on. Easy. Next, just grab the embed code and keep it handy.
Open up functions.php in your active theme and create a new dashboard widget:
/** INSERT SCREEN-CAST DASHBOARD WIDGET **/
function tutorial_dashboard() {
?>
<h4>Tutorial Screen Casts</h4><br />
<ul>
<li><a href="#TB_inline?inlineId=REPLACE_ME_1" class="thickbox" title="ENTER TITLE HERE">ENTER ANCHOR TEXT HERE</a></li>
<li><a href="#TB_inline?inlineId=REPLACE_ME_2" class="thickbox" title="ENTER TITLE HERE">ENTER ANCHOR TEXT HERE</a></li>
</ul>
<div id="REPLACE_ME_1" style="display:none">
<div class="tut_inner">
/*** INSERT VIMEO EMBED CODE ***/
</div>
</div>
<div id="REPLACE_ME_2" style="display:none">
<div class="tut_inner">
/*** INSERT VIMEO EMBED CODE ***/
</div>
</div>
<?php }
function tutorial_dashboard_setup() {
wp_add_dashboard_widget( 'tutorial_dashboard', __( 'Screen-Cast Tutorials' ), 'tutorial_dashboard' );
}
add_action('wp_dashboard_setup', 'tutorial_dashboard_setup');
Now, you could just embed the videos right into the widget and be done, but that would not be very clean. Instead, I choose to use the built in thickbox modal window feature. It’s being called anyway, I my as well put it to use.
In the code snippet above you’ll see this attached to each link: #TB_inline?inlineId=REPLACE_ME_1" class="thickbox. This let’s thickbox know we mean business. Just replace REPLACE_ME_1 with something that is relevant to that link, and then also replace the second instance of REPLACE_ME_1 in the div container that has the same id. You’ll also want to replace ENTER TITLE HERE and ENTER ANCHOR TEXT HERE with something appropriate. Last, just embed your vimeo code where it says to…embed the vimeo code. Easy. Refresh your browser, click on a tutorial link and the video should open up in the modal window:
You’ll want to mess around with the CSS to center the videos, but the code above is set up to hook onto a class element of tut_inner. You’ll need to add this bit of code to a stylesheet that is called from the admin, as your theme styles are not called on the back-end.
Enjoy!
Great example of a real world use!
Awesome idea! I did implement some screencasts before, but never though about using thickbox to display them.. Bookmarked :-)
Thanks Bowe! I get a kick out of this type of stuff.
Now that was a very cool concept!
Curious what you think would be the best approach to building a ‘manager’ for the videos so that adding them is easier than always modifying the function. Could be the beginning of an interesting plugin.
thnx for the great tut
That would be a good idea, but maybe something that should be built into future updates of WP Help: http://wordpress.org/extend/plugins/wp-help/ as opposed to being something standalone. I agree it can become tedious, but I’ve built this into my genesis and thesis child theme work-flow, so it’s really a bit of copy and paste. But you’re right, to send out into the wild, it should definitely be refined.
I’ve been wondering how to add video to the dashboard. Thanks for the code/tutorial!
Thanks Gary, let me know how it works for you!
Nice tip, thanks.
Almost as an aside (hope this isn’t going too far away from the point of your post) – depending on the context of how you are using the embeds you may need to check the terms of the Vimeo licence agreement – commercial use is not allowed and it would be a pain to integrate loads of videos to have them pulled. There are many situations where this won’t be an issue but might be worth folks double checking beforehand!
Good Point. I did read their TOS in regard to Commerical Use, and from what I gathered, and seeing how iThemes and others have adjusted based on it, it’s only an issue if you are creating an actual “commercial” in the television sense, where you are explicitly selling a product. Since this is just information, and since it is blocked by the public space, I think I’m okay. It is worth mentioning though, so I should definitely verify this to save my butt in the long run.
Would be interested to hear any follow-ups if you do pursue this with Vimeo & get clarification. My take on it was that commercial activity included restricting access to videos e.g locked behind a paywall membership site, or as part of a paid for service (I think you’d fall into this category if the videos are only available to your paying clients) wasn’t allowed. It isn’t as clear as it could be, that’s for sure.
Great stuff Rich, this changes the landscape of the dashboard.
I notice in your screenshots that your thickbox window seems as out of control as mine. Mine seems fixed at about 670px wide and height matches available screen height. Any insight as to control this?
Had hoped like lightboxes it would auto-size base on the link content, but I inserted both a Vimeo and a still image. Both popup in thickbox in same size (my larger image hangs way over it.)
Hey Dave, thanks for the comment. I had the same trouble as you and ended up compromising. I do intend on revisiting this to find a fix once I find some more free time. For now, I just added some padding at least center the video. Weak Sauce–I know. I’ll post an update soon.
Thx for letting me know Rich, now I feel a little less crazy! Banged my head on it for awhile, tried even bringing in a different lightbox but couldn’t get them to fire on the admin side. I look forward to hearing if you solve this as it would really bring the dashboard to life to see behaviors we’ve come to love on the front-end.
Hi, to day your help rock my theme, my client will love to have the tutorials on his backend :)
BTW, I find a simple way to center the video, just adding this code:
What do you think?