Adding Widgetized Areas to WordPress

In this tutorial, I will be discussing adding widgetized areas to WordPress. Look at some of our past tutorials on custom fields and other topics.

WordPress provides a feature called sidebars, which are sometimes referred to as “widget areas” or “widgetized areas.” Sidebars are areas that can be filled with widgets, and placed into your theme. Most commonly, sidebars are placed to one side of a page’s content, hence the name “sidebar”; however, you can use sidebars in other areas as well, wherever you want a widgetized area. For this example, lets say we want a sidebar to show up on every page in the footer.

 

How To Add A Sidebar

There are two things you must do to get a sidebar setup in your theme. First, you have to register the sidebar with WordPress and then you have to add the sidebar to your theme, where you want it to show up.

 

Sidebar Registration

WordPress provides a function for registering sidebar, called ‘register_sidebar’. When you call the function, you pass it an array, which tells WordPress important information about the new sidebar, such as its name. According to WordPress documentation, you should hook into the ‘widgets_init’ action to register the sidebar. Lets take a look at how this is done, by adding a sidebar called ‘Custom Footer Sidebar’. Add the following code to your theme’s functions.php file:

function register_my_custom_sidebar() {
	register_sidebar( array(
		'name'          => __( 'Custom Footer Sidebar', 'theme_textdomain' ),
		'id'            => 'custom-footer-sidebar',
		'description'   => __( 'This is a custom sidebar that gets loaded into the footer of every page.', 'theme_textdomain' )
	) );
}
add_action( 'widgets_init', 'register_my_custom_sidebar' );

The preceding code registers a sidebar, names it ‘Custom Footer Sidebar’, provides a description for the sidebar, and provides an id so we can easily retrieve the sidebar later.

At this point, our sidebar is registered with WordPress and will show up in the wp-admin section of WordPress, as seen above. Notice the same values we passed in for ‘name’ and ‘description’ show up here! I am going to add a simple text widget to this area, so we can make sure it is working when we add it to our theme’s footer.

 

 

Adding a Sidebar to a Theme

Now that the sidebar is registered, and we have a widget in it, lets add it to our theme so it actually shows up on our site. The quickest way to get the sidebar into your theme is to use the function ‘dynamic_sidebar’. Remember the ‘id’ we assigned in the first code snippet? We will need that now, so we can get that specific sidebar. Add the following code where you want your sidebar to show up in your theme.

<?php dynamic_sidebar( 'custom-footer-sidebar' ); ?>

This code tells WordPress we want the ‘custom-footer-sidebar’ to be rendered. Let’s check the site, and make sure it shows up.

Ok, it worked! It could probably use a bit of styling, to make it fit the page better, but that’s another topic.