Adding custom class to every widgets in wordpress, what’s your approach?

3 Views

I’m creating a theme for wordpress and I am having problem implementing image replacement on headers on my widgets.

How do you I add a custom class or id to wrap my widgets?

Read More

for example

HTML: 

<div id="sidebar">
  <div id="customWidgetId">
     <h2>This Title will be replace by an Image</h2>
     <p>Wordpress 'Text' Widget content here</p>
  </div> 

  <div id="anotherCustomWidgetId">
     <h2>This Title will be replace by an Image</h2>
     <p>Wordpress 'Text' Widget content here</p>
  </div> 

  <div class="customClass">
     <h2>This Title will be replace by an Image</h2>
     <p>Wordpress 'Text' Widget content here</p>
  </div> 

</div>

CSS: 

#anotherCustomWidgetId h2 {
 text-indent: -1000em;
 background: url of my image;
 width: ;
 height: ;
}

I need to have control of the ID and classes to my widgets. so I can create custom css Image replacement for the widgets.

If your in my shoes how would you implement that in wordpress?.

Thanks!

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. If you’re just looking to add a single class to every widget (I’ve done this for the clearfix fix) then add in another line to register_sidebar, like so…

         register_sidebar(array(
        'id' => 'sidebar1',
        'name' => 'Sidebar (Main)',
        'description' => 'Primary sidebar',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>',
        'class' => 'clearfix'
    ));

    This has added a class of ‘clearfix’ to all of my widgets.

  2. If you do not know what the widget classes would be (and cannot change them or do not want to change them) I would just target the h2 elements within sidebar with CSS3 using nth:child and offer support for browsers that do not implement it with javascript.

    You could amend the widgets (found in your plugin folder) to add specific classes or
    if you do not want a dynamic sidebar call each widget using the_widget() template tag. The widget template tag takes arguments to allow you to put html before and after the widget title and the widget itself which you can use for css hooks

    The codex has been kindly updated at User bono contribution

  3. this is what worked for me – wanted to give special class to widget content – class=”widget-content” – rest can stay the way it was 🙂

    register_sidebar( array(
    'name' => __( 'Blog Sidebar'),
    'id' => 'sidebar-blog',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => "</div></aside>",
    'before_title' => '',
    'after_title' => '',
) );

function add_widget_content_wrapper($content) {
    $new_content = '<div class="widget-title">';
    $new_content.= $content . '</div><div class="widget-content">';
    return $new_content;
}   
add_filter('widget_title', 'add_widget_content_wrapper');