For a while I was looking at a way to change the photos on my travel experience site with least effort. Not that I finally found a good answer but I did find a WP Plug-In which seemed to be doing the job. This plug-in is called “Header Image Rotator plugin for WordPress!” and here’s the website of the author.
So I quickly downloaded and set it all up but it didn’t work. Then I put a post at the forum but unfortunately I didn’t hear back. I searched around and I could not find any answer.
At the same time my brother-in-law and myself were thinking about it, not the plug-in but about the fact that we should write the necessary code to change header-photos on its own. So recently both of us sat together and thought that before we write a new piece of code,lets see if we can fix this wp image rotator plug-in. We were doing everything as per manual but somehow it was not working.
Let me give a brief of how this plug-in works.
1. Normally any WP template, worth its salt, would have a style-sheet.
2. Typically they would have a header-image.
3. Header-image will have its own div or its own descriptor in the .css file.
4. Normally, header.php file would be using this div to set the header-image.
5. When we use this plugin we copy certain photos at a location and then tell the plugin the div which the header.php is using.
6. Ideally, the plug-in would replace the div with its own code.
After not making any headway, we though about looking at the executed code which the browser was getting. So we loaded the home page on a browser and did ‘View Source’. What we found was that the plug-in was indeed setting the right div to a random image but after that statement, the original template was again setting the same div to what it usually sets, so what was indeed happening was
1. Plugin sets a random image from your collection as header-image
2. Then, the original template sets the default or what-so-ever header-image to that div.
End result is that for a user, the world is all same.
Here’s how we fixed it
1. We copied the style-sheet div section of the header-image in the .css file and created another one with a different name. In my case the header-image css was . I created another called .
2. In plug-in settings, I mentioned as my css id for header-image.
3. In header-php, we used instead of
And Voila it worked.
If you are having some problems here, you can try your luck by doing above.