Widgetizing A Theme

If you’re using a theme that doesn’t support widgets, you can get it to do so by adding some code to functions.php and then adding calls to the dynamic sidebar in any template file.

Widgetizing the HTML5Reset Starter Theme

In its current incarnation, the html5reset wordpress theme’s widget area isn’t working, but the code can be modified to make it work. If you’re using another starter theme, a couple details mentioned below won’t be applicable, but you should still be able to work your way through the concepts.

First Step: functions.php

Let’s add four sidebars to the html5reset starter theme. To do that, go into the theme’s functions.php and find the code (in the OLD STUFF BELOW section) that starts with

if ( !function_exists(‘register_sidebar’ )) {

Select from this line to the closing curly brace after the add_action function. In other words, select all this:

if ( !function_exists('register_sidebar' )) {
 function html5reset_widgets_init() {
 register_sidebar( array(
 'name' => __( 'Sidebar Widgets', 'html5reset' ),
 'id' => 'sidebar-primary',
 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 'after_widget' => '</aside>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );
 }
 add_action( 'widgets_init', 'html5reset_widgets_init' );
 }

Press Command-X to delete (not just the delete key: we are going to paste this snippet higher up).

Now go above “OLD STUFF BELOW” comment and paste the snippet in.

Remove the  first and last lines of that snippet. This should leave you with:

 function html5reset_widgets_init() {
 register_sidebar( array(
 'name' => __( 'Sidebar Widgets', 'html5reset' ),
 'id' => 'sidebar-primary',
 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 'after_widget' => '</aside>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );
 }
 add_action( 'widgets_init', 'html5reset_widgets_init' );

This will add one widget area. If you want to add more, just duplicate the register_sidebar function. Below, then, is the code to make four widget areas.

Note that I change the name and ID of each widget area, as well as the HTML element that wraps around each individual widget inside each widget area.

function html5reset_widgets_init() {

register_sidebar( array(
 'name' => __( 'Sidebar Widgets', 'html5reset' ),
 'id' => 'sidebar-top',
 'before_widget' => '<div id="%1$s" class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );

register_sidebar( array(
 'name' => __( 'Footer Widgets Left', 'html5reset' ),
 'id' => 'footer-left',
 'before_widget' => '<div id="%1$s" class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );

register_sidebar( array(
 'name' => __( 'Footer Widgets Center', 'html5reset' ),
 'id' => 'footer-center',
 'before_widget' => '<div id="%1$s" class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );

register_sidebar( array(
 'name' => __( 'Footer Widgets Right', 'html5reset' ),
 'id' => 'footer-right',
 'before_widget' => '<div id="%1$s" class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );

}
 add_action( 'widgets_init', 'html5reset_widgets_init' );

If you now go into your Dashboard < Appearance < Themes < Widgets, you should now see that there are now widget areas called Sidebar Widgets, Footer Widgets Left, Footer Widgets Center, and Footer Widgets Right.

Next Step: Call The Widget Area in A Template File

Now all you need to do is make a corresponding call to each widget area in the respective template file. To do that, you will add the following code to any template file:

<?php dynamic_sidebar( ‘id of widget area’ ); ?>

For example, in the footer.php file, I would add the following code:

 <div id="footer-left">
 <?php dynamic_sidebar( 'footer-left' ); ?>
 </div>

<div id="footer-center">
 <?php dynamic_sidebar( 'footer-center' ); ?>
 </div>

<div id="footer-right">
 <?php dynamic_sidebar( 'footer-right' ); ?>
 </div>

By wrapping each of these dynamic_sidebar calls in DIVs, I can then style each widget area. Note that the ID of each widget area is specified in the register_sidebar() functions you declared in functions.php.

Continuing that line of thought, for the main sidebar, I would go into the index.php, home.php, etc files and replace the

<?php get_sidebar(); ?>

declaration with a

<?php dynamic_sidebar(  ‘sidebar-top’ ); ?>

statement.