Changing $before_widget for certain widgets

3 Views

So I’m working on designing a WordPress theme with lots of extra widgets. The ones I have added are in separate files, and called in the functions.php I have lots of css on the widgets themselves and the div classes are in the $before_widget and $after_widget etc in functions.php. My problem is that for certain widgets I don’t want the same CSS, for example no background or border. I can’t seem to work out how to go about this. If that makes sense. Thanks in advance!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. There are 2 ways to allow separate styles on each widget. The first is to add separate classes to the widgets like this:

    First Method

    register_sidebar(array('name'=>'sidebar1',
 'before_widget' => '<ul class="black-bg"><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

    You can then use the .back-bg class to style the widget like this:

    #sidebar .black-bg {
background:black;
}

    and with no border:

    register_sidebar(array('name'=>'sidebar2',
 'before_widget' => '<ul class="no-border"><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

    the css would be for instance:

    #sidebar .no-border {
border:none;
}

    The Second Method

    You could also use the theme file where you’re placing the call to the sidebar/widget. For this way you would just use the same before and after widget, but use a class or id to wrap the sidebar in the template file like this:

    register_sidebar(array('name'=>'sidebar1',
 'before_widget' => '<ul><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));
register_sidebar(array('name'=>'sidebar2',
 'before_widget' => '<ul><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

    Then in whatever-themefile.php you could do this:

      <div class="black-bg">
    <?php if ( function_exists ( dynamic_sidebar(1) ) ) : ?>
    <?php dynamic_sidebar (1); ?>
    <?php endif; ?>
  </div>

    The style:

    .black-bg {
background:black;
}

    And…

      <div class="no-border">
    <?php if ( function_exists ( dynamic_sidebar(2) ) ) : ?>
    <?php dynamic_sidebar (2); ?>
    <?php endif; ?>
  </div>


.no-border {
border:none;
}

    Response to Comment:

    I just assumed you meant sidebar. Most refer to custom sidebars as “widgets”, so let me try again.

    I don’t completely picture what you’re wanting, but each custom widget you register will have it’s own class. If the widget is used more than once, it just seems to make sense to me to use the “location” it will be placed to handle the styling (which would be the dynamic_sidebar it’s place in).

    If you’re talking about how to add separate style to a single widget that is placed more than once in a given sidebar I would simply use the css pseudo selectors (odd/even). For example:

    /*EVEN*/
#sidebar .black-bg:nth-child(even) {
background:transparent;
border:none;
}

/*ODD*/
#sidebar .black-bg:nth-child(odd) {
background: black;
border:1px dotted silver;
}

  2. That’s what $before_widget is all about. You would do array('before_widget' => '<span class="some-class".',after_widget' => '</span>) then style .some-class to whatever you want. You can have more than one class or even style it by the widgets ID. If this isn’t what you’re asking please clarify the question.