Monday, July 20, 2009

editing, adding and removing widgets

Related articles



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>

good luck four you!!!

1 comments:

Budiawan Hutasoit said...

thanks for the tips..

Post a Comment

Cah Kampung

ShoutMix chat widget
 

Template by marz