<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Code and Life &#187; wordpress</title>
	<atom:link href="http://codeandlife.com/tags/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>http://codeandlife.com</link>
	<description>Tech and other visions from the liquid crystal tower</description>
	<lastBuildDate>Tue, 14 Jul 2009 07:47:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Widget-ready Wordpress sidebars without headlines</title>
		<link>http://codeandlife.com/2008/01/12/widget-ready-wordpress-sidebars-without-headlines/</link>
		<comments>http://codeandlife.com/2008/01/12/widget-ready-wordpress-sidebars-without-headlines/#comments</comments>
		<pubDate>Sat, 12 Jan 2008 12:12:01 +0000</pubDate>
		<dc:creator>jokkebk</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[Web tips]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[widgets]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://codeandlife.com/2008/01/12/widget-ready-wordpress-sidebars-without-headlines/</guid>
		<description><![CDATA[A lot of people are asking me (of course I have to make this stuff up because I don&#8217;t have any readers) how I&#8217;ve done the menu bar (the horizontal thing containing static pages and categories, just below the name of this blog). This is a good question, because the menu bar is actually widget-ready, [...]]]></description>
			<content:encoded><![CDATA[<p>A lot of people are asking me (of course I have to make this stuff up because I don&#8217;t have any readers) how I&#8217;ve done the menu bar (the horizontal thing containing static pages and categories, just below the name of this blog). This is a good question, because the menu bar is actually widget-ready, so I don&#8217;t have to change it when I add new categories. &#8220;But how have you avoided the widget headers and still remained strictly XHTML compliant?&#8221;, I hear some of my imaginary readers say. Well, I&#8217;ll tell you how.<br />
<span id="more-6"></span><br />
First step is to understand how WordPress sidebars are done:</p>
<ol>
<li>Theme tells that it has sidebar(s) using either <code>register_sidebars(<em>n</em>)</code> or one to several calls to <code>register_sidebar(...)</code>. This is done in <code>functions.php</code>.</li>
<li>Where the sidebar should appear, you call <code>dynamic_sidebar()</code>, and if it returns <code>false</code>, you render some static stuff instead of widgets.</li>
</ol>
<p>All this is explained in excruciating detail in <a href="http://automattic.com/code/widgets/themes/">WordPress documentation</a>, so look it up in there, if you want to know exactly how it&#8217;s done. Now when all this is done, your call to <code>dynamic_sidebar()</code> (done inside <code>&lt;ul&gt;</code> and <code>&lt;/ul&gt;</code> tags) will output the widgets selected to this sidebar in the following manner:</p>
<pre>
&lt;li id="..." class="..."&gt;&lt;h2 class="widgettitle"&gt;Pages&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="..."&gt;Page 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="..."&gt;Page 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;&lt;li id="..." class="..."&gt;&lt;h2 class="widgettitle"&gt;AnotherWidget&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="..."&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="..."&gt;Link 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;</pre>
<p>Now any Google-aware reader will already know, that horizontal menus can be made from unordered lists using the following CSS definitions:</p>
<pre>
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  float: left;
}</pre>
<p>Now because the <code>ul</code> element doesn&#8217;t have margins or borders, and <code>li</code> elements float after each other, we could even have several unordered lists after each other, and still the result would look like one horizontal menu. Now the problem is how to get rid of the Widget names completely. Well, this can be done quite easily. If you look up the <code>register_sidebar()</code> function call from the <a href="http://automattic.com/code/widgets/api/">Widgets API</a>, you see that you can actually have an array of parameters governing the way widgets and their titles are outputted to the sidebar.</p>
<p>By setting <code>before_widget</code> and <code>after_widget</code> to empty strings, and not having <code>&lt;ul&gt;</code> and <code>&lt;/ul&gt;</code> around<br />
your call to <code>dynamic_sidebar()</code>, and setting <code>before_title</code> and <code>after_title</code> to beginning and end of a comment block, we achieve everything needed. So in your <code>functions.php</code>, you would have the following code (notice how I have named the sidebar &#8220;Topmenu&#8221; to make it easier to recognize that particular sidebar in WordPress widget configuration):</p>
<pre>
register_sidebar(array('name' =&gt; 'Topmenu',
		'before_widget' =&gt; '', 'after_widget' =&gt; '',
		'before_title' =&gt; '&lt;!--', 'after_title' =&gt; '--&gt;'));</pre>
<p>Which would reduce the widget code shown above to something like this:</p>
<pre>
&lt;!-- Pages --&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="..."&gt;Page 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="..."&gt;Page 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- AnotherWidget --&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="..."&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="..."&gt;Link 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<p>Now only thing you need to do is to put your menu-generating piece of code where you want it, in my case it was the <code>header.php</code> of my theme:</p>
<pre>
&lt;?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Topmenu') ) : ?&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="http://www.somesite.com"&gt;Static menu item 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://myblog.com"&gt;Static menu item 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;?php endif; ?&gt;</pre>
<p>Now all you need is to go into WordPress site admin, and select Presentation &gt; Widgets, and add the relevant widgets to your brand-new Topmenu (I use the Pages and Categories widgets). And you&#8217;re done!</p>
<p>Please leave comments if you have any questions or further suggestions.</p>
]]></content:encoded>
			<wfw:commentRss>http://codeandlife.com/2008/01/12/widget-ready-wordpress-sidebars-without-headlines/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
