Distinguish between different widgets of the same type

Question

I'm playing a little with wordpress widgets and I trying to do something like this:

I created a sidebar and a widget to display a slider with latest posts. The jQuery loader is something like this:

jQuery('#slider-wrap-id').mySlider({
    //args
});

Ok, there aren´t problems if user include one of this slider of sidebar. But if two sliders or more was been included there are problems because the slider wrape have the same id.

<div id="slider-wrap-id">
    <!--slides-->
</div>

My aproach at the moment is the following:

In widget function I create a hook with parameters to load slider like this.

Note: pseudo code

class Vi_Posts_Slider_Widget extends WP_Widget {

    function Pi_Posts_Slider_Widget() { 
        //register args 
    }

    //the key function to solve my problem, maybe :)
    function widget( $args, $instance ) {
        //extract, WP_Query to retrive posts ...
        //ok now the key, I want to define slider id dynamically
        <div id="$id"></div>
        //finally generate hook to load slider
        do_action('vi_posts_slider_widget', array(......, 'slider_id' => $sid ) );
    }

    // update and form functions
}

//load individual sliders with diferent id and arguments
function vi_load_slider($sldier_opts){
    <script type="text/javascript">
        jQuery('<?php echo $sldier_opts['id'] ?>').mySlider({
            //args using $slider_opts
        });
    </script>
} 
add_action('vi_posts_slider_widget', 'vi_load_slider');

the only argument I need is the current widget id. For example when I register sidebars I created like this:

register_sidebar(array(
    'name' => __('Default Sidebar', "theme_textdomain"),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    // $s provide the single id
    //............
));

By this way the results look lik this.

<div id="sample-widget-1">
<div id="sample-widget-2">
.......

I'm trying to find the same approach to define unique sliders id. If you have any advice or suggestion please push me in the right direction.

PD: so sorry for my English, I´m learning at the same time WordPress and English :)

Answer 1

The correct practice is actually to use $args['before_widget] and $args['after_widget'] to handle the id, class, and anything else. In pseudo code:

class My_Widget extends WP_Widget {
    function My_Widget() {

        //basic widget settings.
        $widget_ops = array(
            'classname'   => 'my-name',
            'description' => 'This is the description'
        );

        //widget control settings.
        $control_ops = array(
            'id_base' => 'my-name-widget'
        );

        //create widget
        $this->WP_Widget( 'my-name-widget', 'Widget Title', $widget_ops, $control_ops );

    }
    function widget( $args, $instance ) {

        // split $args
        extract( $args );

        /* Our variables from the widget settings. */
        $title = apply_filters( 'widget_title', $instance['title'] );
        //apply any additional settings here

        /* Before widget (defined by themes). */
        echo $before_widget;

        /* Display the widget title if one was input (before and after defined by themes). */
        if( $title )
            echo $before_title . $title . $after_title;

        // do all the widget output

        /* After widget (defined by themes). */
        echo $after_widget;
    }
}

If you're still a bit confused, print_r() $args and you'll see what all you have available to you. If you're STILL confused, Justin Tadlock has a great guide that will get you going in the right direction.

It's important that you use $before_widget and $after_widget because if someone were to register the widgets with <li>s and you had hardcoded <divs>, they would pretty quickly either become frustrated, or just move away from your code altogether.