Rotating Header Images for WordPress

I’m not what you would call a “graphics designer” by any means. My creative process just isn’t all that great. I’ll truthfully admit that. Therefore, when I see how awesome other bloggers can make their site to look, I get a little jealous from time to time. I mean who doesn’t want their site to look attractive? One very important element of a website or blog is the header. The header is the top most portion of the website and usually contains the logo and branding of the company along with slogans and other graphical images. A visitor can quickly decide how well organized or professional a website is just by glancing at the header image. Ever since I started AnotherWindowsBlog, I never did have a header image or logo. Although that’s perfectly OK, it’ not what you would call “exciting”. A site’s header is usually what your visitors will see first when they arrive at your blog. To not put anything there is like saying you don’t care about your site and/or what others think.

Just the other day, WordPress released version 3.2 to the public. I upgraded immediately as I haven’t done so since coming over to WordPress about a couple of months ago. WordPress 3.2 shipped with a new default theme called Twenty Eleven (previously Twenty Ten). I checked it out just for fun to see how different it would be compared to the older version. Well, it looked awesome that’s for sure but one thing caught my attention the most and that was the random/rotating header images each and every time you refreshed the page. Not very extraordinary as I’m sure many people will tell you that feat can be done already. But upon seeing it, I knew immediately I wanted something like that on my blog as well. So I went ahead and searched for a WordPress plugin that would easily allow me to accomplish that goal.

Header Image Rotator

This was one of the first plugin’s I’ve found and boy was I glad I did. I have tried using other similar plugins that promises to rotate my header images but Header Image Rotator (HIR) seems to me the easiest to use.

You can download Header Image Rotator from here. There is a basic free version and a pro version costing only $2. My advice is to use the basic version first and get it to work with your blog. Once you get it working, you can purchase the pro package if you deem it necessary as the basic version lacks in features. Take a look at the comparison chart below:Compare

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:

Folder

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”.

SettingsCSS ID

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.

UploadCrop

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.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Comments

  1. Hello; I’ll be the first to admit that i rarely know what I’m doing. i am in the process of building a wordpress based site. My business helps people buy, sell, and trade amusement, concessions, and confections equipment. i was thinking that it would be great to have some of my best ride and game pictures as part of a rotating banner. It sounds like this is exactly what i need to make it happen. what do you think of my idea? thanks, max

    • Deploying a rotating banner used in that manner in which you specified can be a great idea. However, I’m not business guru so that’s just my opinion. Rotating banners works very well when incorporated into a “blog” type of website. Depending on how your website is configured, a rotating banner might or might not be the best idea. Most professional e-commerce websites don’t employ a rotating banner. What you can consider instead of a rotating header/banner is a home page slider. These are actually more popular. For example, a blog could use a slider to show off some of their most popular posts in hopes of drawing more readers. You can similarly use a slider to display some of the most popular equipment you are trying to sell.

      Here is an example WordPress slider I wrote about in the past: http://wp.me/p1Pucu-u9

      Good luck!

  2. any alternative of Header Image Rotator? not all features are included on free version.

    • Trust me, I’ve messed with this issue a lot previously and due to me not really knowledgeable with HTML and CSS scripting, I had to use a widget. That’s why I actually purchased Header Image Rotator. If you are somewhat familiar with coding, you might want to take a look at these two documents on how to accomplish this:

      http://bit.ly/ggmP9
      http://bit.ly/133Ncp

      Good luck.

  3. for me, your images are changing on every link but not rotating ( on ubuntu )

    • Oops…I think “shuffling” might be the more precise term than “rotating”. I have 20 images right now in my folder and upon each refresh of the page, 1 random image from that 20 is selected. So yeah, it’s not really rotating. Didn’t realize that until you pointed that out!

      • also, there is no title for your site now. I cannot click on home page

        • Yeah I turned off the title because it wouldn’t look good on those backgrounds. Users can return to my homepage by using the breadcrumb bar. If you click on the word “Blog”, it takes you back to my homepage. The plugin also gave me the option to link back to my homepage whenever someone clicked on the header so I’ll see if I can get that working.

Speak Your Mind

*


(humans only, please) *