My current blog template (Grid Focus by Derek Punsalan 5thirtyone.com) features an icon in the upper right corner that has no personal meaning to me.
I decided to replace it, and while I was at it I would also make the icon a random icon. WordPress has all sorts of random image plugins — some are too powerful and some are not powerful enough.
Since I was going to have to modify the theme’s code anyway, I figured I would just code the random image generator directly and make it do exactly what I wanted it to.
Note: The classic video game icons I decided to use are from AlienEntity Free Icons and are used with permission.
In the theme’s Header file header.php there was this line to call put up the graphic icon:
<img src="<?php bloginfo('template_directory'); ?>/images/avatar.png" alt="Icon" />
I replaced that entire piece of code with a call to the function I was going to write:
<?php erics_random_header_image(); ?>
My erics_random_header_image() function would return everything needed to display an image. You don’t have to name your random image header function as erics_random_header_image(), but I like to do things like that when messing with other people’s code so that I can tell what parts I added (and know where to put the blame if something stops working).
Now to write the erics_random_header_image() function and put it in the Theme Functions file functions.php.
As you will see, I write very simple, straightforward code.
Version 1 more readable version
function erics_random_header_image() {
echo '<img src="';
echo bloginfo('template_directory');
echo '/images/';
$number = rand(1,3);
switch ($number){
case 1:
echo 'game-pac-man.jpg';
break;
case 2:
echo 'game-robotron.jpg';
break;
case 3:
echo 'game-atari-space-invaders.jpg';
break;
}
echo '">';
}
So step-by-step, this code echo’s back a complete “img” tag from the opening “<” to the closing “>”.
The icons are saved in the images subdirectory of the theme.
If you wanted to add more icons, you would make the rand(1,3) instead go up to whatever number of different icons you were using and then add a separate case: statement for each of them.
This worked, but I realized that there was a lot more I could do while I was at it.
Version 2 more readable version
First, I decided to cut out the call for getting the template directory. For this theme, it will always be:
https://www.ericshefferman.com/wp-content/themes/gridfocus
I also decided to put everything that the function returns into the case statement — that way I can make it do much more than just send back a random HTML image tag.
function erics_random_header_image() {
$location = '<img src="https://www.ericshefferman.com/wp-content/themes/';
$number = rand(1,12);
switch ($number){
case 1:
echo $location;
echo 'gridfocus/images/game-adventure.jpg">';
break;
case 2:
echo $location;
echo 'gridfocus/images/game-atari-space-invaders.jpg">';
break;
case 3:
echo $location;
echo 'gridfocus/images/game-defender.jpg">';
break;
case 4:
echo $location;
echo 'gridfocus/images/game-donkey.jpg">';
break;
case 5:
echo $location;
echo 'gridfocus/images/game-frogger.jpg">';
break;
case 6:
echo $location;
echo 'gridfocus/images/game-galaga.jpg">';
break;
case 7:
echo $location;
echo 'gridfocus/images/game-joust.jpg">';
break;
case 8:
echo $location;
echo 'gridfocus/images/game-maze-craze.jpg">';
break;
case 9:
echo $location;
echo 'gridfocus/images/game-pac-man.jpg">';
break;
case 10:
echo $location;
echo 'gridfocus/images/game-pong.jpg">';
break;
case 11:
echo $location;
echo 'gridfocus/images/game-robotron.jpg">';
break;
case 12:
echo '<a href="https://www.ericshefferman.com/to/pair_com_web_hosting">';
echo '<img src="https://promote.pair.com/125x125.pl"></a>';
break;
}
}
Again, I’m not trying to win awards for clever coding. I’m just writing something very straightforward and understandable — that’s the best way to reduce errors.
If you look at the above code, you’ll see that I decided to enable the function to send back any code I wanted to send back. This allowed me to make one of my #12 icon an ad for pair Networks – my hosting company and make it a clickable link.
Case #12 returns the graphic for pair and puts the graphic within a link to pair’s website.
Again, you can add more cases onto this code as needed, and also make it do more different tasks for each case statement (adding links, adding random text, adding random links, etc.).
—
If you’re wondering how I make a nice looking link like this…
https://www.ericshefferman.com/to/pair_com_web_hosting
…work, the answer is I use the MaxBlogPress Ninja Affiliate plugin for WordPress.
This plugin makes it easy to add clean looking links to your WordPress blog — but it does so much more than that. The plugin keeps track of how many times each link has been clicked, and it allows you to add on-the-fly subcampaigns — meaning that you can just add a “-” at the end of the link and any additional text and that link will be tracked separately!
For example:
(argh! these links are too wide and are getting cut off so I broke them into 2 lines, but obviously they need to be put as one line in order to be a working link)
The link above is
https://www.ericshefferman.com/to/
MaxBlogPress_Ninja_Affiliate_WordPress_Plugin
but the link from the banner is
https://www.ericshefferman.com/to/
MaxBlogPress_Ninja_Affiliate_WordPress_Plugin-banner
So that I can test whether people are more likely to click on the text link or the banner link.
But that’s just the beginning of what this plugin can do for you. If you are including a link in an email, just tack on a “-email” at the end of the already existing link! The software will handle it and track the clicks on it automatically.
You can do so much more — the best way to find out is to click the link above and look. I haven’t even begun to tap into the features.
Some ideas:
- You can change where the link points to at any time, so this link
www.yoursite.com/to/top_story
could be made to always point the the top story on your blog. Update where the link goes as needed.
- If you’re using it to promote an affiliate program and decide to switch to a different affiliate program, no need to change all your links — just change where the links go to.
- Your links show up with a nifty drop-down selector right in your edit post WordPress screen. No need to remember them, just click and pick.
- Plus all the usual useful things – changing the text displayed in the browser status bar, cloak your links, no-follow your links, and even more!
- And this doesn’t even begin to touch on the powerful AUTOMATIC keyword linking that can instantly insert affiliate links for keywords you choose across your entire blog.
There’s just too much for me to describe – go to the website and watch the videos to see what Ninja Affiliate can do for you!