How to Add a Full Screen Search Overlay in WordPress

Adding Full Screen Search Overlay in WordPress

First thing you need to do is install and activate the WordPress Full Screen Search Overlay plugin. For more details, see our step by step guide on how to install a WordPress plugin.

WordPress Full Screen Overlay Search plugin works out of the box, and there are no settings for you to configure.

You can simply visit your website and click on the search box to see the plugin in action.

Please note, that the plugin works with the default WordPress search feature. It also works great with SearchWP, which is a premium plugin that greatly improves the default WordPress search.

Unfortunately, this plugin does not work with Google Custom Search.

Customizing Full Screen Search Overlay

The WordPress Full Screen Search Overlay plugin comes with its own stylesheet. In order to change the appearance of the search overlay, you will have to edit the plugin’s CSS file or use !important in CSS.

First you will need to connect to your website using an FTP client. If you are new to using FTP, then take a look at our guide on how to upload files to WordPress using FTP.

Once you are connected, you need to locate the plugin’s CSS folder. You will find it under the following path:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

You will find a file full-screen-search.css inside css folder. You need to download this file to your computer.

Open the file, you just downloaded in a plain text editor like Notepad. You can make any changes to this file. For example, we wanted to change the background and font color to match our demo website.

Tables can't be imported directly. Please insert an image of your table which can be found here.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151                

In this code, we have only changed background color at line 62, and added font color at line 150. If you are good with CSS, then feel free to change other style rules as well.

Once you are done, you can upload this file back to plugin’s CSS folder using FTP. You can now see your changes by visiting your website.

Important Note:

If you are using this in your own theme, then it’s better to use !important tags so the plugin updates wouldn’t override any changes.

For developers and consultants, you can also just rename the plugin and bundle it as part of your theme or services.

We only created this plugin because all other ways of writing this tutorial would’ve been too complicated for beginner users.