diff --git a/README.md b/README.md new file mode 100644 index 0000000..a575459 --- /dev/null +++ b/README.md @@ -0,0 +1,167 @@ +# Full Screen Morphing Search +Contributors: lebcit +Tags: search, full screen search, morphing search, search overlay, jQuery UI autocomplete +Requires at least: 4.1.0 +Tested up to: 5.2.2 +Requires PHP: 5.6 +Stable tag: 3.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 + +**PLEASE, MAKE SURE TO HAVE AT LEAST ONE POST WITH ONE CATEGORY AND ONE TAG BEFORE ACTIVATING** + +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 ! + +In the Customizer, look for **FSMS Plugin**, design it as you want ! +You can change colors, search placeholder's text and default icons with a styling option ! + +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 and adapted for WordPress by . +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 ! + +Some of your images where added before this plugin. +If your posts thumbnails are not round, +you'll have to use, one time, a thumbnail regenerator. +I recommend Regenerate Thumbnails. +You can uninstall the thumbnail regenerator once the regeneration is done. + +### 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) ! + +### How to change the search input text color ? + +First, you'll have to type something in the input, +then choose the desired color. +Take a look at the Screenshots. + +### How to change the shape of **New Icon/Image** ? + +First make sure that you have used a thumbnail regenerator, see first FAQ. +Then, click on the checkbox option **Icon/Image Round or Not ?!** +If the new Icon/Image is already round (like the default one of category and tag), this option will have no effect ! + +### Autocomplete predicts only posts and pages ! + +Yes, just for now ! +I'll be adding some more cool functions with time. + +## Screenshots + +### Full Screen Morphing Search Plugin Screenshot +![Full Screen Morphing Search Plugin Screenshot](https://plugins.svn.wordpress.org/full-screen-morphing-search/assets/screenshot-1.png "Full Screen Morphing Search Plugin Screenshot") +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. + +### FSMS Plugin in the Customizer +![FSMS Plugin in the Customizer](https://plugins.svn.wordpress.org/full-screen-morphing-search/assets/screenshot-2.png "FSMS Plugin in the Customizer") +FSMS Plugin in the Customizer. + +### Posts with no Featured Image defined +![Posts with no Featured Image defined](https://plugins.svn.wordpress.org/full-screen-morphing-search/assets/screenshot-3.png "Posts with no Featured Image defined") +Posts with no Featured Image defined. + +### Change the default icons and choose to make the new Icon/Image Round or Not ! +![Change the default icons](https://plugins.svn.wordpress.org/full-screen-morphing-search/assets/screenshot-4.png "Change the default icons") +Change the default icons and choose to make the new Icon/Image Round or Not ! + +### First type something in the input text field, then change the input text color. +![Change the input text color](https://plugins.svn.wordpress.org/full-screen-morphing-search/assets/screenshot-5.png "Change the input text color") +First type something in the input text field, then change the input text color. + +### Old screenshot +![Old screenshot](https://plugins.svn.wordpress.org/full-screen-morphing-search/assets/screenshot-6.png "Old screenshot") +Old screenshot. + +## Changelog + +### 2.7 = +* Corrected Undefined Index 'fsmsp_search_form_text'. + +### 2.6 = +* Corrected Undefined Index Error. +* Force Search Input height. +* Tested up to version 5.2.2 of WordPress. + +### 2.5 = +* Tested up to version 5.2 of WordPress. +* Updated Kirki from 3.0.34.1 to 3.0.35.3 + +### 2.4 = +* Added full_screen_morphing_search_add_svg_tags( $svg_tags ) +* Changed magnifier.svg +* Removed file_get_contents() + +### 2.3 = +* Corrected Undefined Index Error. +* Removed Undefined Index Error from FAQ Section. + +### 2.2 = +* Corrected MutationObserver for categories and tags icons. +* Updated readme FAQ section for Undefined index Error. + +### 2.1 = +* Added ability to change icons from Customizer. +* Added ability to change input text color. +* Added italic font-style to input. +* Changed placehoder's text behaviour on total remove. + +### 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. \ No newline at end of file diff --git a/readme.txt b/readme.txt index 559e904..a2a4e85 100644 --- a/readme.txt +++ b/readme.txt @@ -1,9 +1,10 @@ === 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.4 -Stable tag: 1.2.1 +Requires at least: 4.1.0 +Tested up to: 5.2.2 +Requires PHP: 5.6 +Stable tag: 3.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html @@ -11,7 +12,7 @@ Responsive Full Screen Morphing Search Page Overlay With Predictive Autocomplete == Description == -= Full Screen Morphing Search = +**PLEASE, MAKE SURE TO HAVE AT LEAST ONE POST WITH ONE CATEGORY AND ONE TAG BEFORE ACTIVATING** 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. @@ -19,7 +20,9 @@ Once the input is clicked, the whole search element expands to a fullscreen over 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** + +In the Customizer, look for **FSMS Plugin**, design it as you want ! +You can change colors, search placeholder's text and default icons with a styling option ! 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 ! @@ -28,9 +31,9 @@ If you use this plugin, please consider leaving a . +This plugin is created by and adapted for WordPress by . If you want to learn more about this plugin, visit the Simple Morphing Search original post. -> A Picture is worth a thousand words +> A Picture is worth a thousand words I think that a demo is even better ! See how Full Screen Morphing Search works. @@ -39,30 +42,49 @@ The jQuery UI autocompletition implemented in this plugin is based on Dominykas 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 category icon is made by Picol from www.flaticon.com and is licensed by CC 3.0 BY -The tag icon is made by Elegant Themes 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. +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 Force Regenerate Thumbnails. +Some of your images where added before this plugin. +If your posts thumbnails are not round, +you'll have to use, one time, a thumbnail regenerator. +I recommend Regenerate Thumbnails. +You can uninstall the thumbnail regenerator once the regeneration is done. = 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) ! += How to change the search input text color ? = + +First, you'll have to type something in the input, +then choose the desired color. +Take a look at the Screenshots. + += How to change the shape of New Icon/Image ? = + +First make sure that you have used a thumbnail regenerator, see first FAQ. +Then, click on the checkbox option **Icon/Image Round or Not ?!** +If the new Icon/Image is already round (like the default one of category and tag), this option will have no effect ! + = Autocomplete predicts only posts and pages ! = + Yes, just for now ! I'll be adding some more cool functions with time. @@ -73,8 +95,52 @@ 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. +2. FSMS Plugin in the Customizer. + +3. Posts with no Featured Image defined. + +4. Change the default icons and choose to make the new Icon/Image Round or Not ! + +5. First type something in the input text field, then change the input text color. + +6. Old screenshot. + == Changelog == += 2.7 = +* Corrected Undefined Index 'fsmsp_search_form_text'. + += 2.6 = +* Corrected Undefined Index Error. +* Force Search Input height. +* Tested up to version 5.2.2 of WordPress. + += 2.5 = +* Tested up to version 5.2 of WordPress. +* Updated Kirki from 3.0.34.1 to 3.0.35.3 + += 2.4 = +* Added full_screen_morphing_search_add_svg_tags( $svg_tags ) +* Changed magnifier.svg +* Removed file_get_contents() + += 2.3 = +* Corrected Undefined Index Error. +* Removed Undefined Index Error from FAQ Section. + += 2.2 = +* Corrected MutationObserver for categories and tags icons. +* Updated readme FAQ section for Undefined Index Error. + += 2.1 = +* Added ability to change icons from Customizer. +* Added ability to change input text color. +* Added italic font-style to input. +* Changed placehoder's text behaviour on total remove. + += 2.0 = +* Plugin rewritten from ground up. + = 1.2.1 = * Tested up to version 4.9.4 of WordPress.