How to Add Widgets to WooThemes Whitelight Home Page

NOTE: Since this post is from May 2012, the instructions may be out-of-date with current versions of WooThemes Whitelight and/or WordPress.

Objective: Add 4 Widgetized areas, all in one row, just below the image slider on WooThemes Whitelight home page.

Basic Method: Reference WooThemes “How to add a widgetized area to your theme” tutorial, as well as Whitelight’s footer code.

1. Create child theme folder with default “style.css” file
2. In the child theme folder, create a new folder named “includes.” Then, copy the “sidebar-init.php” file from Whitelight’s “includes” folder and add it to the child theme’s “includes” folder.
3. Next, copy Whitelight’s “index.php” file into child theme folder.

Time to add custom code to the child theme’s files:

Register 4 new Widgetized areas. Add the following PHP to the “sidebar-init.php” file:

register_sidebar(array( 'name' => 'Stats 1','id' => 'stats-widgets-1', 'description' => "Stats block 1 on Home page", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
register_sidebar(array( 'name' => 'Stats 2','id' => 'stats-widgets-2', 'description' => "Stats block 2 on Home page", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
register_sidebar(array( 'name' => 'Stats 3','id' => 'stats-widgets-3', 'description' => "Stats block 3 on Home page", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
register_sidebar(array( 'name' => 'Stats 4','id' => 'stats-widgets-4', 'description' => "Stats block 4 on Home page", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));

Next, add the Widgetized areas to the Home page. In the index.php file, add the following code right after the “col-full” DIV class:

<section id="stats-widgets" class="col-4 fix">
<?php if ( woo_active_sidebar( 'stats-widgets-1' ) ) { ?>
<div class="block stats-widget">
<?php woo_sidebar( 'stats-widgets-1' ); ?>
</div>
<?php } // End IF Statement ?>
<?php if ( woo_active_sidebar( 'stats-widgets-2' ) ) { ?>
<div class="block stats-widget">
<?php woo_sidebar( 'stats-widgets-2' ); ?>
</div>
<?php } // End IF Statement ?>
<?php if ( woo_active_sidebar( 'stats-widgets-3' ) ) { ?>
<div class="block stats-widget">
<?php woo_sidebar( 'stats-widgets-3' ); ?>
</div>
<?php } // End IF Statement ?>
<?php if ( woo_active_sidebar( 'stats-widgets-4' ) ) { ?>
<div class="block stats-widget-last">
<?php woo_sidebar( 'stats-widgets-4' ); ?>
</div>
<?php } // End IF Statement ?>
</section>

Finally, add the following CSS to the “style.css” file:

#stats-widgets.col-4 .block {
width: 23.44%;
}
#stats-widgets .block {
float: left;
margin-right: 2.08%;
}
#stats-widgets .stats-widget-last {
margin-right: 0;
}