Searchform as 1st item on left of navmenu

Community Forums Forums Design Tips and Tricks Searchform as 1st item on left of navmenu

This topic is: not resolved


This topic contains 1 reply, has 2 voices, and was last updated by  SoZo 2 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #3126


    I am using Prose theme. I would like to add a searchform as the first item on the left of the primary navmenu. I found this helpful article from Bill Erickson ( on adding custom content to the navmenu on the right hand side. I tried it out with a searchform, reversing the final concatenation to get the custom content (in this case, the searchform) to appear on before the rest of the menu instead of after it.

    The searchform does appear, but before the navmenu div rather than inside it. Is there a way of getting it inside the navmenu as the first item?

    My custom navmenu filter/function (adapted from Bill Erickson’s) is:

    /* Searchbox in menu */

    add_filter( ‘genesis_nav_items’, ‘sr_menu_searchform’, 10, 2 );

    add_filter( ‘wp_nav_menu_items’, ‘sr_menu_searchform’, 10, 2 );

    function sr_menu_searchform($menu, $args) {

    $args = (array)$args;

    if ( ‘primary’ !== $args[‘theme_location’] )

    return $menu;

    $searchform = ‘<li id=”search”>’ . get_search_form() . ‘</li>’ ;

    return $searchform . $menu;



    My html output is:

    <form method=”get” action=”http://localhost:8888/” >

    <input type=”text” value=”Search this website &hellip;” name=”s” onfocus=”if (this.value == ‘Search this website &hellip;’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Search this website &hellip;';}” />

    <input type=”submit” value=”Search” />


    <div id=”nav”><div><ul id=”menu-primary-menu”><li id=”search”></li><li id=”menu-item-5438″><a href=”http://localhost:8888/”>Home</a></li>

    <li id=”menu-item-5439″><a href=”http://localhost:8888/faq/”>FAQ</a></li>

    […etc. for other list items in menu…]







    Enable the search form in navigation extras in the Genesis settings and then change the floats. I recommend installing the Firebug add on for Firefox or using Chrome’s Firebug Lite which will enable you to right click on any element to inspect it and determine the associated style rules or the selectors required to create new style rules.

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.