3 steps to create a new widgetized area

Sometimes you want to add content —or an existing widget— to an area that isn’t a widgetized area yet. Usually these come in the sidebar —or sidebars—, but you can transform any area into one that accepts widgets so that it is easy to edit and change the content displayed there.

1. Register the new sidebar

First, you will want to add the following into your functions.php

<?php if ( function_exists ('register_sidebar')) { 
    register_sidebar ('custom_area'); 
} ?>

you can have better control of the area with attributes that are self-explanatory, like:

function arphabet_widgets_init() {
	register_sidebar( array(
		'name' => 'Name of the Area',
		'id' => 'custom',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	) );
add_action( 'widgets_init', 'arphabet_widgets_init' );

2. Code the new sidebar

To code this new sidebar on its own unique way you can create/edit a file named sidebar-custom.php, where ‘custom’ is whatever id you used in your functions.php, and add it into your theme via get_sidebar('custom'). Or you can just do the following inside your code, wherever you want it to be.

Finally, to accept widgets in this area, you sidebar must contain the following code:

if ( function_exists ( dynamic_sidebar('custom') ) ) : 
	dynamic_sidebar ('custom'); 
	echo "default html";

or short:

<?php if ( dynamic_sidebar('custom') ) : else : endif; ?>

which basically means to load the widgets for this sidebar or else —if there are no widgets designated— default html content.

3. Add widgets

Your new sidebar will appear now in your Appearance >> Widgets section, so go on and put some widgets in it!!

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.