The AddSearch WordPress plugin allows anybody with a self-hosted WordPress website to install AddSearch easily. The plugin replaces the existing search of your website with AddSearch, allowing your users to enjoy an instant and lightning fast search. Please note that websites hosted on WordPress.com are not supported, due to WordPress limitations.

Here’s how to install the AddSearch WordPress Plugin:

  1. Go to the AddSearch home page and sign up with your WordPress website address and your email.
  2. Log in to your WordPress site. Select “Plugins” and click “Add New”. Search for “addsearch” and click “Install Now”
  3. Open the AddSearch confirmation e-mail, and from the bottom copy your Site Key.
  4. Go back to your WordPress admin interface and to the AddSearch plugin. Paste the Site Key in Settings → AddSearch and click Save.
  5. Select whether you want to use search-as-you-type search widget (default), or more traditional separate results page.
  6. Go to Appearance → Widgets. Drag the WordPress native Search Widget to your preferred widget area.
  7. You’re DONE!

To modify the settings of your search, log in to the AddSearch Dashboard.

WordPress Shortcode

With the shortcode [addsearch] you can add multiple AddSearch fields to your website. Add the shortcode to a page, blog post, navigation or anywhere, and a search field will appear there.

Modify look and feel of the search input field

WordPress provides Additional CSS editor to modify the CSS of your theme. To modify the look and feel of the search input field, follow these instructions

  1. Login to your WordPress Dashboard
  2. Hover over Appearance
  3. Click Customize

Picture of WordPress dashboard Appearance menu.

  1. Click Additional CSS on the bottom left of the page

Picture of Additional CSS link in Customize WordPress page.

  1. Add selector (input.addsearch) and styles into the textfield
input.addsearch {
    /* 
      Add your styles here
    */ 
}
  1. Click Publish to save your changes

Picture of Additional CSS editor in WordPress Customize page.

Visit this WordPress article for more information on Custom CSS and Additional CSS.