Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question

2 Answers 2

up vote 3 down vote accepted

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;
}
share|improve this answer
    
Way to out do me on the explanation :) –  BandonRandon Dec 19 '11 at 10:03
    
I must have been seconds behind you. I was clicking the submit button as it displayed the possible answer message :} –  Jeremy Jared Dec 19 '11 at 10:10
    
Okay thank you both for your answers. But doesn't what you explained register a second sidebar, by having register_sidebar twice? Cause the idea is to style the widget and only that widget, then the user can put it anywhere in the sidebar and it keeps its style... –  iJamesPine Dec 19 '11 at 10:22
    
See my revised answer. If that doesn't cover it please respond with the exact scenario you're talking about. –  Jeremy Jared Dec 19 '11 at 11:30
    
I'm not worried about styling the same widget more than once. I'm trying to -simply- style a given widget individually, where it is placed in a sidebar isn't the issue. I could have two separate sidebars and I could style the $before_widget differently and that would work, but that's what I'm trying to avoid. I want to just have one sidebar but change the $before_widget (removing the background and border) for one given widget. E.G the search bar, or Twitter follower counter.. if this makes more sense. –  iJamesPine Dec 19 '11 at 12:04

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.