Site icon David Boles, Blogs

Rotating Image Header Tutorial for WordPress.com

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”

http://photomatt.net/scripts/randomimage

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.

Enjoy!

Exit mobile version