Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am not very experienced with PHP but have managed to find a snippet to add a search bar to my main menu, using this code in my functions.php file:

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
$items .= '<li>' . get_search_form( 'echo=0' ) . '</li>';
return $items;
}

I don't know how to style this though, I know I need to add a class to it so I can style it with css but don't know how to! Also, I wondered how difficult it would be to make it just a search icon that toggles to a bar on click? I think this can be done in css too?

Thanks in advance...

share|improve this question
2  
Whats the source of the snippet? Please link to it. –  Brad Dalton Apr 30 at 21:27

1 Answer 1

The tutorial shows you how to add a class and style it.

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
$items .= '<li class="your-class">' . get_search_form( 'echo=0' ) . '</li>';
return $items;
}

For CSS questions, please ask on Stackoverflow.

But the code doesn't enable you to select between the primary or secondary nav menus unless you extend it like this.

add_filter( 'wp_nav_menu_items','wpsites_add_search_box', 10, 2 );
function wpsites_add_search_box( $items, $args ) {

if ( 'primary' != $args->theme_location )
return $items;

$items .= '<nav class="your-class">' . get_search_form( 'echo=0' ) . '</nav>';
return $items;
}

Written about this topic several times and i know you would want to use the same class as your themes nav menu if you want to style it the same.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.