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:

[sourcecode language=”php”]
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>’));
[/sourcecode]

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:

[sourcecode language=”php”]
<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>
[/sourcecode]

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

[css]#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;
}[/css]

2 Comments

  1. Arp on October 16, 2013 at 12:39 pm

    Thanks for this tutorial – it’s just what I was looking for. Unfortunately it does not work with the current versions of Whitelight and/or WordPress. Did you have to update this at all?

    • designparc on December 28, 2013 at 1:08 pm

      Sorry to get back to you so late, Arp.

      I suspect that WooThemes Whitelight and WordPress have made changes to their code that is now beyond the info in this post.

Leave a Comment