How To Make AMP Friendly Search Forms For WordPress

Trying to make AMP friendly search forms in WordPress to pass the AMP validation test? You can do this by including the require AMP scripts and editing the default WordPress search form.

AMP friendly search forms

Include The AMP Form Script

Firstly you must include the required script on any page that will use the search form. If the search form is on all your pages, simply include this into the header.php file.

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Creating The AMP Friendly Search Form

To make an AMP friendly search form, you need to edit the default WordPress searchform.php file.

  1. Connect to your server through an FTP client such as FileZilla;
  2. Create the file searchform.php in your WordPress theme’s template directory;
  3. Copy and paste the AMP friendly search form from below.
<li id="search">
 <label for="s">Search</label> 
 <form id="searchform" method="get" action="/index.php" target="_top">
 <div>
 <input type="text" name="s" id="s" size="15" /><br />
 <input type="submit" value="Search" />
 </div>
 </form>
</li>

Notice, we’ve edited the default search form to become AMP friendly by adding the <form> element itself by giving it a require AMP target attribute (target=”_top”).