Code Snippets

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 an experienced Kelowna WordPress developer.  We’ve been building WordPress websites full-time for over a decade. We can help you.