The header image is one of the most important pieces in the design of a blog. It can draw people in, or it can drive them away. It can be crucial in developing the brand of your blog; it becomes a part of you in the mind of your readers.
Over time, however, it can become stale. Returning readers will ignore it, until it virtually becomes part of the background. So how can you keep it fresh and eye-catching? Have them rotate randomly between page loads.
In place of your simple <img src="http://..."> tag for your header image, paste this code:
<img src="<?php bloginfo('template_url'); ?>/images/header_<?php echo(rand(1,7)); ?>.jpg" width="900" height="150">
What you’ll need to do is gather all of the header images you want to use, and upload them to the “images” folder in your theme’s directory. Name them header_1.jpg, header_2.jpg, header_3.jpg, and so on.
- All of your header images should be the same size.
- You’ll need to adjust the code above to reflect the dimensions of your header images.
- The 7 in rand(1,7) should be adjusted to the number of header images you’re using.
And that should be it…. Now, every time a visitor loads your page, the code will generate a random number and use the corresponding image.
I mentioned branding, and I want to touch on that a little bit. The key to branding is consistency. Whether it’s a logo, a name, a color scheme, or a combination of factors, it’s crucial to be consistent with how you present your brand. You want to ingrain it into the minds of your readers.
If you’re going to use this rotating header image, be sure to maintain the consistency of your brand in the images. Try to keep the logo in the same position and use the same description in all of the images. If done well, the rotating header images can help focus the reader’s attention to your brand and solidify it in their minds.
If you use a rotating header image on your site, share a link with us so we can see how it looks!
