Create a semi custom responsive WordPress slideshow

By
greg
Published: January 22, 2013Posted in: Design, Develop, WebTags:
http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/digg_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/reddit_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/dzone_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/stumbleupon_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/delicious_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/blogmarks_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/newsvine_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/google_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/myspace_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/facebook_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/yahoobuzz_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/sphinn_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/twitter_16.png

With our CMS, NuContent and also Drupal, we can create any type of list and make it manageable by anyone with a simple admin. I wanted to find the alternative in WordPress so I did some research. I found a very helpful plugin for this idea which imitates Drupal’s content types and field manager. You should be familiar with setting up a slideshow plugin and queuing up scripts in WordPress.
With WordPress the process is usually:

  1. Find a WordPress plugin that is typically built with a jQuery plugin that does at least half of what you need it to do
  2. Hack it to pieces
  3. Hide it from updates

A potentially easier method for the average front end developer (15-60 minutes without styling):

  1. Find the jQuery plugin that you actually WANT to use (not a WordPress plugin)
  2. Make it work in straight HTML and CSS in your WordPress theme on a specific template (index.php)
  3. Easily develop a way to manage the content associated with the plugin using Custom Field Suite and Custom Post Types UI – Learning how to work with Custom Post types in WordPress is strongly encouraged.
  4. Queue everything up in the functions file if you haven’t

This is how it works.

For this example I will show you how to create a slideshow with a “custom” admin panel in WordPress. I will use FlexSlider because the current WordPress plugins aren’t so flexible unless you’re familiar with modifying plugins, PHP, MySQL and ~1500 lines of someone else’s code. You can use any slider you want provided you understand how it works. For the most part, the end result is a repeating unordered list. Our goal is to make our admin panel loop added content into this list. You can ignore the extra fields in my example and simply attempt to loop two or three images in an unordered list before adding captions, buttons and links.

Slideshow screenshot example

Here we have a single slide example which isn’t the best looking but, note the following fields needed to make this work:

  1. Image (img)
  2. Heading (h1)
  3. Caption (p or span)
  4. Button (a)
  5. Button link (href)

If you’re familiar with a slideshow plugin, all of this might be contained in a list item with a container for the caption and other elements (2-5).

Our HTML might look something like this, but needs some PHP to work.



    


  • 
Some long long heading here.

    

    Some long long heading here.
    
Ipsum donor bliksem text text goes in this little space as a caption.
Learn More

    

    •

With that in the back of your mind, now it’s time to setup the custom post type called “slides” and add a new “slide” and publish it (empty for now)

Next, we need to create the fields per the above HTML and available fields. Note that these fields need to be added into a loop field (Slideshow in the below screenshot) in order to loop slides added to a single post. Assign these fields to the “slides” post type or whatever post type you want these fields to be added to. Feel free to hide the content editor unless you decide to use it.

Create a field loop with custom field suite plugin

After you have the fields added, go into your Slideshow post which is currently empty. You should see the custom fields on this editing page. I made note of this post “247″ which we will use shortly (see below). Add 2-3 sample slides for testing.

The PHP below could look something like this. For this example, this PHP is put directly on the index.php page. In short, the translation for the below PHP is pulling the loop field of “slideshow” where all my fields are located from the post ID of 247 if they are available. The post ID can be found by mousing over the post at the bottom of the page:

This code is built off of various pieces from the documentation. 

get('slideshow', 247);
if (!empty($fields)) {
foreach ($fields as $field) {
    echo '
  • ';
    echo ''.$field['slide_heading'].'';
    echo '
    '; 
    echo '
    ' . $field['slide_heading'] . '
    ';
    echo '
    ' . $field['slide_caption'] . '
    ';
    echo '' . $field['button_label'] . '';
    echo '
    ';
    echo '
    • ';
} }
?>

    If you reach this point and see some type of a repeating list of added rows/slides, you’re on the right track or nearly finished with the exception of adding any necessary styles. If you see empty HTML tags, something is disconnected from the WordPres back-end. If you have a broken list rather than a slideshow, you likely need to check for JavaScript errors.