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 a WordPress Expert

Get hourly and project based theme customization, theme tweaks, and development help from world-class WordPress developers at Codeable. If you’re in Kelowna and need a custom website for your business visit our Kelowna Web Design page now to get started.