Full Screen Morphing Search

Contributors: lebcit
Tags: search, full screen search, morphing search, search overlay, jQuery UI autocomplete
Requires at least: 4.6
Tested up to: 4.9.8
Requires PHP: 5.6
Stable tag: 2.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Responsive Full Screen Morphing Search Page Overlay With Predictive Autocomplete !

Description

Full Screen Morphing Search

Effect for any WordPress search input that morphs into a fullscreen overlay.
Enlarge the search input and show 5 most recent posts, 5 most used categories and tags with counter.
Once the input is clicked, the whole search element expands to a fullscreen overlay.
The fullscreen overlay has a bigger search input.

There are no settings for this plugin. Simply activate it, click on any search input and see the magic happens !
PLEASE, MAKE SURE TO HAVE AT LEAST ONE POST WITH ONE CATEGORY AND ONE TAG BEFORE ACTIVATING

As of version 2.0, head over the Customizer, look for FSMS Plugin, design it as you want !

Don't forget to take a look at the FAQ Section.
If you have some issues don't hesitate, head over to the Support Section !
You can also visit my site LebCit.Tk to see the plugin in action and leave your comments.
If you use this plugin, please consider leaving a Review to give me a push forward ;)

Credits

This plugin is created by Manoela Ilic. If you want to learn more about this plugin, visit the Simple Morphing Search original post.

A Picture is worth a thousand words

I think that a demo is even better !
See how Full Screen Morphing Search works.

The jQuery UI autocompletition implemented in this plugin is based on Dominykas Gelucevičius post :
How to create a jQuery autocomplete drop down in WordPress

The main plugin icon is made by Pixel Buddha from www.flaticon.com and is licensed by CC 3.0 BY
The article icon is made by Freepik from www.flaticon.com and is licensed by CC 3.0 BY
The category icon is made by Freepik from www.flaticon.com and is licensed by CC 3.0 BY
The tag icon is made by Freepik from www.flaticon.com and is licensed by CC 3.0 BY

Installation

How to install the plugin and get it working.

1. Install Full Screen Morphing Search plugin through the WordPress plugins screen directly.
2. Make sure to have at least one post with one category and one tag before activating.
3. Activate the plugin through the 'Plugins' screen in WordPress.
4. Navigate to your site and click on any search input and see the magic happens !
5. In the Customizer, look for FSMS Plugin, design it as you want !

Frequently Asked Questions

Recent posts thumbnails are not round !

You will have to use a thumbnail regenerator.
I recommend Regenerate Thumbnails.

The overlay is not covering the whole page !

If your theme has some boxed style(s), like Twenty Sixteen or Twenty Twelve,
the overlay will only cover the inside box (the site content) !

Autocomplete predicts only posts and pages !

Yes, just for now !
I'll be adding some more cool functions with time.

Screenshots

1. As you can see, their is a search form a close button and three columns.
   The first column shows the most 5 recent posts.
   The second column shows the top 5 used categories and how many posts each category has.
   The third column shows the top 5 used tags and how many posts each tag has.

Changelog

2.0 =

• Plugin rewritten from ground up.

1.2.1 =

• Tested up to version 4.9.4 of WordPress.

1.2 =

• Added Predictive Autocomplete For Pages.
• Added Press Escape Key To Close Search Overlay.

1.1 =

• Added Predictive Autocomplete For Posts.

1.0 =

• Initial release.