Brain Food for Web Developers

Wordpress Logo 3

Add Your Own Widget Area in WordPress

WordPress now makes it extremely easy to create your own widget area by registering a custom sidebar.

Step 1 – Register the Sidebar

All you have to do is place the register_sidebar() function in your function.php file like so:

if ( function_exists('register_sidebar') )
register_sidebar( array(
'name' => __( 'Custom Widget Area'),
'description' => __( 'This is my custom widget area.'),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

The custom widget area will be added to your WordPress admin area.Customize as you see fit. In this example I’ve used the HTML5 <aside> element. Note that the ‘id’ must be in lowercase with no spaces.

Now that you’ve registered your new sidebar you’ll be able to view it in the WordPress admin area under ‘Appearance > Widgets’.

Step 2 – Add the Sidebar to Your Theme

Of course just because you’ve registered a sidebar doesn’t mean it’s going to show up anywhere unless you add it to your theme.

Add the following snippet to your site code (e.g. your footer.php):

<div class="widget-container">
// Custom widget Area Start
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Custom Widget Area') ) : ?>
<?php endif;
// Custom widget Area End

The name of the sidebar must match the name your specified when you registered it. In this example I surrounded the php code with a container div to help with presentation.

Now when you load up your page you’ll see your shiny new widget area.

Read more about registering a sidebar from the WordPress Codex.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.