How can I add the search widget to the navigation bar?
I followed this, but it puts the search widget above the menu bar.
http://themeshaper.com/forums/topic/widgets-in-the-header
I also followed this, but I dont like the style of the search. I prefer the widget style.
http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/
This should get you started. Following the Cozmos Labs example change:
<input id="s" name="s" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />to
<input id="s" name="s" type="text" size="30" tabindex="1" onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}" onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}" value="To search, type and hit enter"/>and add this style to hide the submit button
#access-search #searchsubmit {
display:none;
}Thanks for the prompt reply. That worked a treat.
One more question. How do I style the font inside the search box?
Try:
#access-search #s {font-family:helvetica}
Thanks. That worked.
yahyaayob
Member
How do I make it in the middle of the navigation bar?
Right now, the search form is all the way to the top almost flushing with the top of the navigation bar.
You can see here www.watchwerkz.com.sg/wp
Add a search box to the Thematic Feature Site menu
// Remove default Thematic actions
function remove_thematic_actions() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');
// Remove default Thematic actions --> ENDS HERE
// Create a custom access div with the menu and search box
function search_access() { ?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php wp_page_menu('sort_column=menu_order') ?>
<div id="access-search">
<form id="searchform" method="get" action="<?php bloginfo('home') ?>">
<div>
<input id="s" name="s" type="text" size="30" tabindex="1" onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}" onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}" value="To search, type and hit enter"/>
<input id="searchsubmit" name="searchsubmit" type="submit" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
</div>
</form>
</div>
</div><!-- #access -->
<?php }
add_action('thematic_header','search_access',9);
// Create a custom access div with the menu and search box --> ENDS HERE
/* =ACCESS MENU STYLES
-------------------------------------------------------------- */
#access-search #searchform {
position:absolute;
left:50%;
width:326px;
margin-left:170px;
height:29px;
border-top:1px solid #111;
border-left:1px solid #111;
border-right:1px solid #111;
padding:2px 0 0 4px;
}
#access-search #searchform label {
display:none;
}
#access-search #searchform input {
font-size:13px;
line-height:18px;
}
#access-search #searchform input#s {
width:316px;
}
#access-search #searchform input#searchsubmit {
display:none;
}hey I want to get the search bar on the menu but I can't because I'm using the WP3 Menu any fix for this?
Robo
Member
jnune09, I would like to do the same ...
I guess you would shorten the width of the menu bar, then somehow code the search so that it fits in the new-found space.
You must log in to post.
