将div设置为widget的内容| WordPress的

Question

I'm creating a custom sidebar on Wordpress to display independent blocks, and each block has a widget in it. To do so, I registered widget areas in functions.php, and then added those widget areas to my sidebar.

The sidebar is set like this :

<aside class="sidebar-right" role="complementary">
<div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-1')) ?>
</div>
<div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-2')) ?>
</div>
<div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-3')) ?>
</div>
<div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-4')) ?>
</div>
</aside>

I roughly want my sidebar to look like this : https://jsfiddle.net/b7xtksts/

This is how the widget is called in functions.php :

register_sidebar(array(
    'name' => __('Widget Area 1'),
    'description' => __('Description'),
    'id' => 'widget-area-1',
    'before_widget' => '<div id="%1$s" class="%2$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="widget-title-background"><h3>',
    'after_title' => '</h3></div>'
));

Everything works fine, but I would like to add padding to every widget's content, without having to edit the original widget, so that every widget added in the future will fit properly thanks to the padding.

But if I set padding to, let's say, <div id="%1$s" class="%2$s" style="padding:10px;">, the padding is added to the whole widget, and the background title as well (which doesn't fill 100% of the box anymore). I'm trying to figure out how I could set a padding to the widget's content without affecting the div title above. Since there are only before/after _widget and _title, how can I set a class to the content only ?

Answer 1

Seems like we cannot add any specific class to content body of the widget.

One option I suggest is following:

1. Add padding to your parent widget div like you did e.g.

   .sidebar-widget{ padding: 0 10px; }

2. To remove the effect of 10px padding on sides on the title background div, we cancel it with the negative margin on side i.e.

   .widget-title-background{ margin-left: -10px; margin-right: -10px; }

This will make your title's dark shaded div go around the corners, canceling the effect of the padding on the main div.