Widget Markup

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?

0 0

Post a comment