1

I'm using WooCommerce's Flexslider to, well, slide through a number of posts of a given category. Seen here: http://csl.nsta.org/development/

Hidden behind the image, is the slider's "flex-control-nav"...when styled, this shows as the dots at the bottom of the slider; without styling, they're just an numbered list, showing the number of the slide (1, 2, 3, 4, etc), not to be confused by the post's ID.

I'm trying to change the the content of the that control nav to display the post's title, and maybe even it's category.

I thought this might be done using data attributes for the posts in the slider, and then grabbing those via jquery. My problem is, I can't figure out how to loop through and get each of those post's attributes. I'm assuming I need to do some sort of "foreach" statement?

From the flexslider's jquery, here's the code for the control nav:

    setupPaging: function() {
      var type = (slider.vars.controlNav === "thumbnails") ? 'control-thumbs' : 'control-paging',
          j = 1,
          item,
          slide;
      slider.controlNavScaffold = $('<ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol>');

      if (slider.pagingCount > 1) {
        for (var i = 0; i < slider.pagingCount; i++) {
          slide = slider.slides.eq(i);
          if ( undefined === slide.attr( 'data-thumb-alt' ) ) { slide.attr( 'data-thumb-alt', '' ); }
          var altText = ( '' !== slide.attr( 'data-thumb-alt' ) ) ? altText = ' alt="' + slide.attr( 'data-thumb-alt' ) + '"' : '';           
          item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"' + altText + '/>' : '<a href="#">' + j + '</a>';
          if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
            var captn = slide.attr( 'data-thumbcaption' );
            if ( '' !== captn && undefined !== captn ) { item += '<span class="' + namespace + 'caption">' + captn + '</span>'; }
          }
          slider.controlNavScaffold.append('<li>' + item + '</li>');
          j++;
        }
      }

In the loop that is setup for the slider, here's the how the title is setup, in hopes of pulling their data attributes:

<h2 data-title="<?php the_title(); ?>" title="<?php the_title(); ?>" class="slider-post-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

I thought if I could replace j with some sort of foreach variable that gets the data-title from the titles.

I'm not sure how to accomplish this. Any suggestions? Thanks!

edit: The slider loop is setup using this:

class genesis_responsive_sliderWidget extends WP_Widget {

        function __construct() {
            $widget_ops = array( 'classname' => 'genesis_responsive_slider', 'description' => __( 'Displays a slideshow inside a widget area', 'genesis-responsive-slider' ) );
            $control_ops = array( 'width' => 200, 'height' => 250, 'id_base' => 'genesisresponsiveslider-widget' );
            parent::__construct( 'genesisresponsiveslider-widget', __( 'Genesis - Responsive Slider', 'genesis-responsive-slider' ), $widget_ops, $control_ops );
        }

        function save_settings( $settings ) {
            $settings['_multiwidget'] = 0;
            update_option( $this->option_name, $settings );
        }

        // display widget
        function widget( $args, $instance ) {
            extract( $args );

            echo $before_widget;

            $title = apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base );
            if ( $title )
                echo $before_title . $title . $after_title;

            $term_args = array( );

            if ( 'page' != genesis_get_responsive_slider_option( 'post_type' ) ) {

                if ( genesis_get_responsive_slider_option( 'posts_term' ) ) {

                    $posts_term = explode( ',', genesis_get_responsive_slider_option( 'posts_term' ) );

                    if ( 'category' == $posts_term['0'] )
                        $posts_term['0'] = 'category_name';

                    if ( 'post_tag' == $posts_term['0'] )
                        $posts_term['0'] = 'tag';

                    if ( isset( $posts_term['1'] ) )
                        $term_args[$posts_term['0']] = $posts_term['1'];

                }

                if ( !empty( $posts_term['0'] ) ) {

                    if ( 'category' == $posts_term['0'] )
                        $taxonomy = 'category';

                    elseif ( 'post_tag' == $posts_term['0'] )
                        $taxonomy = 'post_tag';

                    else
                        $taxonomy = $posts_term['0'];

                } else {

                    $taxonomy = 'category';

                }

                if ( genesis_get_responsive_slider_option( 'exclude_terms' ) ) {

                    $exclude_terms = explode( ',', str_replace( ' ', '', genesis_get_responsive_slider_option( 'exclude_terms' ) ) );
                    $term_args[$taxonomy . '__not_in'] = $exclude_terms;

                }
            }

