We’re going to rotate the images with a little php code. In order to do this we need to first prepare the images to be rotated by renaming them. Get all the images to be rotated and rename them with numbers. This works with png, jpg, gif, tiff, etc. For example…

image1.png
image2.png
image3.png

OR

image-1.png
image-2.png
image-3.png

OR

1.png
2.png
3.png

You get the idea? Get all the images you want rotated in a group, rename them with numbers starting with 1, increment by 1, and proceed in order to the total number of images in the group

Upload all the images to the proper directory

Let’s say, for example, you uploaded the images to a folder named “random”. You are using the image-n.png format where n equals the number of the image. Here’s the path that we’ll use for this example…

<img src="http://www.yoursite.com/folder/random/image-n.png" />

Now here is the php code that is going to replace n with a random number from 1 to the total number of images there is, in this case, 3

<?php echo rand(1,n); ?>

The whole code comes together like this…

<img src="http://www.yoursite.com/folder/random/image-<?php echo rand(1,n); ?>.png" />

That’s about the simplest way to get random rotating images

First, download the Random Quote plugin here and follow the directions from their website to install it

If you have the Thesis OpenHook plugin installed go the “header” box and drop this code in…

<?php
wp_quotes_random();
?>

Make sure to check the box to run PHP

You can drop that code in any box in the Thesis OpenHook plugin

Next go to WP Admin area—>Posts—> Qutoes and follow the directions to add your own custom text

If you not using the OpenHook plugin, in your custom_functions.php file add this code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*random text on every post or page*/
function name-your-function () {
wp_quotes_random();
}
add_action: (’thesis_hook_header’, ‘name-your-function’);

You can add this any place else, use the hook map to see your options

An important note about the header in Thesis Hacker.  It contains clickable image maps and to give you a theory of how I built it go here.  This is important for this particular way of placing this plugin.  You can place this plugin anywhere you want on your site but to put it in a header that has clickable image maps this is a great way of doing it…

Here’s the code I put in my custom_functions.php file

function my_function() { ?>
<div id =”imagemap_header” ><img src=”<?php bloginfo(’template_directory’) ?>/custom/images/thesisheader2.png”  alt=”clickable header” />
<ul>
<li class=”title”>
<a href=”http://www.thesishacker.com/” title=”take me back to the home page”></a>
</li>
<li class=”rssfeed”>
<a href=”http://www.thesishacker.com/?feed=rss2″ title=”Join and learn”></a>
</li>
<li id=”wp_quotes“></li>
</ul>
</div>
<?php }
remove_action ( ‘thesis_hook_header’,'thesis_default_header’);
add_action (’thesis_hook_header’, ‘my_function’);

All i did was add another list item or li to my old header function, and gave it an id of wp_quotes

Here’s what I put in my custom.css file…

.custom #imagemap_header {
width: 950px;
height: 190px;
position: relative;
}
.custom #imagemap_header ul {
margin: 0;
padding: 0px;
list-style: none;
}
.custom #imagemap_header .title a {
position: absolute;
width: 493px;
height: 140px;
top: 47px;
left: 235px;
}
.custom #imagemap_header .rssfeed a {
position: absolute;
width: 120px;
height: 33px;
top: 136px;
right: 50px;
}
.custom #wp_quotes {
position: absolute;
width: 10em;
z-index: 1;
font-size: 155%;
font-style: italic;
}

Again, all I did here was to add the last chunk of code to my existing styles for my header.  I gave #wp_quotes a position of absolute so that I could move it around freely within the #imagemap_header. I gave it a z-index of 1 so that it would lay on top of everything else and not be cut off  if I moved it close to the thesis hacker image field or the subscribe image field.

For more on the z-index go here

For more on absolute positioning go here