Create New Widget Areas in WordPress

WordPress Code Snippets for Registering new sidebar widget areas, and adding them to the desired location using template files.

Use this code to add a new widget area / sidebar.

//Register Sidebars
if (function_exists('register_sidebar')) {
	register_sidebar(array(	
		'name'=> 'Sidebar 1',
		'id' => 'sidebar 1',
		'description' => 'This is a sidebar / widget area',
		'before_widget' => '<div>', // '%1$s' adds a unique class for each widget area added
		'after_widget' => '</div>',
		'before_title' => '<h4>',
		'after_title' => '</h4>'
	)
	);		
}

Use this code to add multiple new widget areas / sidebars. I prefer to use this in its own sidebar.php or widgets.php file, and then include that file in my main functions.php file.

//Register the sidebar
if ( function_exists ('register_sidebar')) {
	register_sidebar(array(
		'name' => 'Footer 1',
		'id' => 'footer1',
		'description' => 'This is the left footer widget',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h4>',
		'after_title' => '</h4>'
		)
	);
}
if ( function_exists ('register_sidebar')) {
	register_sidebar(array(
		'name' => 'Footer 2',
		'id' => 'footer2',
		'description' => 'This is the middle footer widget',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h4>',
		'after_title' => '</h4>'
		)
	);
}
if ( function_exists ('register_sidebar')) {
	register_sidebar(array(
		'name' => 'Footer 3',
		'id' => 'footer3',
		'description' => 'This is the right footer widget',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h4>',
		'after_title' => '</h4>'
		)
	);
}

To Place These Sidebars into Your Theme, you need to put this code inside your theme file. In this example, we are inserting widget areas into the footer.php.

<div id="footer">
    <div>
        <div>
            <?php if ( ! dynamic_sidebar('footer1')) : ?>
            <h2>This is Footer 1</h2>
            <?php endif; ?>
        </div>
        <div>
            <?php if ( ! dynamic_sidebar('footer2')) : ?>
            <h2>This is Footer 2</h2>
            <?php endif; ?>
        </div>
        <div>
            <?php if ( ! dynamic_sidebar('footer3')) : ?>
            <h2>This is Footer 3</h2>
            <?php endif; ?>
        </div>
    </div>
</div>

Hire WordPress Experts at Codeable.

The only WordPress exclusive freelancer platform that connects thousands of customers with the top WordPress freelance experts to work on projects of any size. 

Free estimate • No obligation to hire • 100% risk-free