How to Make Random Header Images?
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.<?php
$header_image = rand(1,4);
?>
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 :-
<img src="<? bloginfo('template_directory'); ?>/images/blogtop-<? echo $header_image; ?>.gif" alt="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.
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
where exactly I should place the first php code – I understand that it’s in header, but where??
Great tips,very useful information for bloggers.
Thanx so much
very useful tut
That’s a great, easy and useful.
thanks so much.
good!!!!!!!