[Resolved] Viewing search bar input and results on new page

[Author]

Posts

[catrionaD]

Having a couple issues here.

I want to give users the option to either search posts by content or browse by category and/or sub-category. hidden link

Users enter their search criteria then click “Go”(or ‘submit’) and be taken to a new page “/results” to be shown the results. hidden link

On the results page, it should list posts as programmed in the template. I also want to add some filter options here (I haven’t attempted this yet)

Right now, the issues I am having are:
1. When users enter text in search bar, the text isn’t showing. It’s as if it’s not registering.
2. When users click “Go” they aren’t taken to the results page.

Please help.

[Shane]

Hi Catriona,

Thank you for getting in touch.

Could you provide me with admin access to the site to check on this for you ?

Right now it seems that the search is not working at all.

Thanks,
Shane

[Shane]

Hi Catriona,

Thank you for the credentials.

I tried to log in but the login page is giving me a too much redirects error.

Could you try and let me know if you were able to log in on your end.

Thanks,
Shane

[catrionaD]

Hi Shane, do you mean logging into wp-admin? I'm logged in ok.

[catrionaD]

Sometimes when I log into wp-admin it doesn't take me to the dashboard. The screen just kind of freezes.
But as long as I've entered the credentials, when I next go to hidden link I'm logged in as admin, and can access dashboard from there.
Does this help?

[Shane]

Hi Catriona,

This should be working now.

The issue was that you added the filters but they weren't link to the results page.

I went ahead and did this for you. This was done by using the Elementor widget for views and setting the results page.

See Screenshot.

[catrionaD]

Thanks Shane!

It seems the filter function isn't quite working right - it displays all results. Is there a way to fix this?

And how can I show both the search bar and filter at the top of the results page?

With CSS, if you can share any hints or tips on how to:
- make default "search all listings" text the same font family, font size and font color as the dropdowns
- bring "Go" search buttons inline with the search bar and bottom filter
I understand if this last CSS bit might be outside your remit, so no worries if you're unable to help with this. Worth a shot!

Thanks a lot,
Cat

[Shane]

Hi Catriona,

I was able to go in and get this working for you now.

I'm still working on getting them aligned correctly but please let me know if everything works fine now.

Thanks,
Shane

[Shane]

" make default "search all listings" text the same font family, font size and font color as the dropdowns"

I believe with this is that it is rendering using the default css that your browser uses.

[catrionaD]

Thanks Shane, the search is working perfectly now.

Is there a way to make the search and filter fonts same family, size and color? Perhaps using a different font-family? I'm not sure how to work around browser default CSS?

Really appreciate your help here, thanks

[Shane]

Hi Catriona,

You are referring to the fonts inside the dropdown correct?

It is possible to do with CSS. I would suggest taking a read through here
hidden link

This should be able to assist you with changing the fonts.

Thanks,
Shane

[catrionaD]

Hi Shane,

I don't mind the drop-down menus being different for the time being.

It's more about making the holding text in the search bar "Search all listings" consistent with "- Select Category" and "- Select Sub-Category". Do you know how I might do that?

Thanks,
Catriona

[Shane]

Hi Catriona,

I did some research on this and it seems that it would take some custom JS to achieve this.

You are referring to when the user clicks the select dropdown and presented with the list to select from.

This is definitely requiring some JS to achieve which is out of our forum scope.

However I was able to find this example here.
hidden link

Thanks,
Shane

[catrionaD]

Thanks Shane, I've just put in a wee workaround by changing the font colour. So it's looking much better.
Do you know where I can find guidance to bring the search buttons closer to the search fields?
Thanks, Cat

[Shane]

Hi Catriona,

You can actually adjust the margins 🙂

In the views you will notice that I added the "Go" buttons to a div with the class "col-sm-2". What you can do is to add an additional class to the divs or add an id and then adjust the margins.

So an example would be.

.classname{
margin-left: -10%;
}

This should bring the search button closer.

Please let me know if this helps.
Thanks,
Shane