WordPress.org

Ready to get started?Download WordPress

Forums

register_sidebar - whats the purpose of "class"? It doesn't do anything? (3 posts)

  1. Leo Blanchette
    Member
    Posted 11 months ago #

    register_sidebar() takes some $args.

    <?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>' ); ?>

    I'm trying to add a class to the inner-most HTML where the given widget will be inserted.

    Example:

    <div class="panel panel-default home-beside-content">
       <aside class="widget widget_text" id="text-8">
          <div class="row panel-heading">
             <h3 class="featured-posts col-md-12">This is a test</h3>
          </div>
          <div class="textwidget">This is a test</div>
       </aside>
    </div>

    I'd like to add the class "panel-body" to the textwidget area. Like so:

    <div class="textwidget">This is a test</div>

    Becomes:

    <div class="textwidget panel-body">This is a test</div>

    Its very important this class is put here in particular because bootstrap requires this nesting.

    http://getbootstrap.com/components/#panels

    So when I add the class to the args, nothing happens --- hence I ask how do you insert a class into this part of the widget? I would assume by doing this:

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

    But the class shows up nowhere in the HTML.

    I am desperately in need of help on this one :D Thank you.

  2. alchymyth
    Forum Moderator
    Posted 11 months ago #

    add the class to the 'before_widget' parameter;

    example:

    'before_widget' => '<li id="%1$s" class="panel-body widget %2$s">',

    the 'class' parameter is (only) used in the css in the dashboard - apperance - widgets page, as .sidebar-{class} ...

  3. Leo Blanchette
    Member
    Posted 11 months ago #

    Thank you for your help. See example:

    <div class="panel panel-default home-beside-content">
       <aside class="widget widget_text" id="text-8">
          <div class="row panel-heading">
             <h3 class="featured-posts col-md-12">This is a test</h3>
          </div>
          <div class="textwidget">This is a test</div>
       </aside>
    </div>

    The problem remains, simply because of the order/way in which the widget is constructed. Is there a way I can change the structure of the default sidebar?

    For instance, the before_widget should contain the class "panel panel-default"

    NEXT should come the title:

    <div class="row panel-heading">
         <h3 class="panel-title featured-posts col-md-12">This is a test</h3>
    </div>

    (Notice the presence and order of panel-heading, panel-title)

    UNDER THAT should come "panel-body"

    <div class="panel-body">the widget</div>

    It seems impossible to obey that hierarchy when I register a widget. I can cheat it by having the after_title contain a: <div class=panel-body'> and the after_widget contain a </div> but of course that breaks if the user does not provide a title.

    This is a real paradox! Is there a way to change the default template? Or add a class to that inner-most widget area?

    Obeying bootstrap 3 structure is a real pain :D

Reply

You must log in to post.

About this Topic