Opened 5 years ago
#48492 new enhancement
Add 'before_widgetcontent' and 'after_widgetcontent' attributes to register_sidebar
Reported by: | stwnigel | Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | |
Component: | Widgets | Keywords: | |
Focuses: | Cc: |
Description
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' => '<div class="widget %2$s" id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="title">', 'after_title' => '</h3>', ));
will produce this HTML for Recent Posts widget:
<div class="widget widget_recent_entries" id="recent-posts-3"> <h3 class="title">Recent Posts</h3> <ul> <li><a href="https://test-site.local/markup-html-tags-and-formatting/">Markup: HTML Tags and Formatting</a></li> <li><a href="https://test-site.local/markup-image-alignment/">Markup: Image Alignment</a></li> <li> <a href="https://test-site.local/markup-text-alignment/">Markup: Text Alignment</a></li> </ul> </div>
If we have to style widgets like shown in this screenshot
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' => '<div class="widget %2$s" id="%1$s">', 'after_widget' => '</div></div>', 'before_title' => '<h3 class="title">', 'after_title' => '</h3><div class="widget-content">', ));
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' => '<div class="widget %2$s" id="%1$s">', 'after_widget' => '</div></div>', 'before_title' => '<h3 class="title">', 'after_title' => '</h3>', 'before_widgetcontent' => '<div class="widget-content">', 'after_widgetcontent' => '</div>', ));
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