Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Random Header Images to Your WordPress Blog

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Add Random Header Images to Your WordPress Blog

Often times bloggers want to have a header image in their design. Usually these images are static, and it gets boring after a while. You will probably see that there are numerous WordPress blogs that has dynamic header images which rotates randomly. In this tutorial, we will show you how you can add random header images to your blog.

If you are a new user, you would probably think that something of this sort is extremely hard and requires a special plugin. We actually rate this plugin at a beginner level.

First thing you need to do is get the images. Make sure you stay consistent with the sizes of these images as well as the extension. So if you have one image that is a .jpg then all others must also be .jpg. There is no limit to how many images you can have rotating, but for the sake of this tutorial, we will use 3 images to rotate.

Random Header Images

Once you have found the images, you may name them in a sequence like:

  • headerimage_1.gif
  • headerimage_2.gif
  • headerimage_3.gif

You must separate the name with an underscore. You can change the headerimage text to himage or anything you like.

Once you have done that paste the following code in your header.php where you would like the images to be displayed.

<img src="http://path_to_images/headerimage_<?php echo(rand(1,3)); ?>.jpg"
width="image_width" height="image_height" alt="image_alt_text" />

Make sure that you change the number 3 if you decide to do more than 3 images. This code is not exclusive for WordPress, it will work with any php based platform.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Adeoye says:

    Thks for this article, but its very shameful that I didn’t know where exactly to insert this code at header.php

    A complete instruction with graphical illustration will be highly appreciated!

    Thks once again for this info!

  2. Marin says:

    Interesting and very clear approach, helpful and thanks :)

  3. JF Switzer says:

    Great solution and so incredibly simple to implement. Good job…

  4. vidya says:

    i am working in online wordpress where can i found header.php and how can i modify that.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.