Soon we'll be learning how to add a new widget-ready area to our theme, but first let's have a look at the sort of markup that an active widget will generate. WordPress outputs the widget-ready area as an unordered list, with a list item for each widget the area contains. In addition, when using Thematic, each widget area will be wrapped in a div with a class of aside and an id corresponding to the widget's ID (we'll see how that's set shortly).
Here's the markup for Thematic's Primary Aside:
<div id="primary" class="aside main-aside"> <ul class="xoxo">
<li id="linkcat-2" class="widgetcontainer widget_links"> <h3 class="widgettitle">Blogroll</h3> <ul class="xoxo blogroll">
<li><a href="#">Link #1</a></li> <li><a href="#">Link #2</a></li> <li><a href="#">Link #3</a></li> </ul> </li>
</ul><!-- END #xoxo --> </div><!-- END #first -->
The highlighted area here represents the actual widget being used—in this example it's WordPress's built-in Links widget. Thematic has filters that allow you to modify the markup elements that make up widgets and widget-ready areas:
Was this article helpful?