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.
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
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:
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.