There’s something about the unexpected that makes life more exciting. Who doesn’t like a little mystery? Give visitors to your web site a pleasant surprise with each visit by randomizing the header atop your page.
In fact, this is easy to do with most WordPress themes, which come pre-made to accommodate random header images. That’s great because swapping these compelling images can dramatically change the tone and texture of your page, making it a far more compelling destination.
Use the theme customizer
If your theme supports random image headers, go to Appearance > Customize and click on the Header tab. It may also be labeled “header image” or another similar title based on your theme. Opening this tab should reveal your current header image and the other options available to you.
You should be able to add images here too. Once you have enough available, you can click on ‘Randomize uploaded headers’ and save your changes. Visit your site and reload it a few times to ensure it’s working correctly.
What? No theme customizer?
Alas, not all themes support this function – but there is another way for you to get the job done.
First, collect all the images you’ll display in your random header. Make sure they’re all the correct size and the same aspect ratio. Place them all in the same directory in your media library, preferably by themselves to make managing them easier. Also, ensure they’re all the same file type with the same file extension.
Next, name the files with consecutive numerical values, starting at 1. You can use as many files as you like, but there should be no “gaps” in filenames. For example, a collection featuring 1.png, 2.png, and 3.png is fine – but one with 1.png, 3.png, and 4.jpg is not.
Edit your theme
Whenever you edit a WordPress theme, there are two things you should do: the first is to create a child theme where your changes will be applied. This keeps the parent theme as is, just in case you run into technical difficulty. It also enables you to update the parent theme as needed for security fixes and other updates without sacrificing the work you’ve done on the child theme.
It’s also good practice to back up your site before you delve into theme changes. Site backups let you recover if you make any grievous errors.
Once you’re ready, open the header.php file using Theme Editor and paste the following in the area where you want the random image to appear. (In some themes, it may be better to modify the index.php file instead. You may have to experiment a bit to find what works best in your case.)
where “image_folder_path” is replaced with the actual image path to your image files. In the example above, one of four .png images will be randomly displayed. You can use any web-friendly image type as long as all your files are the same type.
Elementor users have another option
Elementor is page building plugin that’s packed with many cool features. Surprisingly, it lacks support for random image headers – but as with most things WordPress, there’s more than one way to get the job done. One way is to use Elementor’s “Saved Templates” feature and a bit of PHP scripting.
First, create the templates you wish to randomly display by making the elements on a page and saving them as templates. Then navigate to Templates > Saved Templates in the WordPress Admin section. You’ll see that each saved template has associated with it a shortcode – and shortcodes are a shortcut to theme flexibility.
Your shortcodes will look something like this:
Embed them in your header.php or index.php file and they’ll show up accordingly. You would do so with code that looks like this:
Now, to display your saved templates randomly, you would use code that’s only slightly more complicated:
// get random index from array
$codes $randIndex = array_rand($codes);
echo do_shortcode($codes[$randIndex]);
?>
The great advantage for Elementor users is that saved templates can be for more compelling than simple images – they can include videos with text overlays, slide shows with dynamic effects and just about anything else you can conceive of. No matter which approach you choose, giving your visitors something new to look forward to with each visit is great way to improve traffic and heighten engagement.
That’s So Random!
was written by me, Greg Norton – also known as webzenkai. I’ve got more than two decades’ experience building effective websites and powerful email campaigns that yield results. Feel free to contact me regarding this article or anything else you find on this website.