How to create new widget areas with a child theme in WordPress

In this tutorial, I'll show you how you can easily register and display new widget areas for your theme with a child theme and some code.

Additional areas for widgets under individual posts are often useful, for example to show advertising banners or a newsletter form. Two weeks ago I presented the Widget Areas plugin for this use case here in the blog .

It is also possible to add further widget areas without using plugins by registering new sidebars with a child theme and displaying them in the theme. This tutorial shows how you can display widgets for the new standard theme TwentySeventeen with a child theme under the posts.

Register the widget area in the WordPress backend

The first thing to do is to create a child theme for TwentySeventeen - if you need help, I recommend my step-by-step guide for child themes .

To create a new widget area in the WordPress backend, we need the following small snippet of code, which is added to the functions.php of the child theme :

 function twentyseventeen_child_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'After Posts', 'twentyseventeen-child' ), 'id' => 'sidebar-after-posts', 'description' => esc_html__( 'Appears below single posts.', 'twentyseventeen-child' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'twentyseventeen_child_widgets_init' );

The new sidebar is created with the register_sidebar () function. The parameters can be used to define the name, ID, description and the wrapper HTML code used for the widget. It is important that the function for registering the widgets is widgets_init into WordPress with the widgets_init hook.

After adding the code, the new widget area After Posts should be available under Design → Widgets and in the Customizer.

You can add a few widgets for testing.

Show widget area in theme

While our new widget area in the WordPress backend is already fully functional, the widgets are not yet displayed anywhere in the frontend. We're changing that now.

With a child theme, the template files of the parent theme can be overwritten in order to make changes. We therefore copy the single.php from TwentySeventeen into our child theme in order to modify it there and add the new widget area.

To display the widgets, we add the following snippet of code, directly above the comment area. Of course, the widgets can also be inserted at a different location if you wish.

 if ( is_active_sidebar( 'sidebar-after-posts' ) ) : ?> <div class="sidebar-after-posts widget-area"> <?php dynamic_sidebar( 'sidebar-after-posts' ); ?> </div><!-- .widget-area --> <?php endif; // If comments are open or we have at least one comment, load up the comment template.

Is_active_sidebar () is used to check whether there are widgets in the sidebar. If so, the sidebar is displayed with dynamic_sidebar () . For both functions, the ID of the widget area is transferred as a parameter, which we previously defined when registering the sidebar.

Optional: additional styling with CSS

Usually the widgets take over the design of the theme, so that usually no additional styling is necessary.

In our example for TwentySeventeen, we only add a little space to the top for the new sidebar so that it doesn't stick directly under the article. The CSS code can be entered in the style.css of the child theme:

 .sidebar-after-posts { margin-top: 5em; }

and that's it.

With two small code snippets in the child theme, we have added a new sidebar under the posts. If you want, you can now display the same sidebar in other places in the theme, for example under static pages (tip: page.php).

Do you have any suggestions or questions about this tutorial?

Please write me a comment!