Create a FlexSlider Gallery Using Attachment Images in WordPress without a Plugin

Posted on April 22nd, 2014 in Tutorials

Have you ever wanted to automatically pull multiple image attachments from a WordPress posting and present them as a Flexslider gallery without needing to insert short-code or use a plugin? Yes? Then this tutorial is for you!

The Challenge

For some time now, I have been a fan of using Flexslider by WooThemes as an image gallery in my websites. I have even written up an exercise on how to implement it into a static site for my Human-Centered Design & Engineering students at the University of Washington.

See Also: Create an Image Slider with jQuery | HCDE598 | Premium Design Works

But, since I don’t really run any static sites any longer, I had to figure out how to integrate it into my WordPress sites.

In the past, I had used various gallery plugins that used shortcode:

Using Shortcode

The issue with this was that I had to write said shortcode and it’s attributes into each posting which is relatively inefficient. Basically, I did not want have to copy and paste shortcode from one posting to the next any longer.

See Also: Shortcode API | WordPress Codex

Instead, what I wanted was to have a gallery automatically render the images that I uploaded to each of the postings without any hassle. I also knew that I wanted this gallery to display at the top of all my postings.

Since I was already armed with Flexslider by WooThemes, the question then became, “How do I integrate this without using a plugin?”

Integrating Flexslider by itself is relatively easy.

First, you need to download the package and put the files in the necessary place:

Necessary FlexSlider Files

Once you have downloaded the package and placed the files in the correct place, you will need to hook the files up.

First, link to the stylesheet in your header.php file:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/flexslider.css" type="text/css" media="all" />

Second, link to the JavaScript in your header.php file:

<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.flexslider.js"></script>

Note: Don’t forget to link to the jQuery Library first!

Lastly, hook it up with the JQuery function in your header.php file:

<script type="text/javascript">
    $(window).load(function(){
        $('.flexslider').flexslider();
    })
</script>

But, when it comes to pulling the images from a posting without using a plugin is where the challenge was for me.

The Solution

This is where I needed to figure out a way to pull the images from a WordPress posting and write them into the markup that FlexSlider required.

The function that I wrote was, to me, both elegant and simple.

You can see this function in my functions.php file:

<?php

function add_flexslider() { // display attachment images as a flexslider gallery on single posting
     
    global $post; // don't forget to make this a global variable inside your function
    
    $attachments = get_children(array('post_parent' => $post->ID, 'order' => 'ASC', 'orderby' => 'menu_order', 'post_type' => 'attachment', 'post_mime_type' => 'image', ));
    
    if ($attachments) { // if there are images attached to posting, start the flexslider markup
        
        echo '<div class="flexslider">';
        echo '<ul class="slides">';
    
        foreach ( $attachments as $attachment_id => $attachment ) { // create the list items for images with captions
        
            echo '<li>';
            echo wp_get_attachment_image($attachment_id, 'large');
            echo '<p>';
            echo get_post_field('post_excerpt', $attachment->ID);
            echo '</p>';
            echo '</li>';
            
        }
    
        echo '</ul>';
        echo '</div>';
        
    } // end see if images
    
} // end add flexslider

?>

This is where I first needed to pull the array of data from WordPress using the get_children() function that can retrieve the attachments to a posting. I then needed to re-key the array to set my parameters of the gallery and declare it as the $attachments variable.

From there, it was a matter of writing a conditional statement to see if there were images attached to the posting. If there were, write the FlexSlider markup and use a foreach loop to call both the image using the wp_get_attachment_image() function and it’s caption using the get_post_field() function.

Once that function was written, I just needed to place the call to it within my single.php file:

 <?php add_flexslider(); ?>

Now, every time I create a new posting and add images to it, it will automatically display as a FlexSlider gallery!

• « Search Engine Optimization (SEO) in WordPress without a Plugin
• My Human Centered Design & Engineering Capstone Project »