Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings


How to Add Search to Header

Tutorials  Last Updated: Time to Read: 2 minutes

Search fields in the header are a common request, and one which is fulfilled via the Layers Pro plugin where you can enable a search option in your header menu.

Adding search fields to other areas in the theme, such as the top bar, below the title (as on this site) etc require either a plugin capable of this, or a child theme that injects your search form code using the Layers Theme API, also called action hooks.

With Layers Pro, a Search toggle is added to your Header options in the Customizer where you may enable an expandable search field in your Header Menu.

To add a custom search field either to a specific location in the Theme, or to use special search functionality, you must first create a basic child theme.

In the child theme functions, use a Layers action hook to insert your custom search form where the hook is output. For example. using the layers_before_header_secondary_inner hook to place it in the top menu bar, or layers_before_header_nav to place it before the main Header Menu (rather than after, as Layers Pro does).

See How to Create Layers Child Themes and Using Actions, Filters & Hooks to learn more about how this works.

The basic structure of a custom function that uses a hook looks like this:

Let’s break it down:

Line 1:  Here we use the add_action() function from the WordPress API to hook our chosen location name layers_before_header_nav  and our custom function name, which can be anything we want as long as it is unique (for example, naming it custom_search  is risky since generic terms like that might be used by some other process that will conflict). This is explained in more detail in the guide linked above.

Line 2: The opening declaration of our custom function which we just named and hooked in line 1.

Line 3:  This is where your custom code goes. We can’t give you too much specific direction here, since it is your customization and can take on just about any form you wish. An example of a default WordPress search form is shown below.

View full Search Form reference on WordPress Codex

Line 4: Close off the function

The above solution, as-is, probably won’t look very pretty and won’t have any special functionality like predictive searching, animations or drop-downs. We have provided a list of resources at the end for tutorials you can find online for various search form implementations.

To implement a full custom search solution like we have on this website, you still need to use the above techniques, though it involves several other pieces such as plugin support, search results and a custom searchform.php. Please refer to How to Customize Search Results for details.

Did you know?

Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.