<?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>Christian Schenk&#187; navigation</title>
	<atom:link href="http://www.christianschenk.org/blog/tag/navigation/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.christianschenk.org</link>
	<description>Writing about my experiences with technology and all different kinds of projects and experiments</description>
	<lastBuildDate>Sun, 29 Aug 2010 09:08:16 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Dynamic menu for your WordPress theme</title>
		<link>http://www.christianschenk.org/blog/dynamic-navigation-menu-wordpress-theme/</link>
		<comments>http://www.christianschenk.org/blog/dynamic-navigation-menu-wordpress-theme/#comments</comments>
		<pubDate>Tue, 02 Dec 2008 16:00:21 +0000</pubDate>
		<dc:creator>Christian Schenk</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[HowTo]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[sidebar]]></category>
		<category><![CDATA[widgets]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.christianschenk.org/?p=284</guid>
		<description><![CDATA[Shows you how to add another sidebar to your theme that holds some Text widgets, each representing an item in your navigation menu.]]></description>
			<content:encoded><![CDATA[<p>I have <a title="Dynamic WordPress menu with animated JavaScript drop-downs" href="http://wordpress.org/support/topic/215815">found</a> <a title="Building a Dynamic WordPress Nav Menu" href="http://green-beast.com/blog/?p=157">various</a> descriptions about a dynamic navigation menu in a WordPress theme. What I&#8217;ve seen these solutions grab some pages and display the result either in the header or sidebar of the theme. It&#8217;s called <em>dynamic</em> because you can add pages to your blog and &#8211; depending on the implementation &#8211; a link to the appropriate page will appear in the menu.</p>
<p><span id="more-284"></span></p>
<p>Here&#8217;s my idea: What about adding another sidebar to your theme that holds some <code>Text</code> widgets, each representing an item in your menu? I think that&#8217;s ultra neat because you can:</p>
<ul>
<li>change your menu just by adding another <code>Text</code> widget</li>
<li>rearrange the order with drag and drop</li>
<li>use <a title="Widget Logic" href="http://wordpress.org/extend/plugins/widget-logic/">Widget Logic</a> to control where your menu items appear.</li>
</ul>
<p>Let&#8217;s implement this.</p>
<h2>Changing the theme</h2>
<p>Since I&#8217;m using a modified version of the great <a title="The Copyblogger Theme for WordPress" href="http://www.copyblogger.com/the-copyblogger-theme-for-wordpress/">Copyblogger Theme</a> I&#8217;ll show you how to change this specific theme. But it&#8217;s no problem to translate the following to other themes.</p>
<p>Basically we&#8217;ll have to change three files: <code>functions.php</code>, <code>sidebar.php</code> and <code>nav_menu.php</code>; I think the latter is a specialty of the Copyblogger theme. First we&#8217;ll register a new sidebar called <em>menu</em> in the file <code>functions.php</code> like so:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'register_sidebar'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    register_sidebar<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'name'</span><span style="color: #339933;">=&gt;</span><span style="color: #0000ff;">'sidebar'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    register_sidebar<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'name'</span><span style="color: #339933;">=&gt;</span><span style="color: #0000ff;">'menu'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>More likely than not you had a call to <code>register_sidebar</code> with no parameters: This registered your sidebar. As you can see we have to supply a name for each sidebar; make sure that each sidebar gets a unique name.</p>
<p>If your theme has got only one sidebar you have to change the file <code>sidebar.php</code> to pick up your original sidebar; if you already had more than one sidebar in your theme you can skip this step. Search for a call to <code>dynamic_sidebar</code> somewhere in the file <code>sidebar.php</code> and add the parameter <code>'sidebar'</code> to <code>dynamic_sidebar</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'dynamic_sidebar'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span>
    <span style="color: #339933;">!</span>dynamic_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'sidebar'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span></pre></div></div>

<p>This is a line from my file and it might look different in yours. Just make sure that the code uses the <em>right</em> sidebar here.</p>
<p>Finally the users of the Copyblogger theme will change the <code>nav_menu.php</code>. Everybody else may place the following in the <code>header.php</code> or wherever the menu of your theme might be.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
  <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'dynamic_sidebar'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span>
      <span style="color: #339933;">!</span>dynamic_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'menu'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/archives/&quot;&gt;archives&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/about/&quot;&gt;about&lt;/a&gt;&lt;/li&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
  <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>This snippet will display the widgets associated with the sidebar called <em>menu</em>. If there&#8217;re no widgets in this specific sidebar the three hardcoded links will show up.</p>
<h2>Customizing the menu</h2>
<p>Now that you&#8217;ve got a new sidebar called <em>menu</em> go to <em>Design &#8211; Widgets</em> and under <em>Current Widgets</em> select the menu sidebar in the drop down list and click on <em>Show</em>. Add as many Text widgets as you like and use them to link to sensible pages on your website. It&#8217;s as easy as this.</p>
<p>Since we leverage the power of the cool widget screen you can easily rearrange the order of your menu items by dragging them around. You can add other widgets to your menu as well &#8211; maybe that makes sense too.</p>
<h2>Conclusion</h2>
<p>As we&#8217;ve seen the concept of the sidebar is powerful and can be used for different purposes: one of them is a neat navigation menu. The new menu is easy to setup in any theme and I bet you&#8217;ll really like the way to manage it via the widget screen.</p>
<p>If you&#8217;d like to read more about the functions from the <a title=" Widgets API" href="http://codex.wordpress.org/Plugins/WordPress_Widgets_Api">Widgets API</a> used in this post I recommend having a look at <a title="register_sidebar" href="http://codex.wordpress.org/WordPress_Widgets_Api/register_sidebar">this</a> and <a title="dynamic_sidebar" href="http://codex.wordpress.org/WordPress_Widgets_Api/dynamic_sidebar">that</a> page.</p>
<p>This was inspired by Justin Tadlock&#8217;s <a href="http://justintadlock.com/archives/2008/04/18/widgetize-this">Widgetize This</a> post.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christianschenk.org/blog/dynamic-navigation-menu-wordpress-theme/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
