NEW VERSION RELEASED!!! VERSION 2.0 NOW OUT.
Go out and grab this new version, it should fix most to all of these problems. Thanks!
Link to Header Image Rotator version 2.0 here
After receiving a bunch emails about how to modify the Header Image Rotator plugin to work with Wordpress themes, I decided to write this brief tutorial.
Problem description:”The plugin does not work with my Wordpress theme even though I have everything else set up correctly and am receiving green check marks in the plugin admin panel. I can only see the default image that comes with my theme.”
#header. However, if your theme uses a different CSS ID for the header styling such as
#header-image, the plugin will not work. This tutorial will show you how to remedy this issue.
Step One: Verify the plugin is working correctly. In the plugin admin panel, you should be seeing all green check marks. The plugin performs a self-test when initializing to make sure all of your settings are correct.
var img = new Image();
img.src = 'http://mhough.com/wp-content/header-images/5.jpg';
background: url('http://mhough.com/wp-content/header-images/5.jpg') no-repeat;
background-position: top left;
Step Three: Find out what CSS ID your blog is using. As the saying goes: there are many ways to skin a cat. And as such, there are many ways to find out this information. In this tutorial and for the sake of brevity, I will post two of these ways. The first way is to browse to your blog home page and inspect your header image for it’s properties. You can right-click on it if it’s a picture and inspect the element properties. We want to find out what the name of the image is so we will be able to browse the theme’s CSS ID and find what CSS ID is placing the picture in the header. We can do this by logging into your admin section of your WP blog, then browsing to the ‘Presentation’ tab then the ‘Theme Editor’ tab. Then go into your Stylesheet and search for where that image is coming from (I’m not going to go into CSS basics here). Usually the header images are in CSS ID tags such as #header, #header-id, #header-image, etc. When you find where the pic is coming from, write down the CSS ID tag. The second way to get this info is, in my opinion, easier and more accurate. If you use Firefox, download and install the Firebug plugin. Then, using the plugin, inspect the CSS and find out which CSS ID is displaying the picture or image.
Step Four: Modify the header-image-rotator.php file. Here we will replace the CSS ID in the script with the CSS ID of your theme. Open the php file in the editor of your choice. We will be editing the hir_add_css() function. Where it says
#$headerID, change that to reflect the CSS ID from your theme. Example:
#$headerID would become
#header-image if your theme was using the #header-image CSS ID to display the image. Save the file.
Step Five: Update the plugin. First, deactivate the plugin from the plugin admin panel within the Wordpress admin page. Then delete the existing header-image-rotator.php file residing on your server. Upload your modified php file and reactivate the plugin. You may get an error in the plugin initialization check in regards to your CSS ID. Disregard this error. Test and it should now be working.