Rotating random text on every post or page

If you look at the header in this site you’ll notice that every time you go to a new post or page, the quotes in the header at the top left keep changing.  You can do this with any type of text.  To put it in the header you can follow this tutorial…

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

Tagged as: absolute postitioning, random, rotating random text, text, thesis, wordpress, wp, z-index