WordPress.org

Make WordPress Core

Opened 9 months 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

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' => '<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

Change History (0)

Note: See TracTickets for help on using tickets.