title: Adding caption area to 'Flexslider Plug-in'
body: <p>I have this question on the Wordpress stack exchange as well, but not having any luck there. So, as my solution probably involves me hard-coding php and css, It may be better to have it here.</p>
  
  <p>I'm using 'Flex Slider' plugin - that works on top of 'WP rotator' plug-in on my Wordpress 3.2 website. I have it implemented fine, and beginning to look at inserting my content - but I need to add a caption to be on top of the slider. As are present on most sliders on the web, within the documentation of the non-Wordpress plugin of the tool it suggests I can do something like;</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
    &lt;div class="flexslider"&gt;
      &lt;ul class="slides"&gt;
        &lt;li&gt;
          &lt;img src="slide1.jpg" /&gt;
          &lt;p class="flex-caption"&gt;Captions and cupcakes. Winning combination.&lt;/p&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="slide2.jpg" /&gt;
          &lt;p class="flex-caption"&gt;This image is wrapped in a link!&lt;/p&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="slide3.jpg" /&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Problem is; with the Wordpress plug-in version, I can't find that markup to work inside.</p>
  
  <p>Here's the only non-css non-js file in the plug-ins directory, so I assume I have to work in there. </p>
  
  <p>I've tried inserting the mark-up that was suggested non-Wordpress above, but not sure where to insert it as it's broke it with my attempts thus far.</p>
  
  <pre><code>&lt;?php
  /*
  Plugin Name: Flex Slider for WP Rotator
  Plugin URI: http://wordpress.org/extend/plugins/flex-slider-for-wp-rotator/
  Description: Turns WP Rotator into FlexSlider, a fully responsive jQuery slider.
  Version: 1.1
  Author: Bill Erickson
  Author URI: http://www.billerickson.net/blog/wordpress-guide
  */
  
  class BE_Flex_Slider {
      var $instance;
  
      function __construct() {
          $this-&gt;instance =&amp; $this;
          register_activation_hook( __FILE__, array( $this, 'activation_hook' ) );
          add_action( 'plugins_loaded', array( $this, 'init' ) ); 
      }
  
      /**
       * Activation Hook
       * Confirm WP Rotator is currently active
       */
      function activation_hook() {
          if( !function_exists( 'wp_rotator_option' ) ) {
              deactivate_plugins( plugin_basename( __FILE__ ) );
              wp_die( sprintf( __( 'Sorry, you can&amp;rsquo;t activate unless you have installed &lt;a href="%s"&gt;WP Rotator&lt;/a&gt;', 'flex-slider-for-wp-rotator'), 'http://wordpress.org/extend/plugins/wp-rotator/' ) );
          }
      }
  
      function init() {
          // Remove original scripts and styles
          remove_action('wp_head','wp_rotator_css');
          remove_action('admin_head','wp_rotator_css');
          remove_action('wp_head','wp_rotator_javascript');
          remove_action('admin_head','wp_rotator_javascript');
          remove_action('init','wp_rotator_add_jquery');
          remove_action('admin_init','wp_rotator_add_jquery');
  
          // Enqueue Scripts and Styles
          add_action( 'init', array( $this, 'enqueue_scripts_and_styles' ) );
  
          // Remove original outer markup
          remove_action( 'wp_rotator', 'wp_rotator' );
  
          // Add new markup
          add_action( 'wp_rotator', array( $this, 'flex_slider' ) );
          remove_shortcode( 'wp_rotator' );
          add_shortcode( 'wp_rotator', array( $this, 'flex_slider_markup' ) );
      }
  
      function enqueue_scripts_and_styles() {
          // Use this filter to limit where the scripts are enqueued.
          $show = apply_filters( 'be_flex_slider_show_scripts', true );
          if ( true === $show ) {
              wp_enqueue_style( 'flex-slider', plugins_url( 'flexslider.css', __FILE__ ) );
              wp_enqueue_script( 'jquery ');
              wp_enqueue_script( 'flex-slider', plugins_url( 'jquery.flexslider-min.js', __FILE__ ), array( 'jquery' ) );
              add_action( 'wp_head', array( $this, 'flex_slider_settings' ) );
          }
      }
  
      function flex_slider_settings() {
          ?&gt;
          &lt;script type="text/javascript" charset="utf-8"&gt;
            jQuery(window).load(function() {
              jQuery('.flexslider').flexslider({
                  &lt;?php
                  $flex_settings = array(
                      'animation' =&gt; '"' . wp_rotator_option( 'animate_style' ) . '"',
                      'slideshowSpeed' =&gt; wp_rotator_option( 'rest_ms' ),
                      'animationDuration' =&gt; wp_rotator_option( 'animate_ms' ),
                  );
  
                  $flex_slide_settings = array(
                      'controlsContainer' =&gt; '".flex-container"'
                  );
  
                  if( 'slide' == wp_rotator_option( 'animate_style' ) )
                      $flex_settings = array_merge( $flex_settings, $flex_slide_settings );
  
                  $flex_settings = apply_filters( 'be_flex_slider_settings', $flex_settings );
                  foreach ( $flex_settings as $field =&gt; $value ) {
                      echo $field . ': ' . $value . ', ';
                  }
                  ?&gt;
              });
            });
          &lt;/script&gt;
          &lt;?php
      }
  
      function flex_slider_markup() {
          $output = '';
  
          if( 'slide' == wp_rotator_option( 'animate_style' ) )
              $output .= '&lt;div class="flex-container"&gt;';
  
          $output .= '&lt;div class="flexslider"&gt;&lt;ul class="slides"&gt;';
  
          $loop = new WP_Query( esc_attr( wp_rotator_option('query_vars') ) );
          while ( $loop-&gt;have_posts() ): $loop-&gt;the_post(); global $post;
  
              $url = esc_url ( get_post_meta( $post-&gt;ID, 'wp_rotator_url', true ) );
              if ( empty( $url ) ) $url = get_permalink($post-&gt;ID);
              $show_info = esc_attr( get_post_meta( $post-&gt;ID, 'wp_rotator_show_info', true ) );
              if ( true == $show_info ) {
                  $title = get_the_title();
                  if ( get_the_excerpt() ) $excerpt = get_the_excerpt(); 
                  else $excerpt = '';
                  $caption = $title . ' &lt;span class="excerpt"&gt;' . $excerpt . '&lt;/span&gt;';
                  $info = '&lt;p class="flex-caption"&gt;' . apply_filters( 'be_flex_slider_caption', $caption, $title, $excerpt ) . '&lt;/p&gt;';
              } else {
                  $info = '';
              }
              $image =  wp_get_attachment_image_src( get_post_thumbnail_id(), 'wp_rotator' );
  
              $slide = '&lt;li&gt;&lt;a href="' . $url . '"&gt;&lt;img src="' . $image[0] . '" /&gt;&lt;/a&gt;' . $info . '&lt;/li&gt;';
              $output .= apply_filters( 'be_flex_slider_slide', $slide );
  
          endwhile; wp_reset_query();
  
          $output .= '&lt;/ul&gt;&lt;/div&gt;';
  
          if( 'slide' == wp_rotator_option( 'animate_style' ) )
              $output .= '&lt;/div&gt;';
  
          return $output;
      }
  
      function flex_slider() {
          echo $this-&gt;flex_slider_markup();
      }
  
  }
  
  new BE_Flex_Slider;
  ?&gt;
  </code></pre>
  
  <p>I have contacted the plug-in developer, he's not responding so I assume hes not going to support my question - so I'm left to handcode. </p>
  
  <p><a href="http://wordpress.org/extend/plugins/wp-rotator/" rel="nofollow">http://wordpress.org/extend/plugins/wp-rotator/</a></p>
  
  <p><a href="http://flex.madebymufffin.com/" rel="nofollow">http://flex.madebymufffin.com/</a></p>
  
  <p><a href="http://wordpress.org/extend/plugins/flex-slider-for-wp-rotator/" rel="nofollow">http://wordpress.org/extend/plugins/flex-slider-for-wp-rotator/</a></p>
  
  <p>Thanks for any pointers!</p>