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:


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">

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
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:

    '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 :)


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.

| improve this answer | |
  • Oh my god, print_r(). Now I'm using $widget_id and the objetive is completed. The article linked is awesome. Thanks a lot. – Marcos Feb 12 '12 at 22:48

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.