How To Make A Rotating Header Image In Thesis

When Chris Pearson, the creator of Thesis, recently redesigned Pearsonified.com on Thesis, he did something amazingly cool: he put rotating images in his header area.

Well, I was so inspired by his design that I wanted to figure out how he did it. It turns out that putting rotating images in your header is extremely easy.

On the backside.

Well, let’s get started. From the WordPress Dashboard, go to Thesis Options -> Design Options -> Feature Box.

In this tutorial, I am setting the Feature Box to “Full Width Above Content And Sidebars.” It is completely up to you whether you chose to show the rotator on every page or just the home page.

The Code

Let’s start with the Custom.CSS. I just want to warn you right now: THIS IS SUPER EASY!

Copy and paste the following into your Custom.CSS:

.custom #feature_box { padding: 0; border: none; }
	.custom #feature_box img { display: block; }

Wow! That’s it, folks. Ok, now let’s knock out the Custom_Functions.PHP part of this. Again, don’t be shocked when you see how unbelievably simple this is.

function header_rotator() {
echo thesis_image_rotator();
}
add_action('thesis_hook_feature_box','header_rotator');

Seriously, that is all. Unreal how simple that is, isn’t it?

Purchase or Upgrade to the Thesis Developer’s Option Today!

Add an Anchor Tag

Let’s say that you want to add an anchor tag, <a>, around the rotating image. Simply put this in your custom_functions.php file instead of what’s above:

function header_rotator() {
?><a href="http://addressgoeshere.com"><?php
echo thesis_image_rotator();
?></a><?php
}
add_action('thesis_hook_feature_box','header_rotator');

Just add the address you want to link to, and call it a day

What about the images?

To get the images to line up perfectly you need to know the width of your site. If you use the Firebug plugin for Firefox or Google Chrome, you’ll have no problem finding out the width. Just remember that if you have page padding (as in the <div class=”page”>), you need to exclude that from the width calculation.

Also, I recommend making the images the same height so that the layout doesn’t shift on refreshes.

Oh, yeah. Don’t forget to Upgrade to the Developer Option! You will never regret it!