Creating WordPress Theme – Widgetizing Custom Theme

In your WordPress dashboard, when your creating a custom theme. The Widgets link may not be accessible in your Appearance tab. You need to register or create a new sidebar (this is where widgets can be placed) so that your theme can support implementing widgets.
In your functions.php file add :

function sub_container_sidebar_centered() {
      register_sidebar( array(
            'id' => 'sub-container-sidebar-centered',
            'name' => __( 'Sub Container Sidebar - Centered' ),
            'description' => __( 'Add contents in your sidebar that is aligned center.' ),
            'before_widget' => '<div class="sub-container-centered">',
            'before_title' => '<div id="sub-container-title">',
            'after_title' => '</div>',
            'after_widget' => '</div>',
      ) );
}
add_action( 'widgets_init', 'sub_container_sidebar_centered' );

You can read more about WP register_sidebar function here. But if you added the code correctly. The Widgets link will be accessible in your Appearance tab that will look exactly like the image below.

The name( ‘name’ => __( ‘Sub Container Sidebar – Centered’ ) ) and description ( ‘description’ => __( ‘Add contents in your sidebar that is aligned center.’ ) ) is displayed in your Widgets panel. While the id ( ‘id’ => ‘sub-container-sidebar-centered’ ) we declare in the code will be use later when we display the new widget area in our page.

Displaying Sidebar in Custom Theme

To display the new sidebar we will use the dynamic_sidebar() function. We just need to add the id we declared earlier as a parameter.
e.g. dynamic_sidebar( ‘sub-container-sidebar-centered’ );
All the codes we will use to display the sidebars will be put in the sidebar.php file. So be sure to create a new PHP file and name it “sidebar” in your theme directory. We will display it in our page using the get_sidebar() function.

In this tutorial we will display it in our index page.

So open your index.php file and put <?php get_sidebar(); ?> after your <section> tag.

Your index.php file would look like this :

<?php get_header(); ?>
<section>
<?php get_sidebar(); ?>
<?php if( have_posts()) : while(have_posts()) : the_post(); ?>
<article>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p><?php the_content('Read more...'); ?></p>
<p>Posted in <?php the_category(', '); ?> on <?php the_time('F j, Y'); ?></p>
<p><?php comments_number('No comment', '1 comment', '% comments'); ?></p>
</article>
<?php endwhile; ?>
<?php next_posts_link( 'Older posts' ); ?>
<?php previous_posts_link( 'Newer posts' ); ?>
<?php else: ?>
<article>
<h2 class="error">No Article Found</h2>
<p><b>Sorry, there are currently no article available.</b></p>
</article>
<a href="<?php echo get_home_url(); ?>">Home</a>
<?php endif; ?>
</section>
<?php get_footer(); ?>

Check for Empty Sidebars and Using the dynamic_sidebar() Function

You won’t see any changes in your index page as our sidebar.php is still empty. Before we can use and display widget in our sidebar, we need to check if it does contain a widget. We don’t want to display an empty sidebar in our page. To check it, we use the is_active_sidebar function. It returns true if the sidebar contains an item or a widget.
In our sidebar.php file put :

<?php if ( is_active_sidebar( 'sub-container-sidebar-centered' ) ) : ?>
      <aside>
            <?php dynamic_sidebar( 'sub-container-sidebar-centered' ); ?>
      </aside>
<?php endif; ?>

Now try to add a widget. If you add the code correctly you would see the changes in your index page. Though you might see it plain and simple because we didn’t assign any style.

Adding Style to Sidebar

In the code we used to register a new sidebar, we declare a call for a CSS class ‘sub-container-centered’ in our ‘before_widget’ and a closing div tag for our ‘after_widget’. The same as what we did for our ‘before_title’ and ‘after_title’.

'before_widget' => '<div class="sub-container-centered">',
'before_title' => '<div id="sub-container-title">',
'after_title' => '</div>',
'after_widget' => '</div>',

This is just to override the default HTML code that is added when a widget is assigned. Now we can make sure that our widget will be wrapped by the CSS class or id selector we declared in the div tag.
In your style.css file you can add the CSS class and ID we declared:

.sub-container-centered {
      background-color:#FFFFFF;
      padding:10px;
      text-align:center;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      margin-bottom:10px;
}
#sub-container-title {
      color:#660000;
      font-weight:bold;
      margin-bottom:5px;
}

Your theme sidebar would look exactly like the image below.

That’s it for our log. If you’ve followed the tutorial from start till here, you probably now have a working theme. But if you try to click on any category, tags, or pages, the design would look exactly the same as the index page. That is because we didn’t assign or create the PHP file for those content. And WordPress will load index.php if archive.php, tags.php or pages.php doesn’t exist.

Each page does need to show different contents. Like what we did in our index.php, we need to use WordPress loop in other pages and use the right WP functions to display things. I know you can figure that yourself so I’ll end the tutorial here. You can read more about theme development here to know more about the different theme page. Hope this article helps. Goodluck. 😀