Categories
24 Days of WordPress Tutorials

Day 10: Creating New Widgetized Areas

When I say “widget” you probably think “sidebar”, right? And you’d be right… well, sort of anyway. In WordPress you’ll normally find widgetized areas in the sidebar of the theme. But there is no reason why widgets can’t be placed elsewhere and used for other things. On this 10th Day of WordPress we’ll look at how to create new widgetized areas in WordPress and how to override the existing widgetized areas in the twentyten theme.

Widgetized areas for just about anything

There are many reasons why you may want to add widgetized areas to your site. You may want to add a seccond column in a sidebar or add a whole new sidebar, you may want to add widgets to your footer or you may want to add a different sidebar alltogether to one of your page or post templates. But widgets and widgetized areas can be used for other things as well. I’ve used them to populate content on the front page, as pop-up messages and as optional spanning banners. A widgetized area is in all honesty just a box controlled from the Appearance -> Widgets area. What you do with that box is up to you.

Setting up a new widgetized area

To set up a new widgetized area you need to do two things: One, define the new widgetized area in your theme’s functions.php file and two, add a call to that widgetized area in one of the template files for your theme. Let’s tackle functions.php first:

More than likely your theme already has widgets activated. You’ll find them by going to your functions.php file and looking for a function called widgets_init() or something to that effect. Within that function you have definitions for each of the widgetized areas. The default use function looks like this:


$args = array(
	'name' => sprintf(__('Sidebar %d'), $i ),
	'id' => 'sidebar-$i',
	'description' => '',
	'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ' );

    The variables listed here are more or less optional but as a rule of thumb I recommend leaving them all in. For ease of use it’s a good idea to be quite explicit about what you are building. Say for example I’m adding a widgetized area that will display an ad at the top of my site I would create a new widgetized area using this code:

    
    register_sidebar( array(
    	'name' => ('Header Ad Zone'),
    	'id' => 'headerAdZone',
    	'description' => ('The ad zone that appears at the top of the page'),
    	'before_widget' => '
    ', 'after_widget' => '
    ', ) );

    New Widgetized areaThis produces a the new widgetized area you see to the right.

    The next step is to call this widgetized area from one of your template files. Here we’re going to add a conditional statement that checks whether there is an active widgetized area with content first. That way we’ll avoid trying to activate a widgetized area with nothing in it. The call looks like this:

    
    <?php if ( ! dynamic_sidebar('headerAdZone') ) : ?>
    <?php endif; ?>
    
    

    Here you can choose to insert something between lines 1 and 2 that will be inserted if the widgetized area does not have any widgets in it. The name of the widgetized area (in between the brackets) can be either the name or the ID defined in functions.php

    Changing the widgetized areas in a twentyten child theme

    The twentyten theme has 6 widgetized areas, two in the sidebar and four in the footer. But what if you want to change these or add new ones in your child theme? If you read my earlier tutorial Day 2: Creating a WordPress Child Theme the Smart Way you should already have an idea. Because the widgets_init() function has already been called in the twentyten functions.php file you need to unregister this function and then build a new one yourself. You do this with the following lines of code:

    
    // Remove the default sidebar function
    function remove_twentyten_widgets() {
        remove_action( 'widgets_init', 'twentyten_widgets_init' );
    }
    // Call 'remove_twentyten_widgets' (above) during WP initialization
    add_action('after_setup_theme','remove_twentyten_widgets');
    
    

    Now you can create a new function and create new widgetized areas:

    
    function MY_widgets_init() {
    	register_sidebar( array(
    		'name' => ('Header Ad Zone'),
    		'id' => 'headerAdZone',
    		'description' => ('The ad zone that appears at the top of the page'),
    		'before_widget' => '
    ', 'after_widget' => '
    ', ) ); }

    And finally you need to call the new function:

    
    // Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
    add_action( 'widgets_init', 'MY_widgets_init' );
    
    

    If you want to keep the existing widgetized areas from twentyten and add on to them simply copy and paste the widgetized areas you want from twentyten’s functions.php over to your child theme functions.php. Then all that’s left is to call the areas from your template files like we did above. Easy as π.

    This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

    By Morten Rand-Hendriksen

    Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

    3 replies on “Day 10: Creating New Widgetized Areas”

    Thank you for this helpful tutorial.
    All is working except the widget setting is not being saved in the Dashboard. That is when I drag an object to the widget area, save the widget, and view the page it is working but when I return to the dashboard the widget object has been removed. Any ideas why?

    WP v 3.1 TwentyTen, child theme.

    You attention to this matter is greatly appreciated. Thank You

    The issue was cutting and pasting the code into my text editor. This had made a few of the characters invalid for the functions.php. Careful retyping the code fixed my problem.

    I am using the TwentyTen theme and want to move my Login With Ajax widget from the sidebar up into the header area.

    I like how this tutorial clarifies that first I need to define a new widgetized area in my functions.php file, THEN call the widgetized area from a template file (in my case, I assume that would be header.php).

    But I don’t understand how to modify the sample code you provided, which creates the Header Ad Zone widget. Even once I modify the code to my needs, how do I know where in functions.php to insert the code?

    In the code that creates the call, I assume that I should change “headerAdZone” to the ID of the widget I’m trying to call. Do I need to modify anything else? Where exactly in the header.php template should I place that code?

    THANK YOU.

    Comments are closed.