<?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>Cozmoslabs &#187; search box</title>
	<atom:link href="http://www.cozmoslabs.com/tag/search-box/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cozmoslabs.com</link>
	<description>Web design and development experiment.</description>
	<lastBuildDate>Thu, 01 Jul 2010 09:26:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Add a search box to the thematic menu</title>
		<link>http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/</link>
		<comments>http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/#comments</comments>
		<pubDate>Tue, 14 Apr 2009 23:53:46 +0000</pubDate>
		<dc:creator>Cristian</dc:creator>
				<category><![CDATA[Recomended Reading]]></category>
		<category><![CDATA[Thematic]]></category>
		<category><![CDATA[Theme Design]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[child theme]]></category>
		<category><![CDATA[search box]]></category>

		<guid isPermaLink="false">http://www.cozmoslabs.com/?p=358</guid>
		<description><![CDATA[A search box in main menu is something a lot of themes have by design. Although this is not the case with the Thematic Theme Framework, it&#8217;s easy to customize it with a few lines of code. First thing we need to do is create a thematic child theme. This way we won&#8217;t make direct [...]


Related posts:<ol><li><a href='http://www.cozmoslabs.com/2008/12/17/replacing-the-thematic-menu-with-a-dropdown-list-of-categories/' rel='bookmark' title='Permanent Link: Replacing the Thematic Menu with a DropDown List of Categories'>Replacing the Thematic Menu with a DropDown List of Categories</a></li>
<li><a href='http://www.cozmoslabs.com/2009/04/07/green-anyone-try-commune-thematic-child-theme/' rel='bookmark' title='Permanent Link: <span style="color:#7fae52">Green anyone?</span> Try Commune &#8211; Thematic Child Theme!'><span style="color:#7fae52">Green anyone?</span> Try Commune &#8211; Thematic Child Theme!</a></li>
<li><a href='http://www.cozmoslabs.com/2008/10/25/byty-free-child-theme-built-thematic/' rel='bookmark' title='Permanent Link: Byty the Free Child Theme &#8211; Built on Thematic'>Byty the Free Child Theme &#8211; Built on Thematic</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>A search box in main menu is something a lot of themes have by design. Although this is not the case with the <a href="http://themeshaper.com/thematic/">Thematic Theme Framework</a>, it&#8217;s easy to customize it with a few lines of code.</p>
<p>First thing we need to do is <a href="http://www.cozmoslabs.com/2008/09/07/use-wordpress-as-a-cms-with-thematic-part1/">create a thematic child theme</a>. This way we won&#8217;t make direct changes to Thematic.</p>
<p>The search box will be displayed on the right of the menu, inside of the <em>#access</em> div. The way Thematic hooks and actions were constructed will first need to remove the <em>thematic_access()</em> action from the <em>thematic_header()</em> hook. If all this sounds a bit difficult fear not. All you have to do is add this code inside of <em>functions.php</em> file of your child theme (don&#8217;t forget the <em><&#63;php</em> opening tag and the <em>&#63;></em> ending tag).</p>
<pre class="brush: php;">
// Remove default Thematic actions
function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');
</pre>
<p>If everything is working properly when you reload your WordPress installation the entire menu would have disappear! <strong>Now we can create our own menu WITH the search box on the right of it! </strong>Add this code at the end of your <em>functions.php</em>:</p>
<pre class="brush: php;">
// Create a custom access div with the menu and search box
function search_access() { ?&gt;
    	&lt;div id=&quot;access&quot;&gt;
    		&lt;div class=&quot;skip-link&quot;&gt;&lt;a href=&quot;#content&quot; title=&quot;&lt;?php _e('Skip navigation to the content', 'thematic'); ?&gt;&quot;&gt;&lt;?php _e('Skip to content', 'thematic'); ?&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;?php wp_page_menu('sort_column=menu_order') ?&gt;

			&lt;div id=&quot;access-search&quot;&gt;
				&lt;form id=&quot;searchform&quot; method=&quot;get&quot; action=&quot;&lt;?php bloginfo('home') ?&gt;&quot;&gt;
					&lt;div&gt;
						&lt;input id=&quot;s&quot; name=&quot;s&quot; type=&quot;text&quot; value=&quot;&lt;?php echo wp_specialchars(stripslashes($_GET['s']), true) ?&gt;&quot; size=&quot;20&quot; tabindex=&quot;1&quot; /&gt;
						&lt;input id=&quot;searchsubmit&quot; name=&quot;searchsubmit&quot; type=&quot;submit&quot; value=&quot;&lt;?php _e('Search', 'thematic') ?&gt;&quot; tabindex=&quot;2&quot; /&gt;
					&lt;/div&gt;
				&lt;/form&gt;
			&lt;/div&gt;

        &lt;/div&gt;&lt;!-- #access --&gt;
&lt;?php }
add_action('thematic_header','search_access',9);
</pre>
<p>Reload your page and the search box will be there, but not where you expected it to be! We&#8217;ll need to add a bit of css styling to it. </p>
<p>Go ahead and open the <em>style.css</em> and at the end of it add this css code: </p>
<pre class="brush: css;">
#access-search{
	position:absolute;
	left:50%;
	width:260px;
	margin-left:170px;
	height:29px;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:2px 0 0 4px;
}
</pre>
<p>This is it! You now have successfully added a search box to the right of your thematic main menu! </p>
<div id="preview_download" style="text-align:center">
<a href="http://www.cozmoslabs.com/projects/wp/?theme=indepth" target="_blank"><img src="http://www.cozmoslabs.com/wp-content/plugins/download-monitor/img/preview.gif" alt="Preview of the finished search box"/></a></div>


<p>Related posts:<ol><li><a href='http://www.cozmoslabs.com/2008/12/17/replacing-the-thematic-menu-with-a-dropdown-list-of-categories/' rel='bookmark' title='Permanent Link: Replacing the Thematic Menu with a DropDown List of Categories'>Replacing the Thematic Menu with a DropDown List of Categories</a></li>
<li><a href='http://www.cozmoslabs.com/2009/04/07/green-anyone-try-commune-thematic-child-theme/' rel='bookmark' title='Permanent Link: <span style="color:#7fae52">Green anyone?</span> Try Commune &#8211; Thematic Child Theme!'><span style="color:#7fae52">Green anyone?</span> Try Commune &#8211; Thematic Child Theme!</a></li>
<li><a href='http://www.cozmoslabs.com/2008/10/25/byty-free-child-theme-built-thematic/' rel='bookmark' title='Permanent Link: Byty the Free Child Theme &#8211; Built on Thematic'>Byty the Free Child Theme &#8211; Built on Thematic</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/feed/</wfw:commentRss>
		<slash:comments>39</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Database Caching 11/26 queries in 0.014 seconds using disk

Served from: www.cozmoslabs.com @ 2010-07-31 02:12:19 -->