Flexslider & NextGen Gallery in WordPress

The code in this tutorial does not work with NextGen version 2.0. You will need to use an older version such as 1.9.6 if you wish to use the code below. Better still, I recommend using the Advanced Custom Fields plugin which has awesome addons such as the Gallery Field and the Repeater Field. See this article for details.

A tutorial about how to build a slider in WordPress with Flexslider using NextGen Gallery for image management.

Step One: build the slider

As usual, we'll start by building a single page mockup with just the slider, so we know that it's all working properly before integrating WordPress. Head over to the Flexslider site and download a copy of the plugin. Their site has really good instructions for getting this setup, so I won't go into too much detail about it here.

View basic Flexslider demo page

Create a basic HTML file in your development environment with the sample markup inside the body of your document:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="images/slide1.jpg" />
    </li>
    <li>
      <img src="images/slide2.jpg" />
    </li>
    <li>
      <img src="images/slide3.jpg" />
    </li>
  </ul>
</div> 

Ensure that you have the three essential ingredients referenced in your page; 1: jQuery, 2: Flexslider JavaScript file, 3: Flexslider CSS file; so add the following code to the head of your HTML page:

<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>

Note: I like to organise my theme directory with folders such as 'css' and 'js', so I have changed the href and src attributes accordingly.

Next, we need to hook the 'flexslider' jQuery method to our div, which we do with the following code. Note that the Flexslider site recommends using (window).load() instead of (document).ready() to ensure that your images are ready when the script fires.

<script>
$(window).load(function() {
    $(".flexslider").flexslider({
        animation: "slide", 
    });
});
</script> 

Note: I've added in a line for the animation option to demonstrate where to call these options.

Lastly, the left and right arrows which appear on hover require the image sprite file bg_direction_nav.png. You'll find this in your downloaded Flexslider files; just ensure that you have it referenced correctly by the Flexslider CSS file.

Step Two: integrating into NextGen Gallery

Now that we're satisfied we have Flexslider working, we want to create the slider markup with NextGen Gallery. Start by creating a folder inside your theme directory called "nggallery" and copy the gallery.php file from the NextGen plugin "view" folder (/wp-content/plugins/nextgen-gallery/view/) to your newly created theme folder. The version of this file in your theme directory will override the NextGen version.

Remove everything from your theme copy of this file except for the following:

<?php if (!defined ("ABSPATH")) die ("No direct access allowed"); ?><?php if (!empty ($gallery)) : ?>
 
<!-- add flexslider markup here -->
 
<?php endif; ?>

Now add the div and ul wrappers for your Flexslider:

<div class="flexslider">
	<ul class="slides">

		<!-- add code for slides here -->

	</ul>	
</div>

Lastly, we add in the foreach loop which outputs the slides as li elements:

<?php foreach ( $images as $image ) : ?>

	<li>
		<?php if ( !$image->hidden ) { ?>
		<img src="<?php echo $image->imageURL ?>" alt="<?php echo $image->alttext ?>" />
		<?php } ?>
        </li>

<?php endforeach; ?>

Our complete code will look like this:

<?php if (!defined ("ABSPATH")) die ("No direct access allowed"); ?><?php if (!empty ($gallery)) : ?>

<div class="flexslider">
	<ul class="slides">

	<?php foreach ( $images as $image ) : ?>

	<li>
		<?php if ( !$image->hidden ) { ?>
		<img src="<?php echo $image->imageURL ?>" alt="<?php echo $image->alttext ?>" />
		<?php } ?>
    </li>

	<?php endforeach; ?>

	</ul>	
</div>

<?php endif; ?>

Step Three: loading the CSS & JavaScript with WordPress

The custom NextGen Gallery file will output an unstyled, non-animated list of images onto our WordPress page. To make it look like our demo page, we need WordPress to load the CSS and JavaScript files, and we need to run the script which executes Flexslider.

Add the following code to your themes functions.php file:

