Back to Documentation

Search Bar or Search Icon block

A much more customizable search bar block for your website. Select from a default search bar, an icon with a search drop down or a search popup.

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.


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

Blockons Search Bar / Popup
Blockons Search Bar / Popup

OR, you can also click “Browse all” to open the left-hand sidebar and search there for the Search under the “Blockons Blocks” category.

Blockons Blocks - Search Bar / Popup
Blockons Blocks – Search Bar / Popup

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.

Default Search Bar
Default Search Bar

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.

Search Icon with hover over search bar
Search icon with hover over search

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.

Search icon with popup Search Bar
Search icon with popup Search

The Blockons Search Bar / Popup offers a range of settings to customize the search as you need it.

Search Bar / Popup Settings
Search Bar / Popup Settings

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.