UPDATE:  December 9, 2010
This morning, we removed the rotating headers from all 13 blogs in the Boles Blogs Network because calling all those remote images was significantly adding a lot of page load time for our articles.  We’ve gone back to using a single header image for each blog hosted here on WordPress.com, and we hope you’ll notice, and appreciate, the speed gains.  This tutorial is still valid as of this writing, so if you’re still interested in remotely serving called image headers for your blog, the information here should still be valid.

ORIGINAL ARTICLE:
After reading a keen blog post from Automattic’s Nick Momrik — concerning new default image headers for the WordPress.com Twenty Ten theme — I decided to see if I could get my Cutline Rotating Image Header Tutorial working with the new, default, Twenty Ten theme we are currently using for the Boles Blogs Network here on WordPress.com.


I’m delighted to report that — with Nick’s exquisite help — we were able to get the rotating image headers working for all our network blogs!

Here’s how we did it…

There are three things you will first need to set up if you want rotating image headers to work on your WordPress.com blog using the Twenty Ten theme:

1.  The Custom CSS upgrade.

2.  The Random Image PHP file from Matt Mullenweg’s website.

3.  An outside web server you can use to upload that rotate.php file and to store the images you want to rotate.

If you have all those things ready, we’ll begin the tutorial.

The first thing you need to do is to enter the Admin area of your WordPress.com blog.

Go to APPEARANCE | HEADER and look for this option to “Remove Header Image.”

Click on the button to get rid of the current image your blog is using.

Next go to APPEARANCE | EDIT CSS and copy and paste the following code in the edit window.

#site-title a {
color:#FFF;
font-weight:bold;
text-decoration:none;
}

#site-description {
clear:right;
float:right;
font-style:italic;
color:#FFF;
width:220px;
margin:14px 0 18px;
}

#branding {
border-top:4px solid #000;
border-bottom:1px solid #000;
clear:both;
height:198px;
width:940px;
display:block;
background:url('http://YourDomain.com/YourImagesDirectory/rotate.php');
}

#header_img img {
visibility:hidden;
}

Those options will style your blog in the following ways:

1.  Your Blog Name (Site Title) and Tagline (Site Description) will appear on the banner image and not above it.

2.  Your Blog Title and Tagline will be in a white font instead of black.  White is easier to read using a darker image header.

3.  Make sure you replace “YourDomain.com” and “YourImagesDirectory” with the specifics for your remote server.  Don’t forget to upload the rotate.php file and your header images you want to rotate to your server.  Image headers must be sized 940×198.

When you’re satisfied with your CSS code, choose the “Save Stylesheet” option — and view your blog!  Hit Reload or Refresh and test your setup to make sure you get a different image every time.

Here’s an example from our Boles Blues blog showing how rotating images can look and feel:

Every time a visitor reloads a page on your blog, the image header will change.

Beware that different browsers load image headers differently.  Safari will keep an image header in place as you page through and read a blog.  Firefox will load a new image header every time you click to read a new page.

You can always force your browser to show a new the image header by using SHIFT+REFRESH or SHIFT+RELOAD.

That’s it!  You’re all set and ready to go.

You might want to add an .htaccess file to your rotating image header directory to prevent unauthorized use of those images.  If you don’t employ that security method, devious others might look at your raw HTML code and call your images and rotate.php file for loading on their blog or website.

Let me know if you have any problems with this rotating image header tutorial for Twenty Ten, and I’ll do my best to help troubleshoot them with you.

If you want to change the look and feel of the fonts on your blog using the Twenty Ten theme, make sure you read my Typekit Fonts Tutorial for WordPress.com.

21 Comments

  1. Oh, gosh, I super love the image changing, David. They are fun to look at and enjoy. Keep up the tutorials.

    1. Thanks for the good energy, Anne! I, too, love the rotating headers shared between all the blogs. It makes for a good and unified effect.

    1. Thanks, Gordon! It wasn’t as easy as one might think to get it all rotating. Nick did some excellent support work to help make it happen.

  4. Hi there , it seems as though none of my images are loading ?

    i copied the coding from the randomimage site into a file called rotate.php. this was uploaded with my images in a folder called header in the root directory, i also removed the banner from my site, and added the css.

    any help would be appreciated , my site is http://www.theemporio.co.uk

    thank you

    1. Hi zubair04 —

      My tutorial is for blogs hosted on WordPress.com. The blog you list is a self-hosted WordPress.org blog, and I am quite certain the CSS is not the same since the WordPress.com staff has to fix a few CSS issues in the WordPress.com backend to get this working for me.

      You might want to try the WordPress.org forum for help:

      http://wordpress.org/support/

      Or, perhaps even easier for you — try installing the third party plugin that will rotate image headers for Twenty Ten for standalone installs like yours:

      http://hungrycoder.xenexbd.com/scripts/header-image-rotator-for-twenty-ten-theme-of-wordpress-3-0.html

      Good Luck!

    1. Hi Simon —

      Are you using Safari for Mac or Windows? I’m on a Mac and the rotating headers work for Safari, Chrome, Opera and Firefox.

      Are you running any Script blockers or Ad blockers?

  7. Pingback: Pronouncing the Year | Memeingful

  8. I’ve been using rotating images on my blog for the past few months but after I upgraded to wordpress 3.1.3 all I get now is an empty box. I’m not sure why this happened especially since I’m even using a child-theme so I can’t figure out what happened. Any ideas?

    1. Hi Jason —

      I host my blogs on WordPress.com now, so I’m unable to help you troubleshoot this since I don’t have access to a standalone WordPress installation. Have you tried the WordPress.org forums?

      1. I did read a little up on it and it sounds like they are trying to include rotating header images as a customizable feature for their next big update. I ended up just downgrading to 3.1.2. and I’m going to wait until it comes out to upgrade. It might be one of those limbo glitches I guess that comes up. I’m going to wait a couple days and google it again since the update is so new. The bad thing is, I put the rotating script in so long ago I can’t even remember how I got it to do what it’s doing – eek!

        1. That’s good the rotating image headers will be included in the next upgrade. It’s a nice feature to have if you want to spend the time really customizing the look of your blog. Good luck and let us know what happens!

          1. Looks like they got it up and running! It works pretty smoothly, although you have to upload each header image separately so if you have a lot of pictures it looks like it will initially be time consuming but it’s nice that it’s built into the wordpress system instead of having to use a code. I’ve been playing around with it a bit and I haven’t had any problems as of yet!

  9. Pingback: How to Migrate Your Blogs from WordPress.com to WordPress Multisite on Pair Networks VPS | Panopticonic
  10. Pingback: Boles Blogs Browser Wars: Chrome vs. Firefox vs. Safari « Boles Blogs

Comments are closed.