A couple posts back I wrote about creating a recent tweets section with Twitter's new…
How To Use The Thesis Multimedia Box To Display Content Dynamically
If you use Thesis, you’ve heard of the Multimedia Box and you know what it does. Right after you installed Thesis, you saw those pictures at the top of the sidebar that display randomly every time you refresh the page.
Chances are you probably disabled because you figured you didn’t need rotating images at the top of your sidebar. If you ask me, that’s a mistake.
Not only can you display images, you can display videos or anything else you want using the custom code option (AWeber forms anyone?).
Why the Multimedia Box is Important
I make my living designing websites using Thesis. Consider these two facts:
- The vast majority of my clients place sign up forms for e-mail newsletters at the top of the sidebar.
- The vast majority of my clients want to serve sidebar content dynamically on different pages.
Not only can you choose what to display on a site-wide basis, you can change it up on a post-by-post or page-by-page basis.
Want to serve an AWeber form by default, but show a video instead on a certain page? You can do that. How about displaying different AWeber forms on different pages for tracking purposes? Yep, you can do that too.
You can do just about anything you need to do.
Setting Up the Multimedia Box
This is pretty straightforward. The good news is, there’s no code to write…unless you want to :)
The most difficult thing you might have to do is copy some embed code from YouTube or AWeber.
Setting Up Thesis Design Options
In order to set your site’s default Multimedia Box behavior, you’ll need to find the “Multimedia Box” options on the “Thesis Design Options” page in your WordPress dashboard.
You can choose to display photos (the default), a video, or you can use your own custom code.
Let’s assume that you want to display an AWeber form. You need to choose the custom code option.
Then, in the box that appears after you choose custom code, you enter your embed code from AWeber. It should look something like this:
If you happen to be a ninja and you want to use the HTML code AWeber provides and add you own styling, more power to ya!
Click the “Big Ass Save Button” and you’re done. You should see your AWeber form in the box at the top of the sidebar. That wasn’t too bad was it?
Controlling the Multimedia Box on Individual Pages or Posts
Now that you’ve got the box set up on a site-wide basis, let’s add controls for a specific page.
Open a new page (or post, its up to you), and scroll all the way down to the “Multimedia Box Options” meta box.
Here you have the choice of specifying an alternative to the default Multimedia box behavior. If you leave this space blank, you are basically telling Thesis to display the default content in the box.
You can choose to display images, videos, or custom code just like you can with the site-wide options.
In this case, let’s go ahead and add a video. Grab some embed code from YouTube. It should look something like this:
<iframe width="280" height="187" src="http://www.youtube.com/embed/jbn3rOPmR9w" frameborder="0" allowfullscreen></iframe>
Copy and paste your embed code into the appropriate field, add a title and some content to your page, and click publish.
That’s it. You’re done. Now this particular page will display the video while the rest of the site displays the AWeber form you set up earlier.
You can use your imagination and use the box to accommodate whatever needs you have for your sidebar content both on a site-wide and page-by-page basis.
Styling the Multimedia Box
Last but not least, you need to make sure you style the box appropriately. Thesis gives you design options to control this.
You can change background colors for the different content types, font and font size. This is fairly self-explanatory.
Of course, if you’re a ninja, you can add your own custom styles using
I haven’t asked you to write a single line of code, and you’ve got yourself a nicely positioned conversion machine!
Of course, you can place whatever you want in the box. If you’re a true Thesis ninja, you can use thesis_hook_multimedia_box to do some really fancy stuff.
- Add A Tweet This Post Box To Your Thesis Post Footer
- Introduction to Custom CSS in Thesis
So, we've installed Thesis, and we've figured out how to add custom elements to our…