            if ( genesis_get_responsive_slider_option( 'posts_offset' ) ) {
                $myOffset = genesis_get_responsive_slider_option( 'posts_offset' );
                $term_args['offset'] = $myOffset;
            }

            if ( genesis_get_responsive_slider_option( 'post_id' ) ) {
                $IDs = explode( ',', str_replace( ' ', '', genesis_get_responsive_slider_option( 'post_id' ) ) );
                if ( 'include' == genesis_get_responsive_slider_option( 'include_exclude' ) )
                    $term_args['post__in'] = $IDs;
                else
                    $term_args['post__not_in'] = $IDs;
            }

            $query_args = array_merge( $term_args, array(
                'post_type' => genesis_get_responsive_slider_option( 'post_type' ),
                'posts_per_page' => genesis_get_responsive_slider_option( 'posts_num' ),
                'orderby' => genesis_get_responsive_slider_option( 'orderby' ),
                'order' => genesis_get_responsive_slider_option( 'order' ),
                'meta_key' => genesis_get_responsive_slider_option( 'meta_key' )
            ) );

            $query_args = apply_filters( 'genesis_responsive_slider_query_args', $query_args );
            add_filter( 'excerpt_more', 'genesis_responsive_slider_excerpt_more' );

?>

        <div id="genesis-responsive-slider">
            <div class="flexslider">
                <ul class="slides">
                    <?php
                        $slider_posts = new WP_Query( $query_args );
                        if ( $slider_posts->have_posts() ) {
                            $show_excerpt = genesis_get_responsive_slider_option( 'slideshow_excerpt_show' );
                            $show_title = genesis_get_responsive_slider_option( 'slideshow_title_show' );
                            $show_type = genesis_get_responsive_slider_option( 'slideshow_excerpt_content' );
                            $show_limit = genesis_get_responsive_slider_option( 'slideshow_excerpt_content_limit' );
                            $more_text = genesis_get_responsive_slider_option( 'slideshow_more_text' );
                            $no_image_link = genesis_get_responsive_slider_option( 'slideshow_no_link' );
                        }
                        while ( $slider_posts->have_posts() ) : $slider_posts->the_post();
                    ?>
                    <li>

                    <?php if ( $show_excerpt == 1 || $show_title == 1 ) { ?>
                        <div class="slide-excerpt slide-<?php the_ID(); ?>">
                            <div class="slide-background"></div><!-- end .slide-background -->
                            <div class="slide-excerpt-border ">
                                <?php
                                    if ( $show_title == 1 ) {
                                ?>
                                <h2 data-title="<?php the_title(); ?>" title="<?php the_title(); ?>" class="slider-post-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                                <?php
                                    }
                                    if ( $show_excerpt ) {
                                        if ( $show_type != 'full' )
                                            the_excerpt();
                                        elseif ( $show_limit )
                                            the_content_limit( (int)$show_limit, esc_html( $more_text ) );
                                        else
                                            the_content( esc_html( $more_text ) );
                                    }
                                ?>
                            </div><!-- end .slide-excerpt-border  -->
                        </div><!-- end .slide-excerpt -->
                    <?php } ?>

                        <div class="slide-image">
                    <?php
                        if ( $no_image_link ) {
                    ?>
                            <img src="<?php genesis_image( 'format=url&size=slider' ); ?>" alt="<?php the_title(); ?>" />
                    <?php
                        } else {
                    ?>
                            <a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php genesis_image( 'format=url&size=slider' ); ?>" alt="<?php the_title(); ?>" /></a>
                    <?php

                        } // $no_image_link
                    ?>
                        </div><!-- end .slide-image -->

                    </li>
                <?php endwhile; ?>
                </ul><!-- end ul.slides -->
            </div><!-- end .flexslider -->
        </div><!-- end #genesis-responsive-slider -->

<?php
        echo $after_widget;
        wp_reset_query();
        remove_filter( 'excerpt_more', 'genesis_responsive_slider_excerpt_more' );

        }

        /** Widget options */
        function form( $instance ) {
            $instance = wp_parse_args( (array) $instance, array( 'title' => '') );
            $title = $instance['title'];
?>
        <p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'genesis-responsive-slider' ); ?> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /></label></p>
