Search Box in Navigation Bar of the Thesis Theme

In this tutorial, we will see how to add the Search Box on the Navigation Bar of the Thesis Theme for Wordpress.

Note: This is tested with Thesis Theme version 1.6.  Will not work with the older versions.  Contact me via the Comments section and I will help you!

Using HTML Filters

Here we will take a slightly different approach.  Since Thesis Theme provides you only hooks for moving the Navigation menu around – we will not be able to use it directly for controlling the content inside the Navigation menu.

So we will use the filters to parse the HTML code of the Navigation menu and insert the content where we need.

Getting the Code Work Done

As with every other customization, this tutorial needs changes in the following files:

• <Thesis Installation folder>/custom/custom_functions.php
• <Thesis Installation folder>/custom/custom.css

First, let us hit the custom_functions.php file.

We need a handle to get the HTML code, as it is rendered on to the page.  So we will have a custom method and this method will get a handle to the HTML code as input. We call this function – ‘thesis_navmenu_search’

// Start buffering after the tag
add_action('thesis_hook_before_html', 'thesis_buffer_start');
function thesis_buffer_start() { ob_start('thesis_navmenu_search'); }

Close the handle, once the page is completely rendered.  This is done using the following code.

// Stop buffering before the tag
add_action('thesis_hook_after_html', 'thesis_buffer_stop');
function thesis_buffer_stop() { ob_end_flush(); }

Now let us create the exact function – thesis_navmenu_search. This function will do the following:

• Keep parsing the HTML Code
• When it encounters the Navigation menu – identified by <ul class=”menu”> – in Thesis 1.6, insert the Search Box code
• Properly close the HTML and return for further parsing

This is a powerful technique – the whole ideology behind the hooks.  You can use this to alter anything that Thesis Hooks prevents you from getting into!

Here is the complete code (including the previous snippets) to be copied into your custom_functions.php file.

// Add Search Box to Navigation Bar
// We use Wordpress filters here 

// Start buffering after the tag
add_action('thesis_hook_before_html', 'thesis_buffer_start');
function thesis_buffer_start() { ob_start('thesis_navmenu_search'); } 

// Stop buffering before the tag
add_action('thesis_hook_after_html', 'thesis_buffer_stop');
function thesis_buffer_stop() { ob_end_flush(); } 

function thesis_navmenu_search($buffer) {
// Filter for the header navigation
if(preg_match('/<ul class="menu">.*<\/ul>/sU', $buffer, $matches) &gt; 0) { 

// Search box markup
$search = sprintf( "<li class='nav_right search'><form class='search_form' method='get' action='%s'><input class='text_input' type='text' name='s' id='s' value='search - hit enter' onfocus=' if (this.value===\"search - hit enter\") this.value=\"\";' onblur='if (this.value==\"\") this.value=\"search - hit enter\";'/></form></li>", get_bloginfo('wpurl') ); 

// Add markup to the navigation
$nav = str_replace(' <ul class="menu">', ' <ul class="menu">' . $search, $matches[0]); 

// Modfy the buffer
$buffer = str_replace($matches[0], $nav, $buffer);
} 

// Send the modified markup to the screen
return $buffer; }

Styling it up

Now if you reload your Blog page, you will see the Search box already in the Navigation Bar.  Let us do some CSS patch up – to make it look good.  Copy the following code to your custom.css file.

Basically I am just setting up some basic input box styles, in this piece of code.

/* Navigation Bar Search */
.custom ul.menu li.nav_right {
  float:right;
  height: auto;
  overflow:hidden;
  font-size:10px;
  letter-spacing:1px;
  text-transform: uppercase;
}
.custom ul.menu li.search input {
  height:25px;
  width:200px;
  padding:4px 10px 0 10px;
  background-color:#FFFFFF;
  color:#000000;
  font-size:14px;
  letter-spacing:1px;
  text-transform: uppercase;
}

You might want to change the following 2 parameters – under .custom ul.menu li.search input – in the previous code snippet

• Height and Width

Change it suitably to match your Theme and the Navigation Menu appearance.  Here is a sample on one of my sites:

 

Conclusion

So that’s all about it to add the Search Box into the Navigation menu in Thesis Theme.  Let me know how it goes – I love to hear back from people.  Also, feel free to contact me if you need any help.

Tagged as: thesis theme, thesis tips