How to Get WordPress Rotating Header Images

Headers have come a long way in WordPress. It wasn’t so long ago now that the ability to add a header image from the Admin area was added.

But there are still some things that some people want from their headers that they just can’t always get out-of-the-box (depending on their theme).  One of those things is rotating headers and/or random header images.

In this post we’ll go over a few solutions that will help you get rotating and random images.

Built-in Random Headers

The first thing to mention is that some themes do already have the ability to rotate images or show different images on every page. So you’ll want to make sure you check your theme first.

Here is the random header section for the default Twenty Eleven theme, for example.

With some of the more sophisticated themes, you might have to look around a little in order to find a rotating header function. It might not be located where the header section is in more basic themes.

Header Image Rotator Plugin

The first add-on solution is a plugin called the Cimy Header Image Rotator.

This plugin allows you to rotate images (header images in particular) and control them as you like in the settings. You can set the timing of the transitions and the style of the trasitions.

Here’s a look a few of the effects and attributes.

• Static transition
• Fade transition
• Slide effect
• Ken Burns effect (as it’s called – panning and zooming)
• Links from each image
• Captions for images

With this plugin you will need to get your hands a little dirty in the code of your theme. Specifically, you will need to find some code in your header.php (Appearance > Editor > Header – header.php) and replace that code with code provided by the plugin.

The plugin author has provided a video with instructions on how to do all this. In fact, it’s the only instructions. We will include it below, but there is also a link to it on the plugin’s installation page.

One thing to note about the video. The plugin author recommends installing the Firebug plugin for Firefox in order to help find the code that you need to replace. You might first simply try to find the following in your header.php file.

img src=

That piece of code should lead you to the general section that you will need to replace. NOTE: “img src=” is not the ONLY piece of code you’ll need to replace. See the video to help you decide which code to replace in your theme.

Here’s a look at the settings page to help you get a fuller idea of what’s available with this plugin.

And here’s a look at the instructional video.

vpq4U3h1BPY

Manual Header Rotator Solution

The next solution comes from a post that Chris Pearson wrote on his blog personified.com.

Although the code and some explanation are provided in the blog post, it’s a little lacking in some explanation for those that aren’t very familiar with WordPress, and so we’ll go over it here and add in a little more explanation for those who might need it.

Make Your Header Images

First you will want to make up all your header images and name in the following way (including as many as you like, of course):

• header_1.jpg
• header_2.jpg
• header_3.jpg
• header_4.jpg
• header_5.jpg

Be sure to make these images the same size of the header images for your theme.

Next you’ll want to upload all of these images to the same folder on your site. If you use the Media Library in your admin area, be aware that most sites by default put images in folders based on dates. So, for example, the URL of an image might look like this (notice the dates – those are actually folders):

http://mysite.com/wp-content/uploads/2012/09/header_1.jpg

This is fine, but the potential problem is that once you’ve moved to a different month, it’s a little more difficult to upload images to that same folder (in this case the 2012/09/ folder). You would need to go to your server to do it.

But there’s a simple solution to that issue. You can go to your media settings and choose to NOT organize your uploads by date. Go to Settings > Media > uncheck “Organize my uploads into month- and year-based folders.”

Once you do that, your upload URLs will look like this:

http://mysite.com/wp-content/uploads/header_1.jpg

Replacing Code in Your Header

Next you’re going to need to replace some code in your header.php file. (Appearance > Editor > Header – header.php)

The easiest way to look for this code is to search for a unique part of it, the part that looks like the following:

img src=

The “img src=” bit tells you the “image source.”  That’s not the only part you will need to replace, but that should lead you to the section you need to replace.

The complete section you need to replace is going to vary by theme. When I search for “img src=” in the default Twenty Eleven theme, for example, I find this:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

I am going to want to replace that whole section with some new code. Here’s the MODEL of the new code (you will still need to change some of this):

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

In this bit of code above, you will notice part of it says path_to_images. You will need to replace that with the path to your images. So, for example, if our image URLs look like this …

• http://mysite.com/wp-content/uploads/header_1.jpg
• http://mysite.com/wp-content/uploads/header_2.jpg
• http://mysite.com/wp-content/uploads/header_3.jpg
• http://mysite.com/wp-content/uploads/header_4.jpg
• http://mysite.com/wp-content/uploads/header_5.jpg

Then I’m going to want to place the following in that path_to_images section:

mysite.com/wp-content/uploads

Therefore, my actual code would look like this:

<img src="https://mysite.com/wp-content/uploads/header_<?php echo(rand(1,5)); ?>.jpg" width="image_width" height="image_height" alt="image_alt_text" />

You will also noticed another section in that piece of code with some numbers that looks like this:

(rand(1,5))

This will randomly choose your images based on the last number in their names from 1 to 5.  Therefore, if you have only three images, then you’re going to want to change that section to look like this:

(rand(1,3))

If you have 20 images, then you’re going to want to change it to look like this:

(rand(1,20))

And that’s it. Save your header.php file, and you should now be getting random images loading on different pages, spicing things up for your visitors, and making things just a little bit fresher all the way around.

Tags:

• headers