Title: Bop Search Box Item Type For Nav Menus
Author: joe_bopper
Published: <strong>January 10, 2015</strong>
Last modified: July 11, 2017

---

Search plugins

![](https://ps.w.org/bop-search-box-item-type-for-nav-menus/assets/banner-772x250.
png?rev=1067133)

This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.

![](https://ps.w.org/bop-search-box-item-type-for-nav-menus/assets/icon-128x128.
png?rev=1067133)

# Bop Search Box Item Type For Nav Menus

 By [joe_bopper](https://profiles.wordpress.org/joe_bopper/)

[Download](https://downloads.wordpress.org/plugin/bop-search-box-item-type-for-nav-menus.1.6.0.zip)

 * [Details](https://wordpress.org/plugins/bop-search-box-item-type-for-nav-menus/#description)
 * [Reviews](https://wordpress.org/plugins/bop-search-box-item-type-for-nav-menus/#reviews)
 *  [Installation](https://wordpress.org/plugins/bop-search-box-item-type-for-nav-menus/#installation)
 * [Development](https://wordpress.org/plugins/bop-search-box-item-type-for-nav-menus/#developers)

 [Support](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/)

## Description

Adds search box as a choice of item in navigation menus admin area.

Features include:

 * **now compatible with the WordPress appearance customizer**,
 * search box available as a choice in the admin area for navigation menus,
 * as many boxes can be added to a nav menu as one likes,
 * search boxes can be added as children of other menu items (useful for, e.g., 
   mega-menus),
 * capacity to change button text, placeholder and css classes from the admin area
   to each search box,
 * hooks to modify output (see FAQ and/or code comments),
 * very lightweight,
 * in keeping styles, html, behaviour, etc., with wordpress defaults,
 * works straight out of the box, no configuration needed.

#### Those wanting to translate this plugin, please do.

I believe the plugin is in a translatable state and I’ll do everything I can to 
help in translation. It should be relatively quick as there isn’t much text to the
plugin.

## Screenshots

[⌊A view of a wp-admin/nav-menus.php screen with the plugin enabled.⌉⌊A view of 
a wp-admin/nav-menus.php screen with the plugin enabled.⌉[

A view of a _wp-admin/nav-menus.php_ screen with the plugin enabled.

[⌊A view of the expanded search box menu item in the admin area.⌉⌊A view of the 
expanded search box menu item in the admin area.⌉[

A view of the expanded search box menu item in the admin area.

## Installation

Simply install and search box should appear as an option in the _Appearance > Menus_
section of the admin area upon activation. No configuration needed.

If it fails to appear, open the screen options tab in your Menus admin page and 
check Search Box.

**N.B.** The search box may not appear stylistically as desired in your menu. This
would be because of a conflict between display of the search form and the display
of the menu in the theme you are using. This plugin does not assume anything of 
your theme, nor try to impose anything upon your theme (i.e. no added frontend CSS
or JS). It only provides the functionality as stated.

For assistance in how you can change/fix the outputted design, see [this support post](https://wordpress.org/support/topic/search-box-and-submit-button-is-not-in-the-same-line?replies=3#post-7423986).

For suggestions on designs, see [this codepen collection](http://codepen.io/collection/DBaJMB/).
Thanks to (Das)[https://wordpress.org/support/profile/adwaitatechnologies].

## FAQ

  Installation Instructions

Simply install and search box should appear as an option in the _Appearance > Menus_
section of the admin area upon activation. No configuration needed.

If it fails to appear, open the screen options tab in your Menus admin page and 
check Search Box.

**N.B.** The search box may not appear stylistically as desired in your menu. This
would be because of a conflict between display of the search form and the display
of the menu in the theme you are using. This plugin does not assume anything of 
your theme, nor try to impose anything upon your theme (i.e. no added frontend CSS
or JS). It only provides the functionality as stated.

For assistance in how you can change/fix the outputted design, see [this support post](https://wordpress.org/support/topic/search-box-and-submit-button-is-not-in-the-same-line?replies=3#post-7423986).

For suggestions on designs, see [this codepen collection](http://codepen.io/collection/DBaJMB/).
Thanks to (Das)[https://wordpress.org/support/profile/adwaitatechnologies].

  Q: The items are behaving weirdly in the WordPress appearance customizer?

A: The customizer is still in active development, especially for menus, at the time
of writing this and any odd behaviour is likely because of that. Nonetheless, if
you do experience any issues, let me know on the support forum. I still recommend
using _Appearance > Menus_

  Q: The search box menu items are being called custom links in the editor?

A: This is a known issue with the customizer (at the time of writing). Ignore it,
they still work just fine.

  Q: This plugin is causing my site to fail an HTML validator. Why is that?

A: It is not this plugin but WordPress itself that is causing this issue. When using
more than one WordPress HTML4 search form, there is a conflict as id attributes 
are repeated in the same document (not allowed in HTML). The only solutions to this
are to only use one search form per page, or add support for HTML5 search forms 
to your theme. I advise the latter, see [here](https://wordpress.org/support/topic/placholder-in-non-html5-template?replies=3#post-7813012)
to find out how this is done.

Alternatively,

A: There is an issue with your theme’s nav walker class. Probably worth getting 
another theme/if it’s yours, fixing it.

  Q: I’d like a placeholder in my search input field, how would I go about this?

A: This is set via the _Attribute Title_ field in the menu item editor in the admin
area. However, if your theme doesn’t support html5 search forms, this won’t work.
See [here](https://wordpress.org/support/topic/placholder-in-non-html5-template?replies=3#post-7813012)
for a support post on how to enable HTML5 support. Note that there are a few id 
and class changes when going to HTML5 and that if your theme’s css/js uses the old
ones, you made need to make a few small fixes.

  Q: Annoying html class change in version 1.4.0?

A: This has been rectified, but depending on when you downloaded v1.4.0, it may 
be incorrect on your system.

See this support question for more info and a fix: https://wordpress.org/support/
topic/please-dont-modify-prev-used-classes-in-the-plugin-it-breaks-developed-theme

  Q: How do I modify the output of the search box?

A: There are a number of filters available for the output of the search box and 
they are written about below. The most comprehensive method is to use the filter
hook _get\_nav\_search\_box\_form_ and return the html you want to see. For example:

    ```
    add_filter( 'get_nav_search_box_form', function( $current_form, $item, $depth, $args ){
      $new_form = '...my_html...';
      return $new_form;
    }, 10, 4 );
    ```

Keep in mind that this is being accessed as part of a walk and that $item, $depth
and $args are the same as in [Walker_Nav_Menu::start_el()](https://developer.wordpress.org/reference/classes/walker_nav_menu/start_el/).
Try to use some of the features demonstrated in the code there.

  Q: How do I hide/remove the search submit button (i.e. use enter key to submit
only)?

A: The filter hook _bop\_nav\_search\_show\_submit\_button_ will do the job of removing.
Use:

    ```
    add_filter( 'bop_nav_search_show_submit_button', function( $bool, $item, $depth, $args ){
      $bool = false;
      return $bool;
    }, 10, 4 );
    ```

in your theme’s _functions.php_ file – or other similarly suitable php file.
 If
you wish to strictly hide the button (i.e. keep outputting html but have it invisible),
use

    ```
    .bop-nav-search input[type="submit"]{
      display: none;
    }
    ```

in your theme’s _style.css_ – or other similarly suitable css file. Note that `bop-
nav-search` is the default class applied list item, so if it’s changed, the style
rule will need changing accordingly.

  Q: How do I hide/change/remove the screen reader text (i.e. the possibly invisible
text before the input box)?

A: The filter hook _bop\_nav\_search\_screen\_reader\_text_ will do the job of removing
or changing the text. Use:

    ```
    add_filter( 'bop_nav_search_screen_reader_text', function( $text, $item, $depth, $args ){
      $text = ''; //for nothing
      $text = __( '<span class="screen-reader-text">The text you want</span>', 'myslug' ); //to change - the __() is for theme translation
      return $text;
    }, 10, 4 );
    ```

in your theme’s _functions.php_ file – or other similarly suitable php file.
 The
output should be hidden in a well written theme as it has screen-reader-text class.
However, if this is not the case, you may well wish to add

    ```
    .bop-nav-search .screen-reader-text {
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        overflow: hidden;
        position: absolute !important;
        width: 1px;
    }
    ```

or simply,

    ```
    .screen-reader-text {
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        overflow: hidden;
        position: absolute !important;
        width: 1px;
    }
    ```

in your theme’s _style.css_ – or other similarly suitable css file. Note that `bop-
nav-search` is the default class applied list item, so if it’s changed, the style
rule will need changing accordingly. Also note that, as per WP defaults, the default
output for this filter is different depending on whether your theme supports html5.

  Q: Why isn’t Search Box appearing as a possible item for menus?

A: It is most likely that you have it turned off in the Screen Options tab on your
Menus admin page.

  Q: Why can’t I modify certain fields for my Search Box menu item, e.g., css classes?

A: It is most likely that you have it turned off in the Screen Options tab on your
Menus admin page.

  Q: I’m experiencing conflicts between this plugin and my caching plugin, what 
should I do?

A: Your caching plugin is likely being naughty by misusing WP Object Cache. Many
of these plugins allow you to turn this on or off; I recommend off. However, you
are also likely using an older version of this (BSBITFNM) plugin and you should 
update. Versions 1.3.1 and above no longer use WP Object Cache and should fix the
conflict.

## Reviews

![](https://secure.gravatar.com/avatar/1b54a829eab9e58ef00c0d7284489e7f77ba9948b62348eb8836f826b5686774?
s=60&d=retro&r=g)

### 󠀁[Plugin](https://wordpress.org/support/topic/plugin-185/)󠁿

 [Kunal verma](https://profiles.wordpress.org/jerkyporn/) July 1, 2018 1 reply

Great plugin very helpful

![](https://secure.gravatar.com/avatar/daf3950bd72caaa7a7b6f92ca985f62c7e9777d220603d2b9380d7df2cba7b57?
s=60&d=retro&r=g)

### 󠀁[Very Handy Plugin](https://wordpress.org/support/topic/very-handy-plugin-52/)󠁿

 [ridgey28](https://profiles.wordpress.org/ridgey28/) August 5, 2017

Thanks for such a useful plugin. I have customised the plugin to search for searchform.
php and fallback to other forms if not found. I would like to share the code for
possible inclusion in the next release if you are interested. Please get in touch
if so. Thanks again

![](https://secure.gravatar.com/avatar/0ee0637f7cc31bfb30d8ae4d644eefcfe396cb4855179c16db04e1f710945fde?
s=60&d=retro&r=g)

### 󠀁[Not Good](https://wordpress.org/support/topic/not-good-90/)󠁿

 [Wp_M@hi](https://profiles.wordpress.org/wp04mahi/) July 17, 2017 1 reply

Not Good This Plugin

![](https://secure.gravatar.com/avatar/a011d8033cd00615a96b81e8472afe0f8b9b526d098e399c9a549b98947cbd9b?
s=60&d=retro&r=g)

### 󠀁[Great Plugin](https://wordpress.org/support/topic/great-plugin-14334/)󠁿

 [jakedrake](https://profiles.wordpress.org/jakedrake/) June 30, 2017 1 reply

Nicely done

![](https://secure.gravatar.com/avatar/04c7c52fdb3bba5c388a6ed6d202d78e556a05db86122563fcdc752d51b66885?
s=60&d=retro&r=g)

### 󠀁[No Longer Works](https://wordpress.org/support/topic/no-longer-works-73/)󠁿

 [Mystech](https://profiles.wordpress.org/mystech/) June 4, 2017 1 reply

This plugin no longer adds an option to add search to the menu in the Appearance
| Menu screen of the current version of WordPress.

![](https://secure.gravatar.com/avatar/6d6a36e1b7fcf3736a1fcb7037fd4edb54b20f021b5d809a32b5717ba6b3eff2?
s=60&d=retro&r=g)

### 󠀁[Nice Plugin](https://wordpress.org/support/topic/nice-plugin-2091/)󠁿

 [nikdow](https://profiles.wordpress.org/nikdow/) May 9, 2017

I like the way it behaves like any menu item so you can position and decorate it
how you want. Thanks to Joe for putting me right on how to get at the placeholder
text.

 [ Read all 23 reviews ](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/reviews/)

## Contributors & Developers

“Bop Search Box Item Type For Nav Menus” is open source software. The following 
people have contributed to this plugin.

Contributors

 *   [ joe_bopper ](https://profiles.wordpress.org/joe_bopper/)

[Translate “Bop Search Box Item Type For Nav Menus” into your language.](https://translate.wordpress.org/projects/wp-plugins/bop-search-box-item-type-for-nav-menus)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/bop-search-box-item-type-for-nav-menus/),
check out the [SVN repository](https://plugins.svn.wordpress.org/bop-search-box-item-type-for-nav-menus/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/bop-search-box-item-type-for-nav-menus/)
by [RSS](https://plugins.trac.wordpress.org/log/bop-search-box-item-type-for-nav-menus/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### v1.6.0: Hidden Inputs and a few minor bug fixes

 * Fixed a bug with the update system (nothing to be concerned about as it has still
   never used).
 * Introduced friendlier error and warning messages for those using unsupported 
   PHP & WP.
 * Introduced new action hook “bop_nav_search_hidden_inputs” to easily allow the
   addition of extra filters to the search box.
 * Introduced new action hook “bop_nav_search_pre_get_search_form” to do more or
   less the same job as “pre_get_search_form” but for this plugin only.

#### v1.5.0: Customizer and proper plugin setup

 * Is now compatible with _Appearnce > Customizer_.
 * Added neat and sensible update procedures (this plugin will likely never need
   them, but it’s nice to have).
 * Updated uninstall procedure for compatibility with the update procedure.
 * Improved translation support.

#### v1.4.0: Filters and translation

 * Added filters _bop\_nav\_search\_show\_submit\_button_, _bop\_nav\_search\_screen\
   _reader\_text_, _bop\_nav\_search\_the\_title_, and _bop\_nav\_search\_the\_attr\
   _title_ – read code comments and/or FAQ for more details.
 * Fixed a number of translation issues.
 * Added a lot of comments to the code to help with hooks.
 * Changed a few defaults for them to make more sense.

#### v1.3.1: Cache no more.

 * No longer uses WP Object Cache and uses globals instead (shudder). WP Object 
   Cache is abused by numerous caching plugins causing erratic and incorrect behaviour.

#### v1.3.0

 * Abandoned the fix to hidden metaboxes as that area of wordpress itself is quite
   buggy.
 * Moved developer info into a tab in the screen help section
 * Moved js to inline document as it is much more brief than it was previously and
   there’s little point in having a separate file

#### v1.2.0

 * Found a workaround to some poor core wp code which shows two unexpected notices
   when adding a search menu item by ajax into a menu in wp-admin/nav-menus.php.
 * Added a fix to wordpress’s bizarre decision to hide the plugin from new nav-menu
   users. Not a problem for most users as most make a menu before activating this
   plugin.
 * Removed some redundant unused code
 * Added code comments to help with debugging, etc.

#### v1.1.0

 * Added js and css so the plugin actually works.
 * All previous versions updated to include the js and css files which should have
   shipped in the first place.

#### v1.0.1: Very minor changes

 * Added protection against plugin duplication.
 * ReadMe improved for greater legibility.

#### v1.0.0: Initial release

## Meta

 *  Version **1.6.0**
 *  Last updated **9 years ago**
 *  Active installations **1,000+**
 *  WordPress version ** 3.4 or higher **
 *  Tested up to **4.8.28**
 * Tags
 * [menu](https://wordpress.org/plugins/tags/menu/)[nav](https://wordpress.org/plugins/tags/nav/)
   [nav menu](https://wordpress.org/plugins/tags/nav-menu/)[nav menus](https://wordpress.org/plugins/tags/nav-menus/)
 *  [Advanced View](https://wordpress.org/plugins/bop-search-box-item-type-for-nav-menus/advanced/)

## Ratings

 4.7 out of 5 stars.

 *  [  21 5-star reviews     ](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/reviews/?filter=2)
 *  [  2 1-star reviews     ](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/reviews/)

## Contributors

 *   [ joe_bopper ](https://profiles.wordpress.org/joe_bopper/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/bop-search-box-item-type-for-nav-menus/)