sidebar customization: editing, adding and removing widgets

Although the sidebars in my themes are enabled for the use of WordPress widgets, some of you may want to manually edit the sidebar(s), which is pretty easy. Depending on the layout, your theme has either a left sidebar, a right sidebar or both sidebars. All the HTML code for the sidebar(s) is located in the sidebar template (sidebar.php) of your theme.

I have included HTML comments and space between single widgets in the source code so you can easily see where the left or right sidebar starts and ends and where the single widgets start and end.

The basic HTML markup of a sidebar column

In the example code below you can see that each sidebar is a HTML DIV and the single widgets are list items of an unordered list, with H4 headings as widget titles and nested unordered lists for the widget content.

<!- - Start Left Sidebar - ->
<div id="leftmenu">
<div class="nav">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>


<!- - Widget Name - ->
<li><h4>Widget Title</h4>
<ul>
<li>
Widget Content Goes Here
</li>
</ul>
</li>


<!- - Latest Posts - ->
<li id="mostrecent"><h4>Latest Posts</h4>
<ul><?php wp_get_archives('type=postbypost&limit=15'); ?></ul>
</li>


<!- - Monthly Archives - ->
<li id="archives"><h4>Archives</h4>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>


<?php endif; ?>
</ul>
</div><!- - end nav - ->
</div><!- - end left sidebar - ->

If you want to move a widget to a different location in the sidebar, or from the one to another sidebar, simply cut out the entire block of HTML code of the widget including the HTML comment that describes the widget and paste it somewhere else into the space between other widgets. To remove the widget, simply delete it.

If you want to add a custom widget, use the following HTML markup:

<!- - Widget Name - ->
<li><h4>Widget Title</h4>
<ul>
<li>
Widget Content Goes Here
</li>
</ul>
</li>

The above code will display a widget with rounded borders and the h4 heading with background color.

If you want to add a widget without any borders at all (f.ex to display AdSense ads or image ads), you can use either of the following HTML markups instead:

<!- - Widget Name - ->
<li style="background: none">
Widget Content, Text, Images, AdSense code, vertical banners, image ads, etc …
</li>
<!- - Widget Name - ->
<li style="background: none"><h4 style="background: none">Widget Title</h4>
<ul style="background: none">
<li>
Widget Content, Text, Images, AdSense code, vertical banners, image ads, etc …
</li>
</ul>
</li>

Examples available in a few hours … please come back later.

Social Bookmarks: - (what´s this?) - spread the word!

Stumble Delicious Technorati Digg Reddit socialmarker(more bookmarking services)

1 Comment »

  1. Comment by:
    Bob

    How can I incorporate the EWT archive dropdown widget without losing the rest of the sidebar?

    Thanks!!

RSS feed for comments on this post. TrackBack URI

Leave a comment

If you want to leave a feedback to this post or to some other user´s comment, simply fill out the form below.