Modal Search Form

Download From WordPress.org

Modal Search Form does not require SearchWP but will use it if available

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 😀

Screenshots of Modal Form in various themes

SearchWP Modal Form adapts to your active theme

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) 🥳

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:

Screenshot of SearchWP Modal Form's Menu customization options

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"]

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:

Screenshot of adding a modal search form as a Gutenberg block

Insert and customize modal search forms in the block editor

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:

<?php
searchwp_modal_form_trigger();
view raw functions.php hosted with ❤ by GitHub

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

<?php
searchwp_modal_form_trigger( array(
'echo' => true, // Whether to echo
'type' => 'button', // Either 'link' or 'button'
'text' => 'Open Search', // Text of the trigger
'engine' => 'my_searchwp_engine', // SearchWP engine (when applicable)
'template' => 'My Custom Template', // Modal template to use (see docs)
) );
view raw functions.php hosted with ❤ by GitHub

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:

searchwp_modal_form_template_dir
Customize the folder name used to store your custom templates (default is searchwp-modal-form)

<?php
add_filter( 'searchwp_modal_form_template_dir', function( $dir ) {
return 'my-searchwp-modal-forms';
} );
view raw functions.php hosted with ❤ by GitHub

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:

# Build development version of SearchWP Modal Search Form bundle
npm run dev
# Build production version of SearchWP Modal Search Form bundle
npm run build
# Build development version of SearchWP Modal Search Form block
npm run blockdev
# Build production version of SearchWP Modal Search Form block
npm run blockbuild
view raw tmp.sh hosted with ❤ by GitHub
Fix keyword search on your site. No coding required!

Now you can utilize all of the content that's gone unrecognized by native WordPress keyword search instantly with SearchWP

Get SearchWP