How to Randomize Your WordPress Header Image

WordPress

Most WordPress sites have a static image at the top. This header may be the same for all pages in the site, or you may have different headers for different sections. For example, if you are using your WordPress site to sell clothing, you might have one header image for any page that offers men’s clothing, one image for pages showcasing women’s clothing, and a third image for children’s clothing.

However, what if you would like to have your header image randomly change every time the page is loaded? There are a few reasons you might want to do this. If you have a photography business, you might want the header image to change randomly each time so as to show off a number of different example photos. If you are simply running a personal blog on WordPress, you might want the header to change just to keep things from getting stale. No matter what the reason is, you can easily set your header image to random by adding a few simple lines of code to your header.php file.

Locate Your Images

The first step is to gather all of the images you want to use. There are a few small rules you need to follow here. First of all, the images need to be the same size. Otherwise, your pages will not have a consistent look and feel to them. If a few images are much smaller or much larger than the others are, it can throw off your whole layout. Next, you need to make certain all of your images are of the same type. For example, all of them need to be .jpg files. You cannot mix .jpg, .gif, and .png files.

Next, you need to give the images the same name followed by a number. Something like header_1.jpg, header_2.jpg, .etc. The file name and the number must have an underscore between them. You can use whatever you like for the name part—header, headerpic, etc. There’s also no limit to the number of pictures you use. Just make sure they are all named in sequence and that they are all the same type of image.

Uploading to the Same Folder

Now upload all of your images to the same folder. This can be any folder you want, but to make it easier to organize and to add images to later, you may want to name it something like header_images.

Now open the header.php file for the page you want the images to be displayed on. Add the following code to it:

<img src="http://folder_for_images /headimage_<?php echo(rand(1,X)); ?>.jpg"
width=" imagewidth" height="imageheight" />

Final Adjustments

There are a few things you are going to have to change here, of course. First, replace folder_for_images with the correct path to the folder that contains all of the images you have just uploaded. You may need to change “headimage” to whatever you named each image, too. Then in the code “rand (1,X)” be sure to change X to the total number of pictures. For example, if you want WordPress to randomly pick one out of five different images, you would change X to 5. Then changed image width and image height to the maximum width and height of your images.

That should do it! Save the changes and then visit your page. Each time you reload it, you should see a different image.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

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