The problem
As I said, I wanted to be able to display a group of 4 premium WordPress themes in the footer of WpRecipes. Nothing hard with this. But, I also wanted to be able to add as many themes as I’d like. Nevermind how many themes I added, only 4 must be displayed at the same time.
And of course, I wanted this script to be easy to maintain: I don’t have time to loose each time I’ll want to add a new theme.
The solution
After thinking a bit, I came up with the solution of a rotator which will take X items, sort them randomly and pick up 4 of them for being displayed.
To achieve this, I will create a php array which will contains another array for each item, with infos as such as title, image and url.
Each item will be displayed with a html unordered list, which will allow us to use css to control the display and give our item the look and feel we want.
The code
Here’s the code used. You just have to paste it where you want the ad rotator to appear. Or even better, you can create a function with it.
<?php
$themes = array(
array( title => "ambience",
img => "wp-content/uploads/themes/ambience.jpg",
url => "http://www.wprecipes.com/freshnews.html",
),
array( title => "real estate",
img => "wp-content/uploads/themes/realestate.jpg",
url => "http://www.wprecipes.com/realestate-theme.html",
),
array( title => "wpvybe",
img => "wp-content/uploads/themes/wpvybe.jpg",
url => "http://www.wprecipes.com/wpvybe.html",
),
array( title => "freshnews",
img => "wp-content/uploads/themes/freshnews.jpg",
url => "http://www.wprecipes.com/freshnews.html",
),
);
//It will me much better with a foreach loop here, someone submits the code?
$rand_keys = array_rand($themes, 4);
echo '<a href="'.$themes[$rand_keys[0]][url].'" target="blank"><img src="'.$themes[$rand_keys[0]][img].'" alt="" /></a>';
echo '<a href="'.$themes[$rand_keys[1]][url].'" target="blank"><img src="'.$themes[$rand_keys[1]][img].'" alt="" /></a>';
echo '<a href="'.$themes[$rand_keys[2]][url].'" target="blank"><img src="'.$themes[$rand_keys[2]][img].'" alt="" /></a>';
echo '<a href="'.$themes[$rand_keys[3]][url].'" target="blank"><img src="'.$themes[$rand_keys[3]][img].'" alt="" /></a>';
?>
Adding a new item
Adding a new item to the rotator is very easy. You just have to add a new ellement to the $themes array:
array( title => "Item title",
img => "image url",
url => "url",
),
Usage and demo
A “live demo” of this code can be found on the footer of my other blog WpRecipes.
I chose to use this code to display an inline selection of premium WordPress themes, but you can use it for many others usages, as such as displaying 125*125px ads, or create a rotating blogroll for your WordPress blog.
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
28 Comments
One more great wordpress hack
. Thanks… Ad rotators are very useful and many are in need for them. And this is really easy and effective code solution for them.
To be honest, I’m surprised that code actually works for you. Here’s a cleaner version:
1 “ambience”,
3 “img” =>”http://www.wprecipes.com/wp-content/uploads/themes/ambience.jpg”,
4 “url” =>”http://www.wprecipes.com/ambience.html”,),
5
6 array(”title”=>”real estate”,
7 “img” =>”http://www.wprecipes.com/wp-content/uploads/themes/realestate.jpg”,
8 “url” =>”http://www.wprecipes.com/realestate-theme.html”,),
9
10 array(”title”=>”wpvybe”,
11 “img” =>”http://www.wprecipes.com/wp-content/uploads/themes/wpvybe.jpg”,
12 “url” =>”http://www.wprecipes.com/wpvybe.html”,),
13
14 array(”title”=>”fresh news”,
15 “img” =>”http://www.wprecipes.com/wp-content/uploads/themes/freshnews.jpg”,
16 “url” =>”http://www.wprecipes.com/freshnews.html”,)
17 );
18
19 shuffle($themes);
20 foreach($themes as $theme){
21 ?>
22 <a href=”" target=”blank”>
23 <img src=”" alt=”" border=”0″/>
24
25
You had a great start and I wouldn’t have fixed it up without your inspiration, but here’s what I did:
1) The image URLs in your original array were not URLs. If you paste those into your browser’s address bar, they will NOT show the image. For the image URL you really want, right click the image and hit “view image.” Then use the URL that is displaying in your address bar once you’re only seeing the image on the page.
2)I’ve never heard of array_rand() before today so thanks for the introduction! However, “shuffle()” is a much easier option here. It simply rearranges the items inside the array randomly every time the page reloads. That makes your foreach loop a TON easier to write =D
3)Since you’ve already got the “title” for each item, I figured it would be good SEO just to toss it into the “alt” on each image. ALWAYS fill in that alt/metadata!
4)I got rid of the “echo” statements and replaced them with “”. That essentially tells the browser “just print out whatever is between .” It’s really just my personal preference, but I think it’s easier to understand than echo statements and you won’t ever have to worry about using “\” as an escape character =D
if you want, you could simplify this file by putting the $themes array into its own file and including it in this script with:
#include_once(”themes_array.php”);
at the top of the file. That would be good in the case that you add a lot of other themes into your rotator.
You can check out a working version of this at http://samasmith.com/php_rotator/
it’s 10 ’til 9 in the morning, so thanks for the mental exercise and waking me up this morning!
awesome site =D
you know…this is a perfect example of how A) code is always under revision and B) how code you meant to be quoted literally ends up being interpreted by the browser…
I’ve updated that code a bit and included it in a textfile for anyone to see/use. it’s at
http://samasmith.com/php_rotator/rotator.txt
demo still at: http://samasmith.com/php_rotator/
2 fixes to that last comment of mine:
1) That code doesn’t limit the rotator to 4 items displayed, so line 20 now limits that number. You can add more or less easily.
2) That original code put spaces between the images which showed up as links so i just condensed the tags.
I promise I’ll stop spamming your lovely post now =D
@Sam Smith: Thanks for sharing code & infos! I have to admit that this code isn’t fully optrimized, but your precious infos helps me to make it better
I tested the code, it is a bit messy but it works fine! Thanks!
This code just comes in handy. I was looking for plugins to rotate my ads but I guess this code will do the trick as well. Thanks for the great information again.
Wei Liang
I have been searching for a code like this without using a wp-plugin. I like what I see so I’m going to give it a try on my blog.
there is really a plugin for this ad rotator offered by maxblogpress.. but this thing, the code which is detailed here is really a big help especially when there are many advertisers on your website/blog..
is there any code or any plugin for wordpress that can do the same thing to adsense ads?! something like “adsense ads rotator”…
thanks for ideas and sharing this info
@daiLyFeed
This could work for adsense with very little modification. The great thing about a script like this is that you can put anything you want in the initial array and it will be rotated out. So, instead of having information about different themes, like in this example, the array could simply be loaded with the HTML markup that google gives you for adsense. =D And of course, as long as you aren’t displaying too many ads or changing THEIR code, you won’t be against the google TOS.
Very nice idea. With slight modification, I think I can apply this to my site for other purpose.
Thanks!
Thanks, this couldn’t have come at a better time. I was using a horrible wp plugin to rotate my banners, but this is so much cleaner and as far as I can tell works 100% of the time. I made a few changes to make it split 2 300×250 banners on my site at http://www.wow.zuggaming.com.
As always, thanks for sharing!
Coding your own rotator works well if you don’t plan to edit it often, but if you’re looking for something beefy then give OpenX a try. It’s open source and they offer a hosted option: http://www.openx.com
as if code posted on the internet ISN’T open source…
I’m already looking for a code like this without using a wp plugin.
Thanks for this simple ad rotator script and more thanks for Sam’s modifications on the same…
Going to put it right away on my blog. Been plannnig to increase the square ads from 2 to 4.
cheers,
Ajith
Found this article at the right time! Great stuff.
I think that it’s much better to create a class to handle all of this.
Thanks for the tutorial
Thats cool, wasn’t even looking for a script to change up ads or images, but could always use one!
I will try this code out tonight, thanks for sharing.
i am displaying 125*125 ads in my side bar vertically with 2ads horizontally.i see this code displays all together in horzontal.
how am i to customize this code for it make work me?
@BE Folks: Some css will do that
This is great information to know. Im going to bookmark this page and use it for further reference. I may have paid for someone to set up an ad rotator but it looks easy enough to setup. Thanks for sharing
Good info. For your use w/ the themes; however, I would suggest an ajax gallery type display with arrows on either site for visitors to scroll between all of the themes…
Great, I was looking for something like this to implement on my site. Thanks
I have been wanting to implement a rotating ad area on a blog of mine for a while now. I am going to try this out. Thanks for sharing your code.
I did something similar for a client but he had a lot of ads at different size and 3 places to put them (check out 72pkr.com) . Oh and he can’t edit php code every time there’s a new ad. So, we have 3 tables in db for 3 dif size, each row has the exact code for the ad, and a function that given the type of ad (1/2/3) and id of the page, echos the ads. The number of ads is set up in the admin panel for every page. The function selects n ads from the table with a select query, order by.. something random.. limit n.
Maybe someone else likes this idea.
I wrote an ad rotator (for 2 ads, could be enlarged with one line per ad) in five lines of php. Surely not what you did because I am taking the given adsense ads and don’t have to deal with image and url. But interesting for me as a normally non php person.
http://blog.natan.info/2009/08/28/monetizing-a-blog-rotate-adsense-ads-with-5-lines-of-php/
Regards
3 Trackbacks
[...] Click here to get the code you need to build this option into your WordPress blog. [...]
[...] reklamami w swoim blogu [jeśli takowy mamy stworzony na silniku Wordpressa] znajdziecie tu. Categories : PPC SEM Reklama internetowa | php/html/kodowanie | [...]
[...] How to: create an ads rotator with php [...]