ADVERTISEMENTS
  • Aida Jolie
  • JonLee
  • Site Hoppin


    • ADVERTISEMENT
  • Text Link Ads


    • ADVERTISEMENTS
     Rolex Daytona Rolex Daytona Rolex Daytona

  • Sponsored Ads

  • Recent Readers

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. 

Posted in Talk, Wordpress 

comments


Maybe You Missed These Posts:

21 Responses to “Wordpress Rotating Header Images no Plugins”

  1. meditation

    i don’t like rotating header images… they are not so impressive..

  2. Goyin

    rotating header messages are way cooler than the other thing I knew about, which was rotating blog slogans.

  3. Shaun Carter

    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.

  4. Izabael DaJinn

    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.

    *iza

  5. John Kain

    Thanks for sharing the tip been thinking about adding this tip.

  6. steve

    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!

    –Steve

  7. drunk driving

    Great article! Rotating headers are awesome. They are huge eye catchers. Thanks again for a well-written guide.

  8. Luka

    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 :)

  9. Unkle

    I always use javascript for this, take a look at http://www.dyn-web.com/javascript/rotate-img/

  10. Matt Keegan

    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.

  11. This Weeks Ma.gnolia Bookmarks | Lee Rodrigues, M.Ed.

    [...] Wordpress Rotating Header Images no Plugins | Ja Kel Daily » Geek Talk Personal Blog, SEO Tips, Blo… [...]

  12. Eli

    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?

  13. Pablo DiCiacco

    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.

    Pablo

  14. bubata

    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’!!!

  15. bedding

    So Lucky That I found your blog and great articles. I will come to your blog often for finding new great article from your blog. Thank you

  16. Jason

    I have looked everywhere for something that works and I finally found it!
    :)

  17. Steve Morris

    Great tool , by the looks of it, it should work on any CMS or blog

  18. r4 ds

    Thanks – I hope it keeps working great for all!
    one question though – I thought iframes are bad for seo?

  19. Jan Messersmith

    After fiddling for a long time trying to get rotating headers to work on my Black Letterhead theme Wordpress site (http://www.messersmith.name/wordpress) I did your little trick here and got it going in about a half hour.

    Thanks very much.

  20. London Web Design

    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.

  21. Sam Chung

    This is very cool but how can you make it rotate in seconds rather than upon refresh of the page?

Leave a Reply