0

Fortunately or unfortunately without much studying I made a dynamic sidebar widget area for my client's website.

My functions.php codes are:

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

and the sidebar is called with:

<ul>
<?php if ( is_sidebar_active('primary_widget_area') ) : ?>
   <?php dynamic_sidebar('primary_widget_area'); ?>
<?php endif; ?>
</ul>

Thing is nicely done, BUT...in two conditions:

When widget-title is active

...it loads...

<ul>
   <li class="widget">
      <div class="widget-title">widget title...</div>
      <div class="widget-content">
        widget contents here...
      </div>
   </li>
</ul>

When widget-title is blank

...it loads...

<ul>
   <li class="widget">
     widget contents here...
   </li>
</ul>

Now with my CSS the look of the dynamic widgets are like:
my dynamic widgets

As I identified the problem is: in register_sidebar() function there are only 4 options:

  1. before_widget
  2. after_widget
  3. before_title
  4. after_title

With these there can be only two conditions:

  • Widget Title Active: Load 1,2,3,4
  • Widget Title Absent: Load 1,2 only

So with my functions.php code, the <div class="widget-content"></div> completely missed when the title field remains blank. And so, without 4-sided-padding the content of the widget area looks bordered and looks ugly.

PROBLEM

If I put padding: 3%; in .widget, it changes the widget-title's look and take padding around it, and it too looks bad.
dynamic widget with padding in .widget

But it solves the widget-title-less widgets' look.

PROBABLE SOLUTION

So, I thought about a solution, if I can make a conditional CSS, like:

<?php
if( active_widget_title() ) : ?>
<style>
.widget{
  my default css;
 }
</style>
<?php else : ?>
<style>
.widget{
   padding: 3% !important;
  }
</style>
<?php endif; ?>

But alas! there is NO SUCH THING like active_widget_title() as per as I know.

So, without that, how can I solve this very minute problem of designing the dynamic widgets?

EDIT:

And the most shocking problem is: when the title is absent, there is a <div> malfunction, because the structure happened there looks:

<ul>
   <li class="widget">
     widget contents here...
     </div> <!-- .widget-content ended without starting -->
   </li>
</ul>

An end-div (</div>) without a starting one. That's making a massacre to the template. :(

1

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...

  • That's a nice thought to make solution for this, but as you said, "the good looking red bar is always displayed, empty if no title" - that's not a problem to me at all. I can do it without any jQuery by simply putting a HTML &nbsp; into the widget-title to show it blank. I, basically facing the problem with the association of <div> (see the 'edit'). In some cases I need not the red bar, i.e. when an advertisement is displayed. So... :( . But thanks for a new idea at least. :) – Mayeenul Islam Jul 26 '13 at 9:17
  • 1
    Can easily hide red bar via css or enen jquery... I updated the answer. – gmazzap Jul 26 '13 at 9:37
  • Thanks a lot. But a little problem. It's preventing the title-given titles to be displayed too. It means, even where I've given a title to the applied widget, that's invisible too. :( And I'm afraid, I'm dumb in js. :( – Mayeenul Islam Jul 26 '13 at 17:53
  • 1
    Edit again the answer. This time I gived solution for different cases. – gmazzap Jul 26 '13 at 19:10
  • Thanks a lot. It works like a magic. And my problem is solved. :) Thanks a lot, for your patience all through the answering. Thanks a loooooot. :) – Mayeenul Islam Jul 27 '13 at 18:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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