How to Make a Search Bar?

What’s the easiest way to make a search bar in Cwicly? I want an empty input field with a submit button next to it. Then when you click the button, it submits the search query and loads the results in the next page.

I spent several hours trying to make a search bar using the Query and Input blocks, but no matter how I clicked around in the Query settings, I couldn’t make a basic text input field with a submit button next to it. In the end I resorted to using Gutenberg’s generic Search block, which feels like a blight on my otherwise 100% Cwicly-built site.

Using an Input block by itself didn’t work, because I couldn’t select an input type in the dropdown. I read on another post here about how you have to nest your Input block in a Div block, which is nested inside a Query Template block, and then inside a Query Block, but that didn’t work for me, as I still wasn’t able to select an input type in the dropdown, and it kept repeating the Input block. Then, no matter how many times I selected Search in the Query block settings, it would reset itself to the default settings after closing.

I sought an answer in the Cwicly LIbrary where I saw the pre-built comment design layouts, but those were designed for comments, not search, and there is no equivalent for a search bar. I attempted to change the Query settings around to make it be a search bar, but that didn’t work for me either.

To conclude, how can I add a site-wide search bar to my site in Cwicly?

Does the Cwicly staff plan on making a Cwicly Search block to replace the Gutenberg one, so it’s a one-click install? Or can you add a simple pre-built Search Bar to the Design Library?

Thank you.

1 Like

Interested in seeing the answer as well.

1 Like


A search block would be of course very welcome!

In the meantime, I just managed to make one from scratch, inspecting the Gutenberg block.
It seems to do the trick :slight_smile:
Just setup your search results template and you’re done!


So here is my setup:


- div (change tag to form and add attributes below)
-- button (icon and no text, change tag to button and add attributes below)
-- input (add attributes below)

Form attributes:

Button attributes:

Input attributes:



Can you show me what the result is?
Could we use this to link to a search page with filters? Like how you might enter search/filter parameters on a homepage for a real estate listing site, and then get taken to the search page with the chosen filters.

Interesting solution. I had never tried using Cwicly’s advanced attributes section. By following your guide I was able to reproduce your results.

Prior to your guide, I used the Gutenberg block and modified it to appear in a modal pop-up window after clicking the search icon in the main nav.

The end result of your block and my block are the same, in that it loads the search results in the next page, and the URL changes to add /?s=test or whatever term you searched for.

I prefer to have a Cwicly-made block. So, now it’s a question of figuring out how to style your version to look like my version, which I’ll begin doing now.

To owynter, this is a standard search field that you can find on any WordPress site. You put in a term and it searches your site for it. I’m not sure if it can do what you’re asking for, but there might be a guide out there, unrelated to Cwicly, that shows how to do such a thing with the search field.

Theoretically… if all you’re doing is adding the url parameter, then you should be able to structure that to match the meta queries on a page with a query + filter.

I’ll probably give it a go over the weekend.


Well the search input is like my screenshot above, and the result page is like that (standard /?=text WP search URL generated by default search template with default query and simple query template including post title):

I actually transformed the input to button/modal yesterday because it was easier to deal with responsive header :wink:

As for linking to a more complex results page with filters, there are different ways to do it.

One common way for me seems to be using a similar form with multiple inputs which convert to parameters in result page URL, then on this page you need to get the URL parameters to feed the query.

Haven’t played with Cwicly filters yet so I can’t tell about a Cwicly dedicated solution.

Well I actually moved to button/modal like you for responsive purpose :wink:

There is really not styling, just a div including input and icon button.

You nailed it :muscle:
I don’t actually use filters for now, but with inputs it works like a charm, mapping the generated URL parameters with the query meta :slight_smile:

I added a ‘Search Bar - Horizontal’ to my Cwicly Cloud Library and submitted it to the Community. It looks like the one in my picture above, with a Div containing an Input and search Button. It’s based on your guide, so the advanced attributes and tags are preset. Just click and go.

It’s my first time doing this and I don’t know if it worked right, or has to be approved. Once (and if) approved, you can search for it in the Community tag of the Library button at the top left of the Editor, under All.

You can also add it using my public key: jDE3gFpa0N82bWSschGT by following the Docs: Cloud Design Library - Documentation


Thank you for this advice!

I’d used it to create a search for WooCommerce products.
For a WooCommerce search, an additional hidden input is required in the form div.

This selected input has its visibility hidden.

And it needs these attributes.

Has anybody connected this to the filter-block and query-block so it can be used with the query and filter-blocks ?

Desired outcome is to put a search term in the input-box and then the results page (or modal pop-up) has some filters that the resut can be filtered by - with or without a preset query so we can control what content is being searched and can be filtered ?

Thanks for sharing this solution @yankiara.

There is just one thing I’m wondering how to achieve. Once you are on the search results page usually there is again a search field with the current search term in it. So the visitor can modify the search term and also sees what he initially searched for.

Does someone know if I can modify the Cwicly input field to contain the current search term?

In this screenshot you see the WP Search Block with the current search term and below the Cwicly input field that is empty.

@Jonas, No problem.

Just create a function similar to this:

function url_parameter($key) {
	$url_param_value = $_GET[$key];
	return htmlspecialchars($url_param_value);

Then load it dynamically in the default value:


Hi @StrangeTech,

awesome! That works :champagne:
Thanks a lot! :slight_smile:

how does one go about creating the search results page? consider me a total amateur.

i’ve gotten so far as to use the original Wordpress ‘search’ block, and it returns me to a themed search page but i don’t know how to correctly display the found pages in a grid or something?

Hi @boris,

for this you need to go to the themer and create a new template: Themer > + Default > New Template > Search results

Here you place a query that is set to “Inherit Query from URL”. After publishing the template it will be used as your search results template.

1 Like

amazing. I’ve managed to do that.

But would anyone know how to show a text excerpt of the part where the search term is found on a given post/page?

would be great if i could show it below the title of the page on which the search term is found

and also: does anyone know how to show a fallback text saying ‘nothing found’ if the query doesn’t input any post/page?

This is not possible I guess

For this you place a Paragraph inside the Query Block and set the Visibility Conditions to “Has items > false”
This way the message “No items found” only appears when the query is empty.

1 Like

I just added your repository, and it has no items in it. Did the search bar get removed somehow?