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:
As I identified the problem is: in register_sidebar()
function there are only 4 options:
- before_widget
- after_widget
- before_title
- 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.
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. :(