<?php
            echo '<p>';
            printf( __( 'To configure slider options, please go to the <a href="%s">Slider Settings</a> page.', 'genesis-responsive-slider' ), menu_page_url( 'genesis_responsive_slider', 0 ) );
            echo '</p>';
        }

        function update( $new_instance, $old_instance ) {
            $instance = $old_instance;
            $new_instance = wp_parse_args( (array) $new_instance, array( 'title' => '' ) );
            $instance['title'] = strip_tags( $new_instance['title'] );
            return $instance;
        }

}
  • I couldn't find flex slider on the link you have shared. – Nirmal Ram Oct 27 '16 at 2:18
  • You can use a control nav to control your slider. This control nav can contain any html and does not have to be and image. Check out the Slider w/thumbnail slider on this example page: flexslider.woothemes.com/thumbnail-slider.html – ngearing Oct 27 '16 at 3:20
  • @NirmalRam, It should be there now. It's not styled and currently under the heading "Articles 1-5" – NW Tech Oct 27 '16 at 15:11
  • @Nath I'm aware. My problem is getting dynamic information from the slides themselves, like the post title and category. – NW Tech Oct 27 '16 at 15:11
  • Do you know how to assign the data attributes to each image? Or do you need help with that too? Looping and retrieving the data isn't that hard, I can show you. But adding the titles to the HTML might depend on how you initialize the slider. Do you use a shortcode for adding the slider? – Dmitriy Gamolin Oct 28 '16 at 21:05
1
+50

It's a bit tricky to provide the solution that would work for you without full HTML. I've checked the linked page, but there's no pagination there (I've searched for flex-control-nav that you mentioned and didn't find it). So my solution comes from the code that you provided and from the HTML that I've seen on your page.

If I got you right then you just need to add a variable inside your loop and replace j with this variable. Here's the code:

setupPaging: function() {
    var type = (slider.vars.controlNav === "thumbnails") ? 'control-thumbs' : 'control-paging',
    j = 1,
    item,
    slide;
    slider.controlNavScaffold = $('<ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol>');

    if (slider.pagingCount > 1) {
        for (var i = 0; i < slider.pagingCount; i++) {
            slide = slider.slides.eq(i);
            if ( undefined === slide.attr( 'data-thumb-alt' ) ) { slide.attr( 'data-thumb-alt', '' ); }
            var altText = ( '' !== slide.attr( 'data-thumb-alt' ) ) ? altText = ' alt="' + slide.attr( 'data-thumb-alt' ) + '"' : '',
                slideTitle = jQuery('#genesis-responsive-slider .slider-post-title').eq(j).data('title');

            item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"' + altText + '/>' : '<a href="#">' + slideTitle + '</a>';
            if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
                var captn = slide.attr( 'data-thumbcaption' );
                if ( '' !== captn && undefined !== captn ) { item += '<span class="' + namespace + 'caption">' + captn + '</span>'; }
            }
            slider.controlNavScaffold.append('<li>' + item + '</li>');
            j++;
        }
    }
}

I tried too keep "on the safe side", so feel free to replace jQuery with $ if it doesn't cause conflicts. Also slideTitle definition might work like this:

slideTitle = slide.eq(j).find('h2.slider-post-title').data('title');

But since the definition of slider and slides isn't provided I'm not sure that it would work.

Please let me know about the result in a comment and I'd try to improve the answer if needed.

|improve this answer|||||
  • 1
    I've checked plugin's source code and I think both variants should work. – Dmitriy Gamolin Oct 28 '16 at 23:30
  • Thanks @dmitriy! Unfortunately, it didn't work. However, I did update my original post to show the loop for the slider. – NW Tech Oct 31 '16 at 16:06
  • I may have spoke too soon. There was an extra } that was added in the setupPaging ...that was might fault in copy/past in the original post. – NW Tech Oct 31 '16 at 16:15
  • Thanks for the feedback, @NWTech! So did it work after all? I've added the bracket in the end to close the setupPaging function, otherwise it would be lacking in my example. Also have you tried both variants? Notice that I replaced the semicolon with a comma before slideTitle declaration to avoid duplicating var. – Dmitriy Gamolin Oct 31 '16 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.