if (!is_admin()) {
	// jQuery (optional loading via Google CDN)
	wp_deregister_script('jquery');	
	wp_register_script('jquery', ('http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'), false);	
	wp_enqueue_script('jquery');
	// Flexslider JS
	wp_enqueue_script('flexslider', '/wp-content/themes/yourtheme/js/jquery.flexslider-min.js', null, 2, false);	
	// Flexslider CSS
	wp_enqueue_style( 'flexslider', '/wp-content/themes/yourtheme/css/flexslider.css', null, null, null);
}

Note: the first three lines are optional. This prevents WordPress from loading its own copy of jQuery and instead loads the version from Google's CDN.

Finally, to get Flexslider to run, we need to add the script we used above in our demo page to our header.php file, somewhere below wp_head() but inside the tag:
<script>
$(window).load(function() {
    $(".flexslider").flexslider({
        animation: "slide",
    });
});
</script> 

Extra credit: using NextGen for Flexslider and regular galleries

Now we have a fully functioning Flexslider running in our WordPress, powered by NextGen Gallery! If you are using NextGen for other non-Flexslider galleries, then you'll need to use some conditional if/else code to load the flexslider markup on the required pages only, and default to the standard NextGen markup for all other pages. I cover this in my other article about using NextGen and WordPress, under the heading 'Prepare the NextGen gallery.php file'.


12 Responses to “Flexslider & NextGen Gallery in WordPress”

  1. Cavell says:

    Hi,

    I can’t see the code in your post. The rest is fine.
    Is SyntaxHighlighter not working properly?

  2. Cavell says:

    Great, got it working.
    I’ve been looking for a responsive NextGEN gallery slider solution.
    Cheers!

  3. Constant M says:

    Thanks! Now to not update Nextgen gallery ever again. 🙂

    • Tim says:

      Ah, but you should always keep your WordPress core and plugins up to date… or else the hackers will find their way in!

  4. Tim says:

    Hi CJ,

    To answer your question:

    I was wondering if you incorporate this method, would you be able to update Nextgen when new versions are released? Or are you stuck with the version of Nextgen at the time implementation?

    NextGen is conveniently developed with your theme in mind. You can override the core NextGen template file by creating your own copy of the gallery.php file within a “nggallery” directory inside your theme. This allows you to upgrade the NextGen plugin without overwriting your custom gallery template file. I discuss this in more detail in this article.

  5. Michael says:

    This was a really thorough, helpful post.

    Thanks a lot for taking the time to create it.

    I’ll be bookmarking your site, for sure.

  6. Chris says:

    This might be a dumb question but I’ve never played around with php before… but how do I actually include this plugin into my page?

    If I would want to load this in my header directly after my navigation menu, what function should I call and how do I do it?

    This is my entry in functions.php:
    if (!is_admin()) {
    // Flexslider JS
    wp_register_script(‘flexslider’, ‘/js/jquery.flexslider-min.js’, null, 2, false);
    wp_enqueue_script(‘flexslider’);
    // Flexslider CSS
    wp_register_style( ‘flexslider’, ‘/css/flexslider.css’, null, null, null);
    wp_enqueue_style(‘flexslider’);
    }

    This is the only part I don’t understand, no function is defined for me to call, right?

  7. Singularity says:

    Hello, would you be so kind, to help me. I’m using Siren theme, that has a Flexslider in it. And the problem that it is posting my thumbnails without an alt attribute, only with image url. I’m ready to provide any info you need to help me. Thanks in advance.

  8. Marco says:

    Hello Tim,

    First thanks for this step-by-step tutorial! I’ve done exactly what you described, but… nothing happened? The outcome is exact the same as with the original gallery.php. What can be wrong?

    Thanks in forward for your help,
    Marco

    • Tim says:

      Hi Marco,

      It sounds like the gallery.php is not set up properly, or it is not being called by your theme. You could try testing to see which gallery.php file is being loaded by your site. For example, add nextgen version to gallery.php in the NextGen plugin directory and add template version to gallery.php in your template.

      Tim.