Random Image Header Tutorial

  • Author
  • #41196


    I just received a Dashboard notification that my database would be unavailable for the next five hours for maintenance – so if you can’t hit my site to test out the validity of this tutorial… give it five hours.

    I am running the CUTLINE theme and I want rotating image headers as I had when I was running a standalone WordPress blog just because it’s neat and just because I miss it and just because I want to see if I can make it happen here.

    I made it happen here and here’s how I did it:

    1. You must have the Custom CSS available for your blog.

    2. You must have access to another website or server to upload your images and a PHP script.

    3. You must know the proper CSS code to use to call a remote image header.

    4. Go to Matt’s site and copy and paste the “rotate” code found on his page and save it as a file called “rotate.php”


    and if you don’t know how to create a PHP file from that page then don’t try to do this header customization.

    5. Create the header images you want to use to match the size of your header.

    6. Upload those image files and include the “rotate.php” script in the same directory on your outside web server.

    7. Edit the CSS code for your header here at WordPress.com to call “rotate.php” instead of an image name – that PHP file is your image because it calls up your images. Be sure to save your customization.

    8. Click SHIFT+REFRESH/RELOAD on your browser to clear your cache to see the image headers change on your blog. The speed of the change depends upon your remote server, your internet connection and the size of your header images.

    9. You can see this in action on my WordPress.com blog: http://urbansemiotic.com




    unavailable in five hours ;-)



    btw you can rotate any part of your stylesheet by the clock if you are using Sandbox and Custom CSS. Check out the body classes.



    Hi Andy!

    Yes, Barry just corrected me on the time thing.

    I have no idea what you’re talking about with clocks and Sandbox and rotating parts!



    The Sandbox theme adds classes to the body element. Some of those classes indicate the time of day: h20 means it’s 8pm.

    body.h20 #header { background: url(8PM.jpg) }



    Wow! Love that! Where do I hire someone to code me up a Sandbox theme?

    So would you want to rotate a header in Sandbox based on time or on someone actually loading up a page?


    body.m11 #header might make it seem more random.




    Before this fix I was manually changing the file name for the header every day in my CSS setup. Now the image changes automatically throughout the day without me.

    Calling remote header images also lets you control the file size and quality of the image you’re loading.



    sunburntkamel: m is for month



    Oh, and another good thing about these rotating headers is if one of your readers hates the image, they can just force a refresh and get a new look.

    I call that “Refresh Roulette.”

    This method gives the reader a bit of control over the interface and some of my readers try to keep a header image they like in their cache without having it replaced.



    *lol* And do you have on offer on your rotation one basic black or one bright white non-image header for the non-conformists? (just kidding). ;)



    Ha! I love that, timethief!

    You got me to thinking… I should create a “BANG!” image header — to make the “Rotating Roulette” concept come full circle for those who dare to play.



    Okay, here’s the BANG! image I created for my headers rotation.

    You see it, you lose the “Rotating Roulette” game:


    I haven’t seen it yet. I have a very high score.



    Friendly reminder that Staff and Moderators are the ones who should be policing the forums here. :)



    Does this still work?

    I didn’t use the exact script, but a

    #header {
    background: #fff url(‘http://h1.ripway.com/scrambled23/random.php’) bottom center no-repeat;

    doesn’t do anything. Just a white space.



    drmike says:

    Actually you couldn’t even do it with regular wordpress actually unless you put the blog with a frame of some sort and wrapped the theme and the header around it. The slideshow would reload on every click and start over.




    scrambled is trying to do something else.



    o.O … Oh sorry.


    Hey, I got this working…sort of. Your recipe works as described as long as I don’t use a free PHP web host. I tried it with my own ISP…no problem…works like a champ. I tried it using joolo.com and freephpwebhosting.com and all I get is blank space. I’ve been thinking about giving up the ISP, so I’d like find a free option. But I really like the random header image. Any insights?



    Let’s start with this please. This is the url for your wordpress.com blog http://cronkchronicles.wordpress.com/ and it is free hosted by wordpress.com.

    If you link your wordpress.com username to your wordpress.com blog then we can click on your username and see what you are talking about.

    This support forum is only for those with blogs hosted by wordpress.com.

    Have you purchased the css upgrade for your blog?

    If you have a specific question about your wordpress.com blog then would you please restate it?

The topic ‘Random Image Header Tutorial’ is closed to new replies.