Support » Themes and Templates » How To Give Widgets Individual ID's or Classes?

  • Resolved sabster


    On my wordpress installation, I created a new theme for a new page template I created. However, when I goto create new widgets, each widget automatically gets the class of “textwidget”. I have two different styles I have for widgets that require different styles, so I’m not too sure how to give each indivudal widget a different class or to label them differently?

    Anyone know how to do this?

    Here’s a page from my site with the 2 widgets:

    You can see each one is within a widget that has the same class name.

    This is what I added to my page functions.php to add the widget:

    if ( function_exists('register_sidebar') ){
            'name' => 'sidebarpage',
            'before_widget' => '<div id="sidebarpage">',
            'after_widget' => '</div>',
            'before_title' => '',
            'after_title' => '',

    And here’s the snippet from the page template itself for it to display:

    <?php /* Widgetized sidebar */
        if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebarpage') ) : ?><?php endif; ?>

    I could make it using different widgetized areas, but want to learn about having individual widget styles.

Viewing 5 replies - 1 through 5 (of 5 total)
  • ronangelo


    <?php $args = array(
    	'name'          => __( 'Sidebar name', 'theme_text_domain' ),
    	'id'            => 'unique-sidebar-id',
    	'description'   => '',
            'class'         => '',
    	'before_widget' => '<li id="%1$s" class="widget %2$s">',
    	'after_widget'  => '</li>',
    	'before_title'  => '<h2 class="widgettitle">',
    	'after_title'   => '</h2>' ); ?>

    id="%1$s" this gives the widgets their own ID. Classes are supposed to be the same. You can style a widgets depending on what type of widget it is. example .widget_text will target all text-widgets. Or you can style them individually by using their unique IDs.




    awesome thank you so much for the example and showing me how it gets a new id for each widget. that really clears it up for me. thanks again!

    What the file in which you made this change?

    I’m trying to have my widgets to have it’s own separate class (using the example above) but instead of getting a different class for each (ex: widget-1, widget-2, etc…) I get <div class='widget- %2$s'

    What am I doing wrong?


    @fusionpt: If you require assistance then, as per the Forum Welcome, please post your own topic. This topic has been resolved.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How To Give Widgets Individual ID's or Classes?’ is closed to new replies.