Now we have a clear picture of the layouts for the template pages we want for our theme we have to create the content areas, we were thinking of leaving the names of the Twenty Ten sidebars and just tagging our new areas on the end.

On reflection we will disable the Twenty Ten widgetized areas and add our own, this will make the management of the widgetized areas easier, and we will be able to order them in the workflow we prefer.

In this tutorial we will be removing the WordPress call in the parent theme that creates the widgetized areas, WordPress 3 introduced some new functions one of these will be used to remove the action that loads the sidebars.

We will create a new function that will create our own widgetized areas, this function will introduce us to using arrays to store variable values to be used in a For Each code loop.

Remove Action

We will start by using the new WordPress remove_action() function, this will disable the code in the parent theme that creates the widgetized areas (sidebars), this is a good method as we do not need to change any code in our parent theme.

Opening the child themes functions.php we will add these lines inside the function child_theme_setup(), read this whole post to see where to insert the new code in the example below. 

/* Remove the Twenty Ten registered sidebars */
remove_action( 'widgets_init', 'twentyten_widgets_init' );

Really that is it we now have no widgetized areas in our child theme, we will add them back in a new function, this function is called child_widgets_init() and will be pasted just below the code above in the child_theme_setup function.

/** Add our Widgetized Areas */
function child_widgets_init() {

    // Load our Widget Area Names and ID's into an Array
    $widgets = array (
        array(
            'name' => 'Sidebar Left One",
            'id' => 'sidebar-left-one'),
           array(
            'name' => 'Sidebar Left Two',
            'id' => 'sidebar-left-two'),
        array(
            'name' => 'Content Top',
            'id' => 'content-top'),
        array(
            'name' => 'Content Left',
            'id' => 'content-left'),
        array(
            'name' => 'Content Right',
            'id' => 'content-right'),
        array(
            'name' => 'Content Bottom',
            'id' => 'content-bottom'),
        array(
            'name' => 'Sidebar Right One',
            'id' => 'sidebar-right-one'),
           array(
            'name' => 'Sidebar Right Two',
            'id' => 'sidebar-right-two'),
        array(
            'name' => 'First Footer Widget',
            'id' => 'first-footer-widget-area'),
        array(
            'name' => 'Second Footer Widget',
            'id' => 'second-footer-widget-area'),
        array(
            'name' => 'Third Footer Widget',
            'id' => 'third-footer-widget-area'),
        array(
            'name' => 'Fourth Footer Widget',
            'id' => 'fourth-footer-widget-area')
    );

    /* Loop through the array and add our Widgetised areas */
    foreach ($widgets as $widget) {
        register_sidebar( array(
            'name' => __( $widget['name'], 'twentyten' ),
            'id' => $widget['id'],
            'description' => __( $widget['name'] .' Area', 'twentyten' ),
            'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
            'after_widget' => '</li>',
            'before_title' => <h3 class="widget-title">',
            'after_title' => </h3>',
        ) );
    }

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

What this code does is load the name and id of the widgetized areas we want to use into an array called $widgets, these are then read out in the foreach loop, as each $widget name changes a new sidebar is added to the WordPress admin widgets area.

Notice that we only loaded two values in the widgets array, and pass seven to the register_sidebar function, this is because five of the lines have the same value for each area, the id must be a unique value.

We will be adding the new widgetized areas in the next tutorials these will be called with the function template_part, we will also add inline styles and more sidebar files.

Rather than creating these now we though it would be of more use to add them as we work through creating our template pages, but we will deal with the default sidebar now.

Sidebar File

As we have changed the name of the right sidebar we will change the name in the sidebar.php file, ‘copy not cut’ the sidebar.php from the ‘twentyten’ theme folder to the ‘twentyten-template’ theme folder, open up the new sidebar.php and find this line:

if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : >

All we need to do here is tell WordPress that we have renamed the sidebar, so we change ‘primary-widget-area’ to ‘sidebar-right-one’, this is the id we added in the function above.

if ( ! dynamic_sidebar( 'sidebar-right-one' ) ) : >

Admin Area

When we visit our WordPress admin area and navigate to Appearance > Widgets we will see our new widget areas, these are also in a readable sequence that suits our theme, we can populate the Right Sidebar One and Footers to make sure our changes have worked.

Summary

If we have added the code in the functions.php correctly then it should lokk like this:

<?php

/** Tell WordPress to run child_theme_setup()
when the 'after_setup_theme' hook is run.
*/
add_action( 'after_setup_theme', 'child_theme_setup' );

/** This function will hold our new calls and over-rides */
if ( !function_exists( 'child_theme_setup' ) ):
 function child_theme_setup() {

 /*
 We want a Second Navigation Bar right at the top
 This theme uses wp_nav_menu() in two locations.
 */
 register_nav_menus( array(
  'secondary' => __( 'Top Navigation', 'twentyten' ),
 ) );

 /* Add support for two post image sizes */
 if ( function_exists( 'add_image_size' ) ) {
  add_image_size( 'medium-thumbnail', 200, 150, true );
  add_image_size( 'small-thumbnail', 100, 75, true );
 }

 /* Remove the Twenty Ten registered sidebars */
 remove_action( 'widgets_init', 'twentyten_widgets_init' );

 /** Add our Widgetized Areas */
 function child_widgets_init() {

// Load our Widget Area Names and ID's into an Array
  $widgets = array (
   array(
    'name' => 'Sidebar Left One',
    'id' => 'sidebar-left-one'),
   array(
    'name' => 'Sidebar Left Two',
    'id' => 'sidebar-left-two'),
   array(
    'name' => 'Content Top',
    'id' => 'content-top'),
   array(
    'name' => 'Content Left',
    'id' => 'content-left'),
   array(
    'name' => 'Content Right',
    'id' => 'content-right'),
   array(
    'name' => 'Content Bottom',
    'id' => 'content-bottom'),
   array(
    'name' => 'Sidebar Right One',
    'id' => 'sidebar-right-one'),
      array(
    'name' => 'Sidebar Right Two',
    'id' => 'sidebar-right-two'),
   array(
    'name' => 'First Footer Widget',
    'id' => 'first-footer-widget-area'),
   array(
    'name&quot; => 'Second Footer Widget',
    'id' => 'second-footer-widget-area'),
   array(
    'name' => 'Third Footer Widget',
    'id' => 'third-footer-widget-area'),
   array(
    'name' => 'Fourth Footer Widget',
    'id' => 'fourth-footer-widget-area')
  );
  /* Loop through the array and add our Widgetised areas */
foreach ($widgets as $widget) {
   register_sidebar( array(
    'name' => __( $widget['name'], 'twentyten' ),
    'id' => $widget['id'],
    'description' => __( $widget['name'] .' Area', 'twentyten' ),
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3  class="widget-title">',
    'after_title' => '</h3>',
   ) );
  }

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

Notice

Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of some themes and files is restricted to site supporters.

You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

This website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.