WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How To Give Widgets Individual ID's or Classes? (6 posts)

  1. sabster
    Member
    Posted 1 year ago #

    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: http://www.simonsayswebsites.com/how-we-get-you-more-customers/

    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') ){
        register_sidebar(array(
            '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.

  2. ronangelo
    Member
    Posted 1 year ago #

    <?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.

    http://codex.wordpress.org/Function_Reference/register_sidebar

  3. sabster
    Member
    Posted 1 year ago #

    @ronangelo

    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!

  4. tanujdamani
    Member
    Posted 9 months ago #

    What the file in which you made this change?

  5. fusionPT
    Member
    Posted 7 months ago #

    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?

    Thanks.

  6. esmi
    Forum Moderator
    Posted 7 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic