WordPress Rotating Header Images no Plugins

The first time that I saw rotating header images was on Chris Pearsons personal blog Pearsonfied.com and I really liked the feature a lot. If you do not already know Chris is the man responsible for the well designed Cutline WordPress Theme that actually comes with an implementing tutorial for adding the rotating image headers including the images. This may be the answer you’ve been looking for if you do not mind changing your entire theme just to get image rotations up top.

Anyway since I do not want to change my entire theme and with a little from my friend Google I was able to locate quite a few methods in which to accomplish the fabulous image rotation. As always I will only be explaining the route that I choose for my site. If you are interested in some possible plugin solutions you can find a few at Lorelle’s site. 

Unfortunately for the novice I did not decide on a WordPress plugin this go around and instead I with some good old code manipulation. Given the fact I am not an expert by far in the department of; php and css it took a little time to figure out how to make this work with my theme.

Rotating Header Images Step 1:

  • Copy the php code here (below rotator apart header)
  • Save it to notepad
  • Save the file as rotator.php
  • Open your FTP program
  • Make a new folder (random)
  • Upload the rotator.php to the random folder
  • Find images now that meet header height & width
  • Upload those images to the random folder

Rotating Header Images Step 2:
The coding if your using the Misty theme your in luck because that is what I use and I have already figured out the coding to make this all work.

Go to your style.css file in your dashboard and you have to find out what attribute your theme uses to place your header image and you have to place the URL to the random folder which has the images and the rotater.php file. Once again if you are using the Misty them then just find #headerimage and copy the code below.

#headerimage {
clear: both;
background: #fff url(http://jakeldaily.com/random/rotater.php) no-repeat 0 0;
margin: 0px;
color: #fff;
height: 175px;

Congratulations to those of you that have finished this task and successfully made it work for your theme. I must admit immediately after I got it to work with my test images I went directly to Flickr and starting stealing images to put into my new rotation. Then thirty minutes into my image stealing frenzy I realized something! This is my personal blog and why am I putting other peoples pictures into the image header focal point of the site.

A light blub went off at this moment and that is when I decided to start looking through my personal travel pictures and use them (travel date & place right hand corner) in my rotating image header. My intentions are to have ten images in total in the next few days and at the moment I have six to include; Ferrari Vegas, Venice Italy, Attre Belgium, Bognor Regis UK, Maldives, and Alicante Spain.


21 thoughts on “WordPress Rotating Header Images no Plugins

  1. Shaun Carter says:

    That’s pretty interesting about rotating headers. I didn’t realize they were out there, but it makes sense to keep a site looking fresh and keeping everyone’s eyeballs from going content blind.

  2. Izabael DaJinn says:

    I think it was worth the trouble. It’s so eye-catching when I stop by and see a completely different header. Most blogs are too static up top…mine included if you go straight to the typepad part at least.


  3. steve says:

    Love this idea. I’m looking for a way to display a different header for my most popular categories. Just need some time to sit down and work my way through the code…

    Thanks for posting!


  4. Luka says:

    Thank you for this. I have been looking for good addon like this one a while a go. Eye catchy thing, what else can I say 🙂

  5. Matt Keegan says:

    I appreciate this information. I’m looking to implement a new theme for one of my blogs and have been taking a look at various headers. Some I like, some I don’t. believe rotating headers can be a “fresh” way of refreshening any site without making other changes to it.

  6. Eli says:

    How do you set how long the image is displayed for? Can you set it to rotate every say, 5 seconds, or doe need some plug in for that?

  7. Pablo DiCiacco says:

    Of course you can always call the image location as
    ( ) after setting things up as you describe.
    Matt calls it “rotate.php” not “rotator.php”

    If you look at my site you’ll see a customization of its usage.

    Oh… there is no CSS involved in any of this.


  8. bubata says:

    Thanks a lot man!!! You saved the day – I was stuck on fixing header rotating images for a client for a week already, did try Header Image Rotaor Pro + Image Rotator Pro (which seemed incompatible with the theme I had to refurbish… although those plugins had worked for me perfectly well in the past…).

    Anyway, your explanation of the process is great, it worked straight ‘out of the box’!!!

  9. London Web Design says:

    Great article.visited your site for first time today,but i must say your write is of top notch and i will surely frequent your site. I agree with the majority of it, it seems to make sense. I would like to say thank you for sharing this cool article.

Comments are closed.