How to Make Random Header Images?

Published On May 2, 2008
40 Comments Leave a Comment
Random Header Tutorial

You are using a neat WordPress theme with an image header but want to have multiple images that you can randomize on your blog? Here is how to go about it…

STEP 1 – Editing Images

Make all your header images that you want to randomize of the same size (dimensions) and format. For example, if you have GIF images then all should be of the same extension. I hope you get the point.

STEP 2 – Naming Images

All the names of your header images should follow a similar pattern. Here is an example we will use :-

blogtop-1.gif
blogtop-2.gif
blogtop-3.gif
blogtop-4.gif

We do this because when writing the code, we will try to randomize the number part (logically, randomization is done by numbers in any programming language) and keep the text part similar for all.

STEP 3 – Moving the Image Files

Move all your header image files to the “images” folder in your theme folder. Most probably, if you are using a theme that uses images, then it should have an “images” sub-folder. If not, make one and put all your header images in there.

STEP 4 – Randomizing the Images

Open your header.php file from the theme folder in a text editor. Put this code just below the tag.



The rand() function actually picks up a random number from the number of items you have specified. We are going to use this function to randomize and pick 1 item from the 4 header images in the “images” folder. So, if you have more than four images, just change 4 to your number.

STEP 5 – Using the Randomization in the Actual Header

This part can be a bit tricky as it will require you to find the code where your theme calls the actual header image (the one being used in the default theme). Usually, most of the professional theme designers define the header image through the CSS background property of the header DIV. So, you will have to get rid of that technique and use the old school HTML technique to call the image in the header DIV or the place where you want your header image to be located.

Ideally, the following piece of code will pull your header images in your theme :-


header

So, basically this code will insert the value of the variable $header_image after “blogtop-” and this will pull out the image from the “images” folder. All you have to do is figure out where exactly to place this img code in your theme header.

This concludes the random header tutorial and if you have questions, just ask here in the comments.

40 replies on “How to Make Random Header Images?”

western Reply

People visit forums looking for answers. They’ll usually find a forum post because they’ve done a search for a specific question, and are looking for an answer. If you try to market to them, they’ll just ignore it and move on. Give value. Answer questions. Contribute to the community.

Eva Rutgers Reply

Wow, awesome blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is magnificent, as well as the content!. Thanks For Your article about How to Make Random Header Images? .

Brock Rothmiller Reply

Wow, incredible blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is magnificent, as well as the content!. Thanks For Your article about Blog Oh Blog » Blog Archive » How to Make Random Header Images? .

Dallas Cairns Reply

Oh my goodness! an amazing article dude. Thanks However I’m experiencing issue with ur rss . Don’t know why Unable to subscribe to it. Is there anybody getting identical rss drawback? Anybody who knows kindly respond. Thnkx

Tim Reply

Nice! I started using the random header code on my site, but I was able to fine tune it a little thanks to your post, im pretty stoked about this!

yasam koçu Reply

Nice tutorial, Jai. BTW, currently I am using Silver Light theme. How do I insert or change the header file so I can replace the title to an image of my choice? Thanks

alt?n çilek form seti Reply

Nice tutorial, Jai. BTW, currently I am using Silver Light theme. How do I insert or change the header file so I can replace the title to an image of my choice? Thanks

jose Reply

Hi,
thanks for this tip. i have just one doubt:
i’m using this, but to show some random images in my sidebar, so i need to show instead of one, threee images at the same time.
i try changing rand(3,29), guessing that would make three images will be shown, but no. also, i need the three images shown not to be the same. is there a way to get this without using a plugin?
thanks!

Kabir Reply

very useful information , buy why don’t you give answer of the questions of the reader here to show for all users in you site. BtW great tutorials

thezzbiszz Reply

Hello, my web site using freshy theme. And I can’t do the Step 5.
I have to put that code on the header.php
Or I have to find that code in the header.php and change it?
And what do I do with the css file?

iCalvyn Reply

Great tips, I might create few header and let it randomly load, let my reader feel not so bored after view my blog…

I also might create season header, like new year, or xmas… and let it random load…

bissell Reply

Wow, that’s a great idea. I should be able to do that by myself, although I’m a noob 🙂 But I like how that looks like, definitely.

papajoneh Reply

Thanks for this code. Been reading your blog post for quite some time now, silently.. and I have to say, No regret. Thanks once again, Jai 😉

faze one Reply

i am using a script that does this, and i looked for months before i found it….I call my pap code in the css itself though….

Joshua Clanton - Design for the WEB Reply

Great little tutorial here. I knew that it had to be pretty easy, but I hadn’t had a reason to use random images yet. Thanks for the info!

Cosmoslayer Reply

Nice tutorial, Jai. BTW, currently I am using Silver Light theme. How do I insert or change the header file so I can replace the title to an image of my choice? Thanks

Leave a Reply to dumu Cancel reply

Your email address will not be published. Required fields are marked *