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.”
What is happening: The plugin uses a Javascript function to insert CSS information into the head of your blog. At the time of this writing there are well over 1,000 custom WP themes, and each theme has a unique CSS style structure. In my plugin, I tried to use the most common CSS ID for the header image as it would have been impossible to cover them all. The Header Image Rotator plugin uses the CSS ID #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.
Step Two: Verify that the Javascript function is inserting CSS code into the head of your blog. After the plugin is activated and configured correctly, browse to your blog’s home page. Once the page has loaded, view the source code (this will be done differently depending on your web browser…if you’re having trouble think Google). In your source code start searching through the head of the HTML document. Specifically, we’re looking for code that resembles the following:
<script type="text/javascript" language="javascript">
var img = new Image();
img.src = 'http://mhough.com/wp-content/header-images/5.jpg';
</script>
<style type="text/css">
#header {
background: url('http://mhough.com/wp-content/header-images/5.jpg') no-repeat;
background-position: top left;
}
This is the CSS code that is inserted by the Javascript function. If you can find this then the plugin is working correctly and we can move on to modifying the CSS ID. If you can’t find this, start over at step one.
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.
Related Articles:
Hi,
Is it possible to have the rotation work based on date? I contacted you about this, but maybe the contact form does not work.
Kind regards,
John
hey,
your plugin is great. you have helped me to add a nice touch to the blog i am building. now, here comes the “big but”, i am not skilled with php, as in the fact that i dont know it all and i just try to emulate the existing code when i make any changes. how can i add another option to the swap rate. i would like to have one set for “second” or “on page load or on click”. i prefer to have it set at “second” as it would keep a more uniform look on the option panel. this will virtually take care of having the header image change everytime the page loads. please can you add this option to any future updates, or just simply create it for me? thank you very much.
hi.. does your header plugin work in WP 2.2.1 ? I read the direction (above) and the header isn’t rotating. I also so not see any setting in the WP control pannel for the swap-rate options that are coded into the header-image-rotator.php file.
Hi:
Would love to use your plugin. Installed it, activated it, all the check marks are green, but no code as in Step 2. What’d I do wrong?
jules
Sorry. False alarm. I found the code, but the rest of the instructions are over my head
Darn!
Thanks. Works fine for me at http://www.buffalo-mba.com
Hello…
I recently created a theme from scratch, to replace an old theme, (used the header rotator on the old theme too…)..
Now that I have my new theme up, I can’t seem to get the plugin to work… I shut it down, and started it back up, tried re-configuring everything, and it still won’t insert the JS & CSS into the HTML file…
Is there some dependency in that the plugin requires of the theme that I don’t know about?
Thanks.
Please, I’ve done everything like you suggested and it’s ok, but when I customize my Options\image rotator, the checks are green but this warning appears and the plug doesn’t work…
What does it mean D:\inetpub etc? I’ve uploaded the plugin in my remote site not in local pc; why this?
……………….
Warning: opendir(D:\Inetpub\webs\mysite\public/wp-content/header-images/): failed to open dir: Invalid argument in D:\Inetpub\webs\mysite\public\wp-content\plugins\image-rotator\header-image-rotator.php on line 49
Warning: readdir(): supplied argument is not a valid Directory resource in D:\Inetpub\webs\mysite\public\wp-content\plugins\image-rotator\header-image-rotator.php on line 50
The image directory has not been created or cannot be found. Please double check to make sure you have created the folder.
………………
the line 9 and 50 are:
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
Self-test doesn’t return any of the green check marks
Comment by Coach Steve Toth
2007-07-14 22:05:01
I have installed and activated the plugin with no problem, then added a few header images,content/header-images. I can see the images listed under Options > Header Image Rotator. So everything appears to be correct. No imagis are coming in the header. Thanks in advance for your help! (By the way I’m using Tiga 1.0.2 by Shamsul Azhar as my theme and I set the header rotator to One Minute. Thanks
Heya,
This plugin rocks. Thank you so much for sharing it.
QUESTION:
Is 60 the maximum number of images that can be shown? I’ve been adding more and more images to the header-images file and they all show up on the Options/Header Image Rotator page, yet once the rotation reaches the 60th image it starts over again at the top, neglecting the other images below.
Any ideas?
Thanks.
http://garlinggauge.com
I am testing this and like it a lot but was looking for a plugin that allows a dedicated header image based on the page instead of a “random” rotating image. Is there something like this out there that would show the same header each time a certain page is loaded?
Hmmmm, what can I say – works like a champ!! Nice job, and thanks for the plugin.
Cheers,
Rob
I added option ‘5′ to the plugin which chooses ’seconds’ as the interval. This effctively makes the banner update each time the user switches to a new page. I just copy/pasted the lines of code for option ‘4′ and changed the swap interval from ‘i’ to ’s’.
FYI, I used the ‘ocean mist’ layout, and for this one the images must go to the id called ‘mainpic’ instead of ‘header’, which I changed in the options panel. works perfectly. Many thanks for this plugin.
Hi, great plugin and I’ve nearly got it – but I have side images in my theme that create borders. When the header image is displayed, it overwrites the left side border image.
Is there a way to centralise the header image so that this doesn’t occur?
Not very css or php-savvy!
Thank you
Andy
Excellent plugin, a few little tweaks and everything works perfectly. Thanks so much for your efforts.
Hi,
I’m using the Seashore Wordpress theme. I’ve gone through the tutorial and my problem is this…
The themes header is putting a white block over the image it that is being called up by your plug-in.
I removed all files from the theme’s header folder – before I removed the header jpg I was getting yours below.
Do I have to disable the theme’s default header? Can you suggest how to do this?
Thanks very much for your time!
ok I have gotten as far as step 2, I have green check marks and found the code to show it is working.
From there I have no clue what to do.
DOes someone who has got it working through this fix want to give me some direction?
I don’t know what I am looking for when it says, get the CSS tag and I am not about to learn the history of CSS just to get this one plugin working.
thanks for help.
Hello,
I am receiving this error, even after I have created a new folder named image-header
Warning: opendir(/home/comicsco/public_html/wp-content/header-images/) [function.opendir]: failed to open dir: No such file or directory in /home/comicsco/public_html/wp-content/plugins/image-rotator/header-image-rotator.php on line 49
Warning: readdir(): supplied argument is not a valid Directory resource in /home/comicsco/public_html/wp-content/plugins/image-rotator/header-image-rotator.php on line 50
The image directory has not been created or cannot be found. Please double check to make sure you have created the folder.
Tnx, it is working great!
I am interested to make images rotate at 10 or 20 sec interval.
How I can do that?
Marco
Great plugin ….hats off to you for creating it and allowing it to be used by the community.
Can you add hyperlinks to the banner images?
Still not working for me!
Everything seems fine to me, but I have one question: what image link shall we put on #header, under the CSS file? Shall we leave it with the link to the original header?
Other than that, I have configured everything properly, but no way, I can’t put it to work.
Thanks
i modified seashore and it looks better that way. thx for the plugin!
Verified that the plugin is working as per your steps outlined above. Replaced css id with #hd which is what my Shifter theme is using to place the header image.
Deleted php file, activated plugin. No errors. But the image is not being replaced. I set it for one minute intervals.
Question: Do I also need to reset the css id in the plugin settings in wp admin to hd?
Thank you for this great gadget.
Wendi
innerstellarmedium.com