id summary reporter owner description type status priority milestone component version severity resolution keywords cc focuses
48492 Add 'before_widgetcontent' and 'after_widgetcontent' attributes to register_sidebar stwnigel "I want to address the widget HTML produced by WordPress which makes it unnecessarily difficult to write CSS rules targeted to content area in widgets.
The following register_sidebar():
{{{
register_sidebar(array(
'name' => esc_html__('Primary Sidebar','theme'),
'id' => 'theme_sidebar',
'description' => esc_html__('Primary Sidebar will be shown on the right side of the site if widgets are added here.', 'theme'),
'class' => '',
'before_widget' => '
',
'after_widget' => '
',
'before_title' => '',
'after_title' => '
',
));
}}}
will produce this HTML for Recent Posts widget:
{{{
}}}
If we have to style widgets like shown in this screenshot
[[Image(https://i.postimg.cc/D0c9LwTB/widget-style.jpg)]]
**with consistent padding for widget content in all widgets in one go**, an obvious way is to wrap the widget content by adding opening and closing div in before_title and after_title respectively like following.
{{{
register_sidebar(array(
'name' => esc_html__('Primary Sidebar','theme'),
'id' => 'theme_sidebar',
'description' => esc_html__('Primary Sidebar will be shown on the right side of the site if widgets are added here.', 'theme'),
'class' => '',
'before_widget' => '',
'after_widget' => '
',
'before_title' => '',
'after_title' => '
',
));
}}}
However, **this won't work nicely and will break the theme if user has not set a title for the widget**. Some WordPress widgets will show a default title even if user has not explicitly set a title which causes confusion among users.
This is how Twenty Sixteen targeted styling specific to widget content area:
{{{
.widget-area > :last-child, .widget > :last-child
{
margin-bottom: 0;
}
}}}
But **this fails to target Archives widget content when ""Display as Dropdown"" is selected** since the last child is a script element. **That's an inconsistency**.
If WordPress could **introduce optional 'before_widgetcontent' and 'after_widgetcontent' to register_sidebar(**), it will be possible to wrap the widget content and target the widget content area for all widget, with or without title in one go.
{{{
register_sidebar(array(
'name' => esc_html__('Primary Sidebar','theme'),
'id' => 'theme_sidebar',
'description' => esc_html__('Primary Sidebar will be shown on the right side of the site if widgets are added here.', 'theme'),
'class' => '',
'before_widget' => '
',
'after_widget' => '
',
'before_title' => '',
'after_title' => '
',
'before_widgetcontent' => '',
'after_widgetcontent' => '
',
));
}}}
Developers can save their time from writing unnecessary complicated CSS code to get a consistent style ( padding in my case ) for the widget content area.
== Relevant Stackoverflow question about this issue with complicated solutions:
https://wordpress.stackexchange.com/questions/185294/add-before-content-and-after-content-to-register-sidebar
https://wordpress.stackexchange.com/questions/74732/adding-a-div-to-wrap-widget-content-after-the-widget-title
https://wordpress.stackexchange.com/questions/107814/sidebar-widgets-dynamic-css-problem-with-widget-title?rq=1
https://wordpress.stackexchange.com/questions/128063/customizing-the-widget-content-markup?rq=1
" enhancement new normal Awaiting Review Widgets normal