Implement the Sidebar Layout Theme Option in the WordPress Customizer

A popular setting for a two-column WordPress theme is a sidebar layout option in the WordPress Customizer. This allows the user to change the position of the sidebar widgets from right to left.

In this tutorial I would like to show you how you can easily implement a theme option to change the sidebar position in the WordPress Customizer. The standard theme TwentySixteen should serve as an example. The theme conveniently has a 2-column layout with a sidebar.

To try out the code examples I recommend creating a child theme instead of directly changing the TwentySixteen theme. All PHP functions in this manual can be copied into functions.php; the CSS code in the style.css.

1) Implementation of the theme option in the WordPress Customizer

We want to create a new option called Sidebar Position . The option should offer a select field with two choices: Left Sidebar and Right Sidebar. The option itself should be located in a new section Layout Options in the Customizer.

Sidebar Position Theme Option
Our goal: A new option to change the sidebar position

We use the Theme Customization API to implement theme options in the Customizer. The addition of new sections and options is always done with the customize_register action hook.

Within our function we have access to the $wp_customize object, which is an instance of the WP_Customize_Manager class. This add_section() us access to the object add_section() , add_setting() and add_control() .

That sounds more complicated than it is at first. To create options we only need to define several simple PHP arrays. The following snippet of code is sufficient to create our new option:

The first thing we do is add a new section. With priority we can influence the exact placement of the section, 120 is a position far down in the customizer.

Then we need a setting and a control for our new theme option.

Difference between setting and control

By creating a setting with add_setting() , we let WordPress know about the new option. We usually define a standard value for the setting and a sanitization callback to validate the option (keyword security). More on that in a moment.

The control is responsible for displaying the setting and thus allows the user to manipulate the option. Instead of a select field, we could simply use a radio checkbox control for our example. The control also uses the section parameter to determine in which section the option is displayed.

2) Validation of the theme option and user inputs

For our setting, we passed the sanitize_callback function as theme_slug_sanitize_select . WordPress uses the Sanitization Callback to validate the user input. This is to ensure that no undesired values ​​such as malicious code can be saved in the option.

We still have to create the function, as it is unfortunately not included in the core by default. We use a code example from the WordPress Theme Review Team :

The function reads the selection options of the control itself and thus checks the user input. This ensures that our option can only take the values left or right . The option is therefore also suitable for all other Select and Radio Button controls.

3) Implementation of the theme option in the frontend

Our new theme option in the WordPress Customizer is now ready. The sidebar position can now be changed, but of course nothing happens in the theme itself.

To implement the theme option in the front end, we want to add a new CSS class .left-sidebar in the body tag, if the user wants a left sidebar position. With the help of the class, we can then change the sidebar layout with some CSS code.

We use the body_class filter hook for implementation:

The get_theme_mod function provides us with the saved sidebar position. The second parameter determines the default value if the user has not yet used the option (eg after the first installation of the theme).

All we need now is some CSS code in the style.css of our TwentySixteen Child Theme to switch the sidebar position to the left:

4) Conclusion

With three functions and a bit of CSS, we have created a way to change the sidebar position in the TwentySixteen theme. I am happy to answer questions about the WordPress Customizer or the code examples in the comments.