• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar

Dr Andy Teh

Healthcare Quality Consultant

  • Home
  • Archive
  • About
  • Contact
You are here: Home / WordPress / How To Add a Search Form To a Navigation Menu Without a Plugin in Genesis
post

How To Add a Search Form To a Navigation Menu Without a Plugin in Genesis

The code snippet I used to implement a Search form in the primary navigation menu of my website, built on the Genesis Framework and Dynamik Website Builder.

November 24, 2020 Leave a Comment

To keep my WordPress websites as performant as possible, I only install plugins if I cannot achieve a function I want by adding some code in my child theme’s functions.php or style.css files.

When setting up this blog, which was built on the Genesis Framework and Dynamik Website Builder (DWB), I wanted a search bar on the far right of the primary navigation menu inline with the menu items. To my surprise, I wasn’t able to do so even after trying various solutions published on the Internet, including the StudioPress code snippet for adding Navigation  Extras.

On the other hand, the “Adding Navigation Extras” code snippet worked as expected on one of my other sites which also runs on the Genesis Framework, but with the Genesis Sample child theme and Cobalt Apps’ Genesis Extender plugin instead of DWB. So I’m guessing the underlying issue is related to DWB.

Having felt I had run out of options, I resorted to using the popular Ivory Search plugin, which got the job done quickly and without fuss.

A few days ago, a renewed desire to reduce the loading time of my pages made me reconsider continued use of the plugin and I embarked on another hunt for a simpler (no-plugin) method of adding a Search form to the navigation menu.

After trying several (more) different code snippets, the following one did the trick. 

//* Add Search form to navigation menu
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
   $items .= '<li>' . get_search_form( false ) . '</li>';
   return $items;

Some CSS was required for styling the form – this was easily done in DWB.

In addition to the Ivory Search plugin, I deactivated and deleted the following via the WordPress Plugins page, without compromising the site’s functionality:

  • Redirection
  • Equal Height Columns
  • Fast Velocity Minify
  • Envira Gallery Lite
  • BunnyCDN WordPress Plugin
  • Ninja Forms Layout & Styles extension

Being much lighter – I’m down to only seven plugins now – and with a few other improvements, my site’s load time has decreased by about 24%.

Filed under: WordPress  Tagged with: dynamik website builder, genesis, navigation menu, search form

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Copyright © 2021 Dr Andy Teh