How to Display a Custom WordPress Widget Area

Displaying Your Custom WordPress Widget Area

The custom WordPress widget is not complete until it can be displayed. This article is part two of “How to Add a Custom WordPress Widget Area“. In my last article I explained how to register and code the widget area. This was preparation for what we are doing today.

Displaying Your WordPress Widget

After registering our new WordPress widget, you probably noticed that nothing is displayed. It currently only resides in the back-end interface. This means nothing can be seen on the front-end. To fix this, we need to add some code into our customwidget-areas.php.

Your code should look like this:

// Add footer Sidebar Area
 function add_special_footer_right() {
    if  (is_sidebar_active(‘footer-right’)) {
        echo thematic_before_widget_area(‘footer-right’);
        dynamic_sidebar(‘footer-right’);
        echo thematic_after_widget_area(‘footer-right’);
     }
  }
  add_action(‘thematic_footer’,'add_special_footer_right’, 10);

This is what I have done. I created a function called special_footer_right, and created it so it can be accessed by the newly registered sidebar, which was called footer-right. It was added to the top of the Thematic’s footer. There is also a conditional statement if (is_sidebar_active(‘footer-riht’)). What the conditional statement does is check to see if the sidebar is active. If no widgets have been added it the area, then it will not turn on. If widgets have been added to your new area, then it will be on and show the widgets or execute the functionality.

echo thematic_before_widget_area(‘footer-right’); adds the opening markup for the widget-ready area.

dynamic_sidebar(‘footer-right’); This is the WP function that displays all the widgets in the sidebar. By adding the ID, the area can now be displayed.

echo thematic_after_widget_area(‘footer-right’); This is basically the closing markup.

Adding The Style To Your Sidebar

All that is left is adding a style to your widget area. To do this you need to open the or create a file called newstyles.css and add this code below:

#footer-right {
width: 940px;
margin: 0 auto;
}

That is it, you should now see your widget area working when you add widgets into it.

About Dustin Costa