Using NextGen to Power an Animated WordPress Header

I’m annoyed this hadn’t occured to me before today despite having used WordPress and the NextGen Gallery plugin for years now! I was just about to knock together a custom flash header for a wordpress site and client who wanted a few banner images rotating to liven up his site when I realised it might be possible to do it easier with NextGen AND give the client the ability to change images himself directly from the wordpress admin.

Here’s how to do it:

With a recent version of standalone WordPress and the NextGen Gallery plugin both installed and activated and using a HTML editor like Dreamweaver, try to locate the lines/div’s in your WordPress template’s Header.php file or Stylesheet that control the template’s banner image sizing and position. Inside this div replace the existing image code with the following NextGen php hard code and upload to the server:

<?php echo do_shortcode('

This slideshow requires JavaScript.

'); ?>

Replace “Gallery not found” with “slideshow id=x” where “x” is the ID of the gallery/slideshow you wish to display.

If you just want to display the slideshow on the home page, use this code:

<?php if ( is_front_page() ) {
echo do_shortcode('

This slideshow requires JavaScript.

'); } ?>

This gallery should be created beforehand using images that match precisely the dimensions of the template’s existing banner image.

Next, go to the NextGen options in wordpress and specify slideshow dimensions that match the width and height of the template banner image. You can specify other options here such as order, image display time, next/previous controls, etc..

That’s it! Refresh your front end and hopefully you now have a flash banner!

Here’s an example of it working – www.Gaelink.ie

Leon.

Advertisements

Published by

Leon Quinn

Multimedia Design company in Leitrim, Ireland specializing in WordPress Website Design, Photoshop and Graphics. www.reverbstudios.ie

5 thoughts on “Using NextGen to Power an Animated WordPress Header”

  1. Thank you very much Leon. The solution worked like a charm and saved me a lot of trouble.

    And just one tip for those in need of your solution: do not simply copy-paste Leon`s code, since the ” ` ” (apostrophe) character will be pasted into the source editor as ” ` ” (grave accent character) and the code will fail.

    Best!

    Like

    1. Thank you Stefan! This saved me, I was about to hard code the whole gallery or something 😀
      And thank you Leon!

      You brought happiness to my life again 😀

      Like

  2. Thank you so much for this article! You have saved me tons of time trying to sort out the NextGen/Wordpress header slide-show. Your solution is simple and works really well.

    Cheers

    Kieran

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s