I need to add a flash rotating slideshow image to a header for a WordPress template I'm customizing and figured I'd create a note here for future reference. Due to how this template is coded I need to perform a few extra steps to ensure the slideshow appears exactly as I need it to. So here are the main steps taken to accomplish this:Create Header Images
Upload Image Rotator for Gallery
Create Header Gallery
Upload Images to Gallery
Add Slideshow code to Header.php File
 
Lets get started.

Create Header Images
1. Use PhotoShop to create my header images at 1300w x 232h.
2. Log into my WordPress demo as an Administrator and make sure the Nextgen gallery plugin is activated.
3. Download the latest version of the JW Image Rotator from the following location:

http://www.longtailvideo.com/players/jw-image-rotator/

4. Extract and save the "imagerotator.swf" file to the following WordPress directory:

/wp-content/uploads/imagerotator.swf

5. Navigate back to your WordPress site where you should be logged in as an Administrator.
6. Scroll down and click the "Gallery" node to expand it.
7. Click the "Options" link and then the "Slideshow" tab.
8. If the "imagerotator.swf" file hasn't been detected you'll see a button asking you to search for it. Click this button to allow WordPress to search for the file. Once found scroll down and click the "Save Changes" button.
9. While in the "Gallery" node look for and click the "Add / Gallery Images" link.

Create Header Image Gallery
10. Enter a name for the new Gallery. For me this will be "Header Gallery".
11. Click the "Add gallery" button when finished and WRITE DOWN the GALLERY ID! This is important as you'll need it later.
12. Click the "Upload Images" tab, click the down arrow next to the "Chooise gallery" field and select the newly created gallery.
13. Click the "Browse" button and navigate to the location on your local system where you saved the header images.
14. Select each image and click the "Upload images" button when finished to have them added to the gallery.
15. Once finished scroll down to the "Gallery" node and look for the "Manage Gallery" link and click it to be taken to your list of galleries.
16. Look for your header image gallery and click its link to confirm that your images loaded successfully.

Add Slideshow to Header.php File

Note: the next thing we need to do is modify the "header.php" file for this template and insert the code which allows our slideshow to be displayed to our visiting audience.

Note: You can perform the following steps from within your WordPress installation by clicking the "Editor" link located under the "Appearance" node. From here you select your "header.php" file and follow below.

17. As stated above either log into WordPress or use your FTP client software to establish a connection with your website's root directory. Once connected navigate to the theme's parent directory:

/wp-content/themes/atahualpa/

18. Open the "header.php" file and look for the following code:

<!– Header –>

<td id="header" colspan="<?php echo $cols; ?>">
<?php bfa_header_config($bfa_ata['configure_header']); ?>
</td>
<!– / Header –>

19. Change this to the following:

<!– Header –>
<td id="header" colspan="<?php echo $cols; ?>">
<?php
if (function_exists("nggSlideshowWidget"))
{ nggSlideshowWidget(1,1300,232); }
?>
<?php bfa_header_config($bfa_ata['configure_header']); ?>
</td>
<!– / Header –>

Note: at this point all you're doing is adding the slideshow:

<?php
if (function_exists("nggSlideshowWidget"))
{ nggSlideshowWidget(6,1300,232); }
?>

The thing to take note of are the following numbers: 1,1440,250. These numbers signify the following:

1 = Gallery ID. Enter the number of your gallery ID here.
1300 = Width of my header images
232 = Height of my header images

This basically instructs the slideshow to display gallery id #1 at 1300 width x 232 height. To control your slideshow transition and effects you'll need to navigate back to Gallery -> Options -> Slideshow and play around with the "Transition / Fade effect" setting to get the desired effect.

20. Save your "Header.php" file and refresh the from of your web page. Take note of whether the slideshow appears. Chances are it did but as with anything there's a chance something that didn't come out right. In this case everything came out right except my images aren't honoring the CSS settings set for the header so even though they're rotating they're really large. So I need to take a look at this.

Troubleshooting…