Automatically adjust the theme layout in WordPress if there are no sidebar widgets

In this tutorial I would like to introduce a small snippet of code that you can use to automatically adjust the theme layout if the sidebar does not have any widgets. Instead of displaying a two-column layout with an empty sidebar if there are no widgets, you can switch to a single-column layout.

WordPress theme layout without sidebar

Many themes use a two-column layout with a right sidebar. Sometimes, however, widgets are not needed and users want to display the content on the entire page - without a sidebar. There are various technical options for this.

A few weeks ago I wrote about the implementation of a theme option for changing the sidebar position in the customizer . This theme setting can also be used to offer a layout without a sidebar. The main disadvantage of this is that it configures the layout for all pages of the theme.

That is why offering a full width page template is very popular, with which only certain, static pages can be configured for a layout without a sidebar. With WordPress 4.7, templates for other post types are also included in the core, making full width templates possible for normal posts and custom post types.

Design the theme layout depending on the existing widgets

In this post, however, I would like to discuss another technical solution for a full-width layout without a sidebar. With this method, the theme itself decides whether it is displayed with a one-column or two-column layout. The decision is simply made based on whether there are any widgets in the sidebar.

This increases the usability of the theme. For example, if all widgets are removed, no empty sidebar is left behind. In contrast to the other methods, the theme options or page templates do not have to be reconfigured in order to display the full-width layout.

Another advantage is that the method is in perfect harmony with the various "Conditional Widgets" plugins. These plugins such as Jetpack's Widget Visibility Module, Widget Logic or Display Widgets allow you to enter conditions for the display of widgets. This allows widgets to be specifically displayed or hidden on certain pages, posts, archives or categories.

If the widgets are only displayed on certain posts, pages or archives with the help of these plugins, a single-column layout is used on the pages without widgets. Without any options, templates or the like.

Incidentally, the idea for this didn't come from me, but from the User Experience Requirements theme  from WordPress.com.

The following rule is laid down there:

If a layout normally has two columns or more with widgets, the layout should adjust to a single column if a user has not added widgets to the sidebar, without displaying an empty column. Reason : This gives users flexibility to have a single-column layout without needing a page template or theme option.

In the following I describe the technical implementation with code examples.

Add a class in the body if there are no widgets

The implementation of the method is straightforward. You can use the is_active_sidebar () function to check whether there are widgets in the sidebar. If this is not the case, an extra class no-sidebar can be added with the body_class filter. With this class you can then adapt the layout in the style.css .

 /** * Adds custom classes to the array of body classes. * * @param array $classes Classes for the body element. * @return array */ function theme_slug_body_classes( $classes ) {   // Add no-sidebar class.   if ( ! is_active_sidebar( 'sidebar' ) ) {      $classes[] = 'no-sidebar';   }   return $classes; } add_filter( 'body_class', 'theme_slug_body_classes' );

The CSS code could look something like this:

 .content-area {   float: left;   box-sizing: border-box;   padding-right: 2em;   width: 70%; } .sidebar {   float: right;   width: 30%; } .no-sidebar .content-area {   float: none;   padding: 0;   width: 100%; }

Instead of limiting the content area to 70% of the width, the layout is extended to the full width without active sidebar widgets.

It is also conceivable to center the content area and define a maximum width in order to increase readability through shorter lines.

Creation of the sidebar.php

The sidebar.php should be designed so that the sidebar container is only output if widgets are available. This can be done with this code:

 <?php // Check if Sidebar has widgets. if ( is_active_sidebar( 'sidebar' ) ) : ?>   <section id="secondary" class="sidebar widget-area clearfix" role="complementary">      <?php dynamic_sidebar( 'sidebar' ); ?>   </section><!-- #secondary --> <?php endif; ?>

Conclusion

With a small function and minimal CSS, the usability of the theme can be improved. After all, it doesn't make sense to reserve extra space in the layout for an empty sidebar.