Rotating Header Images for WordPress

Prior to activating the the plugin, create a new folder called “header-images” (without the quotes) within your “wp-content” directory using your favorite FTP client. It should look like this:

Once you activate the plugin, head into the HIR settings page. There’s just one very important setting that you have to configure and one that might give you a little problem if you don’t know what it’s asking of you. In the CSS Header ID Tag field, you need to provide the ID tag for your theme’s header element. Because each theme is different, you’ll need to personally head into your theme’s CSS file to check for the ID.

You could try to cheat your way out of this by just typing in “header” in the field and hope that it would work. If using header doesn’t work, then you’ll need to follow the steps below to find the correct ID tag.

The CSS file is used by your website to style many of the elements within your site. For example, if you wanted your links to be a different color, you’ll specify it in this file. If you’re having a hard time with the CSS file, use Google Chrome’s built-in website element inspector. Right-click in your header area and select “Inspect Element”. Each element that you mouse over will be highlighted on your page. This allows you to easily find the ID tag for your header. For my blog theme, my header ID is called “top”.

 Now that we’ve inputted our header’s CSS ID, we can begin uploading images for use. If you are not using the pro package, you’ll have to manually upload your header images using an FTP client into the “header-images” folder you’ve created earlier. If you have the pro package, you can upload the images directly within the plugin’s settings page. Depending on your theme, the header image size will vary. Don’t worry though. Just upload any image at first to make sure that the plugin is functioning correctly and that the image is actually appearing on your site. Once that completes, you can then begin worrying about finding the correct size. Once you have, each and every image you upload in the future should be set to the same size as well. In my case, my header image size is 960×180 pixels. In many situations, you’ll have a larger image than what will fit in your header. Therefore, you’ll need to crop the picture. I highly recommend using Irfanview for this task. Cropping the image allows you to specify exactly which portion of the image you’ll want as your header.

Once the images have been uploaded, preview your blog and if everything went correctly, you should see your new header! The basic package of HIR only allows you a limited amount of options for the rotation interval. The lowest time you’d have to wait before the image rotates is one hour. The pro package doesn’t have this limitation and on my blog, I’ve set it to rotate after every refresh.

I love scenic backgrounds and so I’ve cropped about 20 different header images to begin the rotation set. Granted, rotating your header images on your blog isn’t that great of an idea for some. Remember what I’ve said earlier. Your header is very important for branding. A header is usually static and reflects the personality of your blog or site. Take myself for example. The header images you see now most likely have nothing to do with my computer blog. Therefore, it might seem weird for some to do what I am doing. Now I could only use computer specific pictures for my header images and have them rotated but I’m not going to do that yet. If you don’t care about branding your website, then this plugin can help to liven up your blog. It would be cool to use different image categories every month or so. For example, maybe next month I could use only anime pictures or images that has to do with electronics. Whatever the case maybe, HIR is a fun plugin to play with just as long as you know what you’re doing.

Consider Also Reading...

How-To Mobilize your WordPress BlogI've been struggling for a while now trying to mobilize AnotherWindowsBlog after I've migrated to a self-hosted WordPress installation ... Using Custom GoDaddy Domain with BloggerThere are times where you'll want to create a blog to call your own but want to keep things ...

Finally, a WordPress Content Slider I Love!I admit that I'm picky when it comes to certain things. For as long as I can remember, I've ... Mobilize your WordPress Blog in MinutesI've been struggling for a while now trying to mobilize AnotherWindowsBlog after I've migrated to a self-hosted WordPress installation ...

Switching to Catalyst WordPress Framework!Out with the old, in with the new! I've managed to make another theme change for AnotherWindowsBlog and hopefully ...

X

If you enjoyed reading this article, you might want to subscribe to my RSS feed for updates on this topic.