Just lately, certainly one of our readers requested if we might write a tutorial on the best way to add a full display screen search overlay in WordPress. You’ve most likely seen this on standard websites like Wired. When a consumer clicks on the search icon, the search field opens up and covers the entire display screen which may enhance consumer expertise on cell gadgets. On this article, we’ll present you the best way to add a full display screen search overlay in WordPress.
The complete display screen search is slowly changing into a development as a result of it drastically improves the search expertise for cell customers. Since cell screens are very small, by providing a full display screen overlay, you make it straightforward for customers to kind and search in your web site.
Once we first received this tutorial request, we knew it might require some code. Our aim at WPBeginner is to make issues so simple as attainable.
As soon as we had completed writing the tutorial, we realized that it was too difficult of a course of, and it ought to somewhat be wrapped right into a easy plugin.
To make it straightforward, we’ve got created a video tutorial on the best way to add a full display screen search overlay that you may watch beneath.
Nonetheless in the event you simply need to observe text-instructions, then you possibly can observe our step-by-step tutorial on the best way to the best way to add a fullscreen search overlay in WordPress.
Including Full Display Search Overlay in WordPress
Very first thing it’s good to do is set up and activate the WordPress Full Display Search Overlay plugin. For extra particulars, see our step-by-step information on the best way to set up a WordPress plugin.
WordPress Full Display Overlay Search plugin works out of the field, and there are not any settings so that you can configure.
You’ll be able to merely go to your web site and click on on the search field to see the plugin in motion.
Please observe, that the plugin works with the default WordPress search function. It additionally works nice with SearchWP, which is a premium plugin that drastically improves the default WordPress search.
Sadly, this plugin doesn’t work with Google Customized Search.
Customizing Full Display Search Overlay
The WordPress Full Display Search Overlay plugin comes with its personal stylesheet. So as to change the looks of the search overlay, you’ll have to edit the plugin’s CSS file or use !essential in CSS.
First you’ll need to connect with your web site utilizing an FTP shopper. If you’re new to utilizing FTP, then check out our information on the best way to add recordsdata to WordPress utilizing FTP.
As soon as you might be linked, it’s good to find the plugin’s CSS folder. You’ll find it beneath the next path:
You’ll find a file
full-screen-search.css inside css folder. You might want to obtain this file to your laptop.
Open the file, you simply downloaded in a plain textual content editor like Notepad. You may make any modifications to this file. For instance, we wished to vary the background and font coloration to match our demo web site.
On this code, we’ve got solely modified background coloration at line 62, and added font coloration at line 150. If you’re good with CSS, then be at liberty to vary different type guidelines as nicely.
As soon as you might be accomplished, you possibly can add this file again to plugin’s CSS folder utilizing FTP. Now you can see your modifications by visiting your web site.
If you’re utilizing this in your individual theme, then it’s higher to make use of !essential tags so the plugin updates wouldn’t override any modifications.
For builders and consultants, you can too simply rename the plugin and bundle it as a part of your theme or providers.
We solely created this plugin as a result of all different methods of scripting this tutorial would’ve been too difficult for newbie customers.
We hope this text helped you add full display screen search overlay to your WordPress web site. You might also need to see our information on the best way to add a search toggle impact in WordPress