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:

  1. The vast majority of my clients place sign up forms for e-mail newsletters at the top of the sidebar.
  2. 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

multimedia box options

Hint: its on the right

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:

<script type="text/javascript" src="http://forms.aweber.com/form/99/99999999.js"></script>

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.

single post multimedia box options

Keep scrolling...I promise its down there

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

multimedia box style options

Look in the center column

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 custom.css.

Bonus Info!

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.

Enjoy!

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Adam Baird

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. He writes web design tutorials and resources on Theme Big. Check out his custom work here.

Leave a Reply

Comments

  • Airbrush says:

    Thanks big time. I never considered it a big issue but i learnt lot from your writing.

  • SonDan says:

    Thank you so very much for the clear explanation on how to use the Thesis Multimedia box. Without any written instructions, learning how to best use Thesis has been a trial. This post has been an excellent tutor on the multimedia box and is most appreciated.

    Happy Thanksgiving!

  • chiropractor says:

    can you please tell me how to customize the feature box in thesis_18? specially when i changed it in custom-functions.php . the error comes and i’ll have to change this file from my cpanel.

  • carol says:

    Brilliant!! So easy and straight forward… Thanks a million