Coding Tutorials WordPress

Add Layout Options in WordPress Theme Customizer

WordPress Theme Customizer is a very powerful way to add customization options for your theme user to change theme design however they want. You can add settings and controls for colors, layouts, fonts etc. In this post I’ll tell you how to add option for modifying layouts in Theme Customizer.

Adding theme options is an easy task if you’re familiar with WordPress theme development. To start with you should have knowledge of WordPress theme development and at least basic knowledge of WordPress theme customizer. If you’re a theme developer, you need to write the code we’ll be discussing here in your customizer.php or the file in which you’re adding options for theme customization.

Layout Options for WordPress Theme Customizer

In this guide, I’ll show you how you can add layout options for WordPress Theme Customizer in your theme. The basic design of our theme on which we’ll add options is a typical blog design, with a sidebar on the right side, the content on the left side. Now, before adding options, let’s think about all the styles a user may wish to use!

Three most common choices user would expect from your theme are:

  • Content on left, Sidebar on right
  • Sidebar on left, content on right
  • No Sidebar

Now that may seem like a lot of work at first, but believe me, it’s not. Now there are two common ways through which we can ask user to select exactly one of the given options. Two controls we can use are:

  • Radio Buttons
  • Select List

You can implement this code with either of the controls you would like. In fact, the difference is just of a single keyword. In this WordPress theme customizer tutorial, I’ll show you how to use Radio button method and what exact modification you must do if you want to use Select List system.

If you want a theme in which I’ve implemented this code, you can download Amidst Sky Theme available for free on GitHub.

So, first of all, make sure you’re having a customizer.php file in your theme. If you’re using a theme framework like Underscores, you’ll find the file under inc folder as inc/customizer.php. In other theme frameworks also, you can find it easily with same or similar names.

However, if you don’t have a theme customizer file, don’t worry! It’s super easy, just follow along. First, create a folder inc in your theme directory. Suppose your theme is named ‘mypress’, so the folder would be ‘mypress/inc’. It doesn’t matter what name you give to this folder. I’m using ‘inc’ for it’s the most common name for folders with included function files.

Now, in the inc folder, create a file customizer.php. Great, now link to this file from your theme’s functions.php file. Add following code to it:

* Add theme customizer.
require get_template_directory() . '/inc/customizer.php';

Supercool! Now open customizer.php and start writing the following code in it. In case you’re using a theme framework and the file is already present in your theme, then you must be having this starter code.


* Theme Customizer.
* @author Deepak Bansal
* @link

* Add postMessage support for site title and description for the Theme Customizer.
* @param WP_Customize_Manager $wp_customize Theme Customizer object.

function deepak_customize_register( $wp_customize ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
add_action( 'customize_register', 'deepak_customize_register' );

* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.

function deepak_customize_preview() {
wp_enqueue_script( 'deepak_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'jquery', 'customize-preview' ), '20150912', true );
add_action( 'customize_preview_init', 'deepak_customize_preview' );

Fine. This is a starter code, that just lays the foundation of our theme customizer and adds a few built-in options to it. Now in this tutorial, we’ll also add some conditional CSS according to the user choice. This CSS will be loaded in the blog header and will override operations in theme stylesheet file (unless you’re using !important).

To add CSS and load into the header, we’ll add another function to our customizer.php file.

function deepak_customize_css() {


<?php }

add_action( 'wp_head', 'deepak_customize_css' );

We’ll write all the CSS between style tags. Now let’s add a new section to our theme customizer. We’ll start by creating a section, called ‘Theme Options’ and in that section, we’ll create a setting to change layout options and add controls to it.

All the code for creating a setting, adding layout options and adding controls is done in the first function in our customizer.php, i.e. deepak_customize_register. First of all add the setting:

// Section

array (
'title' => __( 'Layout', 'deepak' ),
'priority' => 400

After this code, we’ll add a setting. A setting is an individual entity and similar settings can be grouped under one section.

'default' => true,
'transport' => 'refresh',
'sanitize_callback' => 'deepak_sanitize'

In the above code, I’ve added a setting whose ID is ‘deepak_site_layout’. ‘Transport’ is set to refresh. Transport sets how you would the Live Preview to behave for any setting. There are two types of transport – postMessage and refresh. In postMessage, a jQuery file is used and Theme Preview show live edits. Whereas, in refresh, page is refreshed to show live changes.

The last item in array ‘sanitize_callback’ is to used to validate the input. The function ‘deepak_sanitize’ is a custom function that can be used for checkboxes, select boxes etc. Add this to your functions.php:

function deepak_sanitize( $input, $setting ) {
global $wp_customize;
$control = $wp_customize->get_control( $setting->id );
if ( array_key_exists( $input, $control->choices ) ) {
return $input;
} else {
return $setting->default;

A control is connected with Setting using setting’s ID. A control is shown to the user and he or she selects the options from it.

'section' => 'deepak_theme_options',
'label' => __( 'Choose Layout', 'deepak' ),
'setting' => 'deepak_site_layout',
'type' => 'radio',
'choices'=> $layout = array(
'content_sidebar' => __( 'Content-Sidebar', 'deepak' ),
'sidebar_content' => __( 'Sidebar-Content', 'deepak' ),
'no_sidebar' => __( 'No Sidebar', 'deepak' ),

Great, so this is the control using Radio buttons. To use select list, just replace ‘radio’ in above code with ‘select’. Now, the final job is to add CSS that will make this setting and the control work on theme:

<?php if( get_theme_mod( 'deepak_site_layout' ) == 'sidebar_content' ) { // Left Sidebar ?>
.content-area {
float: right;

#secondary {
float: left;

<?php } elseif ( get_theme_mod( 'deepak_site_layout' ) == 'no_sidebar' ) { // No Sidebar ?>

.content-area {
margin: 0 auto;
float: none;

<?php else { // Default - Right Sidebar ?>

.content-area {
float: left;

#secondary {
float: right;

<?php } ?>

Note: In this example CSS, the classes I’m using are .content-area for content section, usually with an id of #primary and the sidebar .widget-area with id of #secondary. I’m using id secondary because class .widget-area may also be used for other asides like footer widget area. Classes and IDs may differ in your theme, so make the required modifications before using the code.

Now, to make ‘No Sidebar’ work, open your sidebar.php file. This is the file that loads sidebar in a typical theme. Now in a typical sidebar template, there’s a condition that if there’s no widget in the sidebar then return and don’t load the markup. That’s fine. But let’s suppose user has selected ‘No Sidebar’ and left some widgets in the sidebar?

To resolve that, we must add another piece of condition in sidebar template.

if ( ! is_active_sidebar( 'sidebar-1' ) || get_theme_mod( 'deepak_site_layout' ) == 'no_sidebar' ) {

Please make note of the code after pipe symbol, representing OR, because the condition to the left of pipes have a sidebar id that may differ according to your theme. Moreover, don’t forget to download Amidst Sky theme to get full code.

So, now your theme is more powerful than ever, with three nice layout options in it. Play with the code and see what more can you do with it. Reuse this to generate more layout options as per your theme design.

0 comments on “Add Layout Options in WordPress Theme Customizer

Leave a Reply