Modal Search Form

Use SearchWP Modal Search Form to easily integrate an accessible, lightweight modal search form into your WordPress website! Designed to integrate any theme and any SearchWP configuration, Modal Form is the easiest way to add a great looking search form to your site.

Modal Search Form does not require SearchWP, so it is available on wordpress.org and will work with any WordPress site. If you have SearchWP installed and activated, Modal Form will automatically utilize it. If you don’t, native WordPress search results will be provided.

The plugin repo is available as well https://github.com/jchristopher/searchwp-modal-search-form if you have any ideas for templates please open a PR ?

What makes it different?

The philosophy behind SearchWP Modal Search Form is to make it easy to implement accessible and lightweight modal search forms but perhaps even more important make it a great developer (and user) experience.

SearchWP Modal Search Form directly integrates with WordPress in the way you use it, and the default modal form theme builds upon the styles put in place by your active theme, making the overhead as small as possible. There’s a full template loader built in as well, allowing you to fully customize your SearchWP Modal Search Form with minimal hassle.

Check out the default template for an example of how easy it is to customize ?

Usage

SearchWP Modal Search Form makes it easy to implement modal search forms anywhere in your WordPress website. To implement any modal you need both (1) a trigger and (2) the modal itself.

With this plugin, implementing both pieces is extremely easy! The following methods are built in and available to you:

1. As a Menu Item
2. Using a Shortcode
3. As a Gutenberg Block
4. Within your template(s) programmatically (code)

You can add any number of search form modals to your site, each using its own template and configuration options (e.g. SearchWP engine) ?

Menu Item search form modal

Adding a search form to your main site navigation is a great idea, and SearchWP Modal Search Form makes it easy to add in just a moment.

The plugin adds a new group available to you when editing your existing Menus:

Once added, you can treat SearchWP Modal Search Form Menu Items as you would any other Menu Item, including additional customizations you may wish to put in place.

Shortcode search form modal

If you’d prefer, you can use a Shortcode to output a modal form trigger which when clicked will display your search form modal.

[searchwp_modal_search_form]

You can apply additional customizations that control various attributes of the trigger and the modal itself, for example:

[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]

Which renders like so:

Open Search

The available Shortcode attributes are as follows:

engine

The name of the SearchWP engine to use (applies only if SearchWP is active)

template

The modal template name, please see the template documentation

text

Controls the text of the trigger

type

Defines the trigger type, which can be either a link <a/> or a <button/>

Using these attributes you can fully customize both the trigger and modal template in use.

Gutenberg block search form modal

SearchWP Modal Search Form supplies you with the option to insert a modal search form by using a Gutenberg block if you’d like:

Using the Block Properties panel you can customize various attributes of the block, including:

Text

Controls the text of the trigger

Engine

The name of the SearchWP engine to use (applies only if SearchWP is active)

Template

The modal template name, please see the template documentation

Type

Defines the trigger type, which can be either a link <a/> or a <button/>

Changing any of the Block Properties will allow you to see what the trigger will look like in real time.

Programmatic search form modal

You have the option of directly inserting a SearchWP Modal Form into your theme templates anywhere you’d like, using the following syntax:

There are a number of arguments that can be passed as an array when calling searchwp_modal_form_trigger():

You can implement any number of SearchWP Modal Search Forms throughout your site, each with its own configuration arguments (or sharing the same!)

Customizing and creating modal templates

SearchWP Modal Search Form ships with a template loader, allowing you to easily customize (and create) the available templates. SearchWP Modal Form Templates encompass the content and style of the modal itself, not the trigger.

SearchWP Modal Search Form triggers inherit styles from your active theme, and can be customized by adding any custom CSS you’d like.

? Important ? When customizing or creating SearchWP Modal Form templates, you should create a folder within your (Child) theme titled searchwp-modal-form which will contain all of your custom templates that will not be overwritten when the plugin is updated.

SearchWP Modal Search Form templates are file based, and collected by checking the following directories:

• ~/wp-content/plugins/searchwp-modal-form/templates/*.php (do not edit these, they will be overwritten in subsequent plugin updates!)
• ~/wp-content/themes/your-child-theme/searchwp-modal-form/*.php (if applicable)
• ~/wp-content/themes/your-theme/searchwp-modal-form/*.php

In order for a SearchWP Modal Form Template to be included, it must have the following header comment block:

/**
 * SearchWP Modal Form Name: My Custom Template
 */

This defines the modal template name, which is used when defining the template to use when inserting a modal form trigger. It is suggested that any custom templates you create have a unique name, so as to be easily identifiable.

You should use the default template as a starting point when customizing or creating modal templates. It is fully documented for your reference.

Hooks

The following hooks have been made available for you to customize the behavior of SearchWP Modal Form:

Need a new hook? Create an Issue so we can all work on it ?

Developer notes

There is a build process for all JavaScript bundles contained within a single command:

npm run watch

This will execute four concurrent processes that watch for file changes and subsequently generate the following:

1. Production version of the SearchWP Modal Search Form bundle
2. Development version of the SearchWP Modal Search Form bundle
3. Production version of the SearchWP Modal Search Form block
4. Development version of the SearchWP Modal Search Form block

You can run each process individually if you’d prefer: