invoke the search widget from a navmenu button in wordpress theme twentythirteen

[jevans17]

Preamble:
you might say this is a problem for wordpress.org forums – yes I have posted the problem there but people are obviously too busy to help me – I can’t blame them for that.
Essentially the problem is this:
want to invoke the search from a menu item
I do not know how to achieve this.
I need to remove the current simple search item and invoke it from a menu item. This would allow me to place the search wherever I wanted it along the navbar menu.
This does not look like an easy problem and may be too much to ask but if someone could could give me some pointers as to what to do I may be able to take a crack at it. I want to make SEARCH a part of my “pretty” navbar menu setup.
I cannot easily link you to my site as it is a XAMPP site setup.

addendum,
Further elucidation…
In the twentythirteen child style.css file, I have created a special class to create a button menu item.
I then created a custom class menu item and called this button class. I labelled it “Search”
I now Have seven nice buttons in a row across my navigation menu.(one of which is called “Search”. It does nothing of course.
I want it to invoke the simple search supplied with this theme.
But HOW?
I cannot see how to begin

please help ( a bit at least) :)
please ask for elucidation if you need it

THANKS for reading

[amanda_]

Hi,

I don’t use child themes at all, and I’m aware they can lead to all types of messes if you do too much messing around with them, so use cation. I would probably do some sort of dirty hack for this using jQuery – like maybe detach(); and then reinsert elsewhere… or maybe utilize flexbox ordering some way.

I’m fairly certain that’s not a correct way of doing that, but when people insist on certain things…. I’m not above getting a little creative.

If you are comfortable in functions.php, that is where you’d work on your menu. I have never put a search into a menu, but I’m sure there’s a way, you’re not the first person to want this.

Do you know the function reference for putting search box in theme??

<?php get_search_form(); ?>

[Senff]

What do you mean by this exactly, esp. “invoke a search”? You want the search form (input field + button) in the main navigation? Or do you want a link in your menu (called “Search” or something) that opens a popup or new page with the search form on it?

Either way, you can place the search form anywhere on your site by adding this code to any template:

<?php 
   get_search_form(); 
?>

EDIT: looks like Amanda beat me to it :)

[Senff]

I don’t use child themes at all, and I’m aware they can lead to all types of messes if you do too much messing around with them, so use cation.

Noooooo! You definitely should use Child Themes! Never hack around in any original theme, cause that will cause a mess. :)

[amanda_]

I mean, I write my own themes, from Underscore – which was created for this purpose.

[jevans17]

Thank you Senff and Amanda for replying so promptly.

What I’ve done so far:
I created a menu item using a custom link
in the navigation label box I put “<button class=”navbtnhome”>Search</button>”
saved it of course and added it to my navigation menu.

In style.css (in my child theme)
I created a class

.navbtnhome {
background-color: green;
color: black;
border-color: none;
border-radius: 10px;
padding: 3px 10px 3px 10px;
margin-top: 2px;
}

.navbtnhome:hover {
background-color: white;
color: black;
border-color: none;
/border-radius: 10px;/
padding: 3px 10px 3px 10px;
}

NOW: i have a nice menu button that at present does nothing:
I want
(Senff had it about right)
A search box to appear when my new search menu button is pressed.

I do not know how to do this.

Thanks for the help so far

[jevans17]

Good Morning all,

My last entry was done very late at night (brain more befuddled than usual)
I forgot to say I understood about

<?php
get_search_form();
?>

BUT how do I assign this to my menu button?

which template file should I use?

thanks

[amanda_]

Where do you want your search button to appear?

[Senff]

I’d say you shouldn’t put it in the menu itself, but next to it, and then style it so that it looks like it’s part of the menu.

It seems that in TwentyThirteen, the search box is already right next to the navigation by default:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php get_search_form(); ?>

So, I don’t think you need to do much about that, and it just comes down to styling it properly. Try adding some CSS like this:

div.nav-menu > ul {
   float:left;
}

.site-header form.search-form {
   position: static;
}

[jevans17]

I feel so ungrateful but I am really not. Thanks so much for trying to help me.
I know the search is already beside the nav bar but I do not want that. I want it removed and extend the navigation menu across the whole screen.
I already have a SEARCH menu button which at the moment does nothing. I want it to activate the search supplied by this theme.

This will then give me design and aesthetic control of the Search menu button so that I can place it anywhere in my menu system. The search could then open in a white box for instance.

In my simple mind I suppose I want to invoke the search widget by pressing a menu button.

I respect both your views but this is what I want to do. Is it possible?

I may be asking the impossible inside twentythirteen, I do not know.

Can you help please?

best regards

[Senff]

Anything is possible but to me it’s just unclear what you want.

You can have a search button anywhere you like, but you really need an input field as well — how else will you tell the system what you’re actually searching for?

So the way I understand it now, you want to have a search form (= input field + search button) but it shouldn’t be visible initially.
In the menu, you want to have a link (or button) that says “SEARCH” and when you click that, it should make that search form appear.

Is that correct?

[jevans17]

Sorry i’ve been away –

senff/amanda,

What I want,

I have at present a i have a custom link button in my nav menu labelled “Search” – this button is linked to nothing ( may have created it prematurely ?)

anyway i want In the menu, you want to have a link (or button) that says “SEARCH” and when you click that, it should make that search form appear. preferably directly underneath.

I may be asking too much – it looks more complicated than I thought. I’m unable to see how to do it myself.

If i’m asking for too much help PLEASE say so.

best regards

John

[rkieru]

I wonder if this article might address what you are trying to accomplish?

[amanda_]

You could do that by adding div with a style display:none and then use the jQuery slide down onclick. Style the div how you’d like it look before you make it display none, then add the display none, then the small line of jQuery.

[jevans17]

Thanks to All,

I have decided to take some earlier advice and leave the current search as is. I am not capable of understanding the options you have presented to me. That is my fault not yours.
I am going to go back and review my plans

THANKS VERY MUCH for all your efforts

Please don’t think you have wasted your time, I have learnt a lot from this topic

Best regards

John

[Author]

Posts