We used to run the CUTLINE theme here on your favorite Urban Semiotic and I wanted to bring back our famous Rotating Image Headers that change with every fresh re-load of a page if you happen to be using that theme.

I figured out how to make it work and I wrote up a tutorial how to do this for the WordPress.com Forum and I’ll share those steps with you here now for the record:

1. You must have the Custom CSS available for your WordPress.com 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 right now by following the instructions in Step 8.



  1. I have no idea what you’re talking about but I do see different photographs showing up at the top of this page. Very nice!

  2. Hi Anne!
    Thanks for the comment. Yes, what you’re seeing is the image at the top of the page change. Each time you visit us you should get a whole new image to enjoy!

  3. Here’s a game called “Rotating Roulette” you can play right now.
    Force a refresh of this page to get a new image.
    I added a single “BANG!” image to the rotation cycle.
    Keep refreshing and if you see the “BANG!” image, you lose.
    The person with the highest image refresh count without seeing the BANG! image wins!
    Here’s what the BANG! image looks like:

  4. Adam!
    Welcome to Urban Semiotic! It is quite fine to see you here, my friend!
    Thanks for all your expert help in the WordPress.coom support forum.
    As for getting the “BANG!” on your first shot here — you are either the luckiest guy alive; or the most unfortunate.
    I have yet to get BANG!ed myself.

  5. How do I save something as a php without a server? can I use gravatar as my uploader? where do i save the rotate.php file? sorry im new to this

  6. Thank you so much for this post, I´m totally new at this
    and… I got it to work!!! however I would like for it to refresh
    more often, so it rotates faster. Is that possible? Thanks

    1. Hi Fatima —

      You can force a page to reload after a set amount of time — but not all browsers will reload the image header on a soft refresh. On a Mac, Firefox will always load a new header, but Chrome and Safari require a hard reload to load a new image header.

Comments are closed.