(This technique works walks through modifying the wordpress “cutline” theme however the same technique can be used in other themes in a very similar way)

So you downloaded the cutline theme for WordPress, except there’s one problem, the header images aren’t really random. They seem to show depending on what page you are viewing rather than being truly random.. Well here’s a fix for that. I wanted a different image to appear every time the page loaded (almost every time, there is a SMALL change that it may be the same)… With a tiny bit of tinkering, this code can be cut and pasted into any number of themes that have clear header image code.

All that is required is a little java script that creates a random number variable and appends it to the image’s name.

Open up your Cutline Theme’s folder and locate the file called “Header.php”. This is the file that contains the header generation code. Scroll down to the bottom and look for an area with this code:

cutline header image code

The Div is the container for this header code. You can delete everything inside this div because it will not be needed. 

Now we will replace it with our java scrip code. This code will generate a random number, then call the image but attach the random number to the image name. For this to work your header images should all be the same size (pixel dimensions), they should be .jpg format, they should have the same name too except each should have a different number at the end. For example, they would be “header_0.jpg”, “header_1.jpg”, “header_2.jpg”, “header_3.jpg”… etc

Below is the java script code you will need (click the image to enlarge)

wordpress random header image javascript

Or copy and paste the code from here: (see text file)

In this text file, the URL for the image (after “var imgsrc”) leads into my theme folder, and then into the folder where I house all of the theme images.

This code after “var randomnumber” will generate a number between 0 and one below whatever number you specify the red number. In this case, the numbers 0, 1, & 2 can be generated at random. The code then calls a header image with the random number attached.

And there you have it. A random header image will be displayed in your wordpress theme. Enjoy

Let me know if something isn’t clear and I’ll try to explain it a little better!