The WordPress block editor comes with a basic default search bar block, but as we’re also theme developers and while building a newer block theme, we realized we needed the ability to add a search that displays just as an icon in a header or footer, and when hovered over or clicked, only then let users do a site search.
As the default search doesn’t cater for displaying it only as an icon, we’ve decided to build our own, and give it a bunch more options while we’re at it.
Examples:
Search displayed as the 2 different icon options:
Drop Down Search (on hover)
Popup Search (on click)
Search displayed as a normal search bar:
Adding the Search block to your site
To add the search block to your page you can simply click the little plus icon to add a new block, then search for the Blockons Search Bar / Popup as shown here
OR, you can also click “Browse all” to open the left-hand sidebar and search there for the Search under the “Blockons Blocks” category.
Editing the Search Bar
The Blockons Search Bar offers 3 different types of searches to use:
Default Search:
The default search is similar to the search block you get from the WordPress editor, but it looks slightly better and is a lot more customizable. This is for if you like the normal search but are wanting to customize it to suits your website better.
Drop Down Search:
The dropdown search is designed more for using in the header or footer of your website, but you can really use it anywhere you like.
This search offers a simple search icon and when you hover over the icon, then the search bar will appear. You can position and customize this search as you like with all the settings provided.
Popup Search:
Also designed to be placed in the header or footer but this search icon can be used anywhere.
An icon is displayed and when a user clicks on the icon, an overlay popup is opened where the user can perform a site search, or close the overlay popup.
The Blockons Search Bar / Popup offers a range of settings to customize the search as you need it.
We’ll be working on this search a lot more soon and improving the functionality offered here.
If you think of features we could add to this block or simply need help using this block then please contact us to let us know.
