Whether you want to present random ads or random pictures, displaying areas of random content is a great way to keep your site fresh and encourage eyes to flow to different areas of your layout as elements move and change from page to page.
There are also some great randomness plugins out there that can be used in conjunction with the random content basics in this article to achieve some really attractive specimens of random content generation.
‘Random content’ can mean several different things
If you have a spot where you’d like a random image from a particular folder displayed, for example, this is what I consider to be an area of random content.
There is also serial randomness. An example of serial randomness would be to have your homepage split into paragraphs that are then displayed in random order. All the content appears, but in a random order.
Areas of random content
Let’s say you want to display a random image at the top of your sidebar to keep your blog pages visually stimulating. In this case the area of random content is in the sidebar, so we’ll edit the sidebar.php (or similar) to include the code for our random image.
Both rotate.php and the Random File plugin are great ways to easily include random files from a folder. This way you could have a folder for each of your random content areas. Adding new files to these random content folders automatically includes them in the rotation.
Including areas of random content in WordPress themes
Serial Randomness
Serial randomness is especially useful when displaying a body of information in which every component needs to be displayed, and where the order is either not important or where randomness is desired.
For example, a business web site might have a services page where each paragraph describes a particular service. We want to display all the service types but also realize that changing up the order of services would make the home page much more appealing for returning customers.
Creating serially random ad blocks
Let’s say you’ve got 2 or more ad blocks. And like in the example above, you want every page view to display every block in the group, but you want the display order to be random.
In this example we’ve got 2 adsense ads of different color schemes running vertically in our sidebar, one is orange ad and the other is green. We want the sidebar to display them in green-orange order about half the time and orange-green order for the other half of page views.
We can accomplish serial randomness using a bit of CSS, HTML and a simple random content script. You can place similar code into your sidebar or whereever you want to display random content.
The Code
Each ad is surrounded by a div with a matching CSS class (that will be inserted in the rotate script below) to handle the rotating, as well as a unique class so we can style them differently like so:
.green { background-color:green;}
.orange { background-color:orange;}
.green, .orange {-moz-border-radius:20pt;}
</style>
<div class=”group1″>
<div class=”green”>
<!–green google adsense ad code–>
</div>
</div>
<div class=”group1″>
<div class=”orange”>
<!–orange google adsense ad code–>
</div>
</div>
Once we have our script in place this code will generate 1 google adsense ad that may be orange or green. Using the unique CSS classes .orange and .green, we can give our adense ads nice matching backgrounds as shown in the style code above. The -moz-border-radius:20pt; style definition will give us nice rounded corners on our adsense ad backgrounds.
The Script
Important! Before the code will display random content, we must hook it up to a random content script like this one from dynamicdrive.com.
Put the following code between the <head></head> section of your theme (probably in header.php or similar):
<script type="text/javascript">
/***********************************************
* Random Content Order script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function randomizeContent(classname){
var contents=randomizeContent.collectElementbyClass(classname)
contents.text.sort(function() {return 0.5 - Math.random();})
var tbodyref=contents.ref[0].tagName=="TR"? contents.ref[0].parentNode : new Object()
for (var i=0; i<contents.ref.length; i++){
if (tbodyref.moveRow) //if IE
tbodyref.moveRow(0, Math.round(Math.random()*(tbodyref.rows.length-1)))
else
contents.ref[i].innerHTML=contents.text[i]
contents.ref[i].style.visibility="visible"
}
}
randomizeContent.collectElementbyClass=function(classname){ //return two arrays containing elements with specified classname, plus their innerHTML content
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
var contentobj=new Object()
contentobj.ref=new Array() //array containing references to the participating contents
contentobj.text=new Array() //array containing participating contents' contents (innerHTML property)
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1){
contentobj.ref[contentobj.ref.length]=alltags[i]
contentobj.text[contentobj.text.length]=alltags[i].innerHTML
}
}
return contentobj
}
</script>
To display random content from more than one group simply define an additional css class with the same value of visibility: hidden;
Mix and match random content types for creative wordpress theme layouts and split testing
You can combine both serial randomness and random content areas and get some great results to keep your WordPress theme presentation fresh, but also for more productive purposes like split testing different ad types or styles to see which are more appealing / successful.
