Add Search Box to Header

[Shannon]

Hi,

I saw a previous post on this, but it wasn’t resolved from what I could tell.

I’d like to have a website-only (not Google) search bar in my header. I have my logo on the left, so I’d like it on the right side, sitting above the navigation bar. I’d like to be able to put a few words inside the search box as prompts for items to search for such as “member, group, forum”.

I may have to fiddle with positioning I suppose, but if you could tell me the code and where to put it I’d appreciate it.

[Alyssa]

@flick-chicks unfortunately a sitewide search does not exist. This problem remains unsolved in the community.

[Anita]

I was looking for something similar for another purpose. If we can add a widget area to the header area then the default WP Search bar could be dragged into that space. Can you help us to add a new widget area to the header?

[Alyssa]

@cre8tivediva I’ll have to submit this to the devs.

[Anita]

Ok, I might try messing with it tomorrow. Again, I come from working with a Framework for a few years. I gotta get back to traditional theming 🙂

[Anita]

I decided to give it a try. I got it up there – http://awesomescreenshot.com/07c3p1l1ef. I just need to code the responsive CSS for it but I’ll do it tomorrow. Let me know if it’s okay to post the instructions on how I did it.

[Shannon]

@cre8tivediva That search bar looks great. I am thinking however that maybe in the header is not such a good idea because the search bar would be lost in the responsive smartphone layouts. Hmm. Going to have to think on this some more.
Thanks for your comments

[Anita]

I beg to differ. It’s all a matter of coding the new widget area in the media queries which is what I am planning on doing. Anything can be coded in the media queries. Things can be turned on and off. The widget works beautifully in that area now. I have a 728 x 90 banner there.

[Anita]

So… here is the screenshot of the header right widget with an ad, along with the search box added to the Navigation – http://awesomescreenshot.com/0763pbg88f.

Here is a screenshot on 320 mobile with the search box showing up and useable – http://awesomescreenshot.com/0693pbg7b8.

[Alyssa]

Post away @cre8tivediva

[Jessica]

And the instructions are…. ?

[Shannon]

@cre8tivediva your screenshots looks great. I want to put a banner ad in my header. It would be awesome if you could post your instructions. Thanks!