Documentation

HEADER IMAGE ROTATOR

• Installation and setup
• Debugging
• Versions

Installation and setup:
These steps are the same if you have the basic or pro versions.

1. Download the plugin
2. Unzip the contents into your WordPress plugins directory (do not drag and drop the files, they must be extracted to preserve folder structure)
3. Create a new directory in your WordPress ‘wp-content’ folder (this is the folder that holds your plugin and theme folders)
4. Name the new directory header-images
5. Go to your WordPress administration panel, and activate the plugin
6. Then go to the Header Image Rotator options page and correct any errors
7. Done!

↑Top

Debugging
There are generally only a few things that can go wrong with the plugin. Generally, the troubleshooting logic is to isolate known-goods until you get to the bad. 99% of the time the problems will be with a theme conflict. The steps below should help you get started on figuring out what is wrong.

1. Make sure there are no errors on the option panel and you have green check marks. Double check that you have created a folder named header-images and it is spelled correctly, that the folder is in the correct location (wp-content folder), and that you have images in the folder.
2. Go to the home page of your blog and view the source code to verify the javascript and CSS are being inserted, and that there are no errors there. The code you are looking for will be similar to this:
   

   [script type="text/javascript" language="javascript"> var img = new Image();
img.src = ‘http://your-site.com/wp-content/header-images/5.jpg’;

[style type="text/css"]
#header {
background: url(’http://your-site.com/wp-content/header-images/5.jpg’) no-repeat;
background-position: top left;
}


3. If you can’t find that code then it means the plugin was not installed properly. Start over from the beginning and move through the install steps slowly. Warning: don’t give up the search too easily! Sometimes I have missed that code block when it was right in my face!
4. If the code is displaying look it over for any obvious errors.
5. The next step is what fixed 9 out of 10 support questions I get. Many times the WordPress theme will interfere or overwrite the CSS and javascript of this plugin, or the end-user does not have the right CSS ID. So basically what we want to do here is find what CSS ID is styling that image in the browser.
6. OK, so how do we do this? First, get Firefox and then download the Firebug add-on. Unfortunately, to go over exactly how to do this is out of the scope of this document. Read over their user manuals if you’ve never used it before. It’s not too hard to use and trust me, if you’re setting up a blog this kind of tool is ESSENTIAL! I never leave home without it.
7. Find the CSS ID with firebug and you’ll probably find that it’s different than what you thought. Most themes use the #header ID to syle the header image, but many, many others use custom ones such as #blog_pic, #header_img, #top_pic, etc, etc. The list goes on and on.
8. Still confused or still having problems? Maybe a quick refresher course on CSS and HTML? Try these links out if that’s the case: W3 HTML tutorial, Tizag’s CSS tutorial, W3 CSS Intro, or the W3C HTML and CSS Tutorial.

↑Top

ROTATING IMAGES

Installation
Below I will list a few simple steps to activate and use the plugin. But for this plugin, I am also going to try out a new feature of video instructions which I hope will help people install, use, and debug the plugin. Please refer to these as I feel they will convey the information better. 

1. Unzip into /wp-content/plugins/ folder.
2. Create a directory in your /wp-content/ folder named “rotating-images”.
3. Create a subdirectory in that folder (name it anything you want).
4. Activate the plugin from the admin panel.
5. Go to ‘Options’ in the admin panel, and then ‘Image Rotator Basic’ to configure.
6. Once you have cleared any errors and the plugin is activated properly, simply add the section divs to your theme files (or wherever you want the images to appear)
7. Style the CSS from the admin options panel, set the swap rate, and enjoy!

↑Top