Wordpress Rotating Header Images no Plugins

The first time that I saw rotating header images was on Chris Pearson’s 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 people’s 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.