Sidebar widgets – dynamic CSS : problem with widget-title

Not a good solution… but is a solution: using jquery.

register_sidebar( array (
  'name' => 'Left Widget Area',
  'id' => 'primary_widget_area',
  'before_widget' => '<li id="%1$s" class="widget %2$s"><div class="widget-title"></div><div class="widget-content">',
  'after_widget' => '</div></li><!-- .widget -->',
  'before_title' => '<span class="invisible-title" data-widget="%1$s" style="display:none;">',
  'after_title' => '</span>',
) );

and the JS

jQuery().ready(function($) {
  $('.invisible-title').each(function() {
    var title = $(this).html();
    var widgetid =  $(this).data('widget');
    $( '#' + widgetid ).find('.widget-title').html(title);
    $(this).remove();
  }); 
});

the good looking red bar is always displayed, empty if no title.

And if you don’t want red bar when there is no title, and also ajusting padding in this case? No problem. Change the above with:

jQuery().ready(function($) {
    $('.widget').each(function() {    
    var $title = $(this).find('.invisible-title');
    if ( ! $title.length ) {
        $(this).css('padding','3%').find('.widget-title').remove();
    } else {
        $(this).find('.widget-title').html($title.html());
        $title.remove();
    }
  }); 
});

And if you want that some widget have always the title bar and some others have only if there is a title? No problem again.
When wordpress prints the widget it add classes so you can recognize wich widget is. E. g. standard wordpress text widget will have ‘widget_text’ class.

jQuery().ready(function($) {
    $('.widget').each(function() {    
    var $title = $(this).find('.invisible-title');
    if ( ( ! $title.length ) && $(this).hasClass('widget_text') ) {
        $(this).css('padding','3%').find('.widget-title').remove();
    } else {
        $(this).find('.widget-title').html($title.html());
        $title.remove();
    }
  }); 
});

More detailed widget selection? Tip: every widget has an unique id…