Simple blog post title search icon

Hey,

I’d strongly recommend doing this in a child theme (https://codex.www.ads-software.com/Child_Themes) and testing modifications on a staging/test environment before moving those changes to your live site.

That being said, here you can use a WordPress filter to add a search item to the end of your menu. With a bit of styling you can make it look the same as the default search (this is shown in the mobile menu on your site).

I have thrown together a child theme for your current theme which includes the search in the menu. It may need adjustments depending on your requirements but the jist should be there. This is assuming that you have setup your menu (Appearance->Menus) as the “Primary Menu” as the display location.

[ Redacted ]

Hope this helps!
Joey

• This reply was modified 6 years, 10 months ago by Joey. Reason: Wrong link!

Hey,

Apologies but I added the wrong link for the file download! This has now been updated.

Regards,
Joey

Thanks for your very quick reply!

Also for taking the time to put it together. I’ll give it a try…

but so no simple WP plugin that will work for that then?

Thanks again!
Ann

it says i need to “request access” which i did…

There will be plugins available but there isn’t likely to be a plugin that can add a search that will be styled as per your theme (there are thousands of themes and it’d be impossible to support them all unless all search items were given the same classes etc for styling). So a certain level of customisation is required.

Due to this being an issue with layout a child theme is preferable to a custom plugin.

Yeah, on the access request I realised it was the wrong link. Try the link now and I’ll accept access and you can download ??

Sorry about that

@leglesslizard Don’t use Google links that require access requests here. I’ve redacted your link.

If you want to help people then walk them through creating the files themselves. People do not learn when you just do it for them.

Also, thanks for the great support but please lose the signature. That’s prohibited in these forums as it’s been horribly abused in the past by others.

Yes, bad people ruin it for others. Please refrain from that.

https://www.ads-software.com/support/guidelines/#avoid-signatures

Yes, I mean this part.

Regards,
Joey

Apologies for both Jan I didn’t realise, thanks for pointing it out!

To Ann:
It seems I jumped the gun with providing the links so I’ll break down how I’d go about solving your issue ?? you need to filter your current menu to include a list item that contains a search bar. This can be done using the filter “wp_nav_menu_items“. This allows you to alter the output for your navigation menus by stating the menu location (called “theme_location” in the arguments), of which your theme currently only supplies the “primary” menu.
So the code required would look as follows:

// Add search to menu
add_filter( 'wp_nav_menu_items', 'add_search_form', 10, 2 );
function add_search_form($items, $args) {
  if( $args->theme_location == 'primary' )
    $items .= '<li class="search">
      <form method="get" class="searchform" action="' . home_url() . '">
        <input type="search" value="" placeholder="Search" name="s" id="s">
	<input type="submit" id="searchsubmit" value="Search">
      </form>
    </li>';
    return $items;
}

Here we are hooking into the appropriate filter (read more about filters here), checking we are on the “primary” menu and adding some custom HTML to the $items variable. This custom HTML includes a basic search form with a search input field and a submit button (as used by WordPress). This can be added to your theme’s functions.php file.

This alone will add the required element but it will not automatically adopt the styles of your theme. These will need to be added to your style.css (this file handles how elements on your page look) similar to the following:

/* SEARCH MENU ITEM */
.blog-menu .search {
    float: right;
    position: relative;
    top: 13px;
}

.blog-menu .search::before {
    content: '';
}

.blog-menu input[type="search"] {
    -webkit-appearance: none;
    width: 99%;
    padding: 18px 95px 18px 18px;
    background: #FFF;
    border: 1px solid #DDD;
    border-right: none;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    border-radius: 3px 0 0 3px;
    height: 40px;
}

.blog-menu input[type="submit"] {
    -webkit-appearance: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 85px;
    line-height: 1;
    background: #4267b2;
    border: 1px solid #4267b2;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    font-family: 'Lato', sans-serif;
    border-radius: 0 3px 3px 0;
    height: 40px;
}

.mobile-menu .search {
    display: none;
}
/* SEARCH MENU ITEM END */

So here we’re using “float” to move the search bar over to the right hand side of our menu bar and positioning it in the middle vertically, overriding the default ‘/’ that is placed before each menu item using “content” and copying over the theme’s styles for the default search bar by adding our css selectors (.blog-menu input[type=”search”] and .blog-menu input[type=”submit”]).

The last bit of code hides out custom search bar when on the mobile menu as one is provided by default in your theme.

All of this can be placed in your theme and will work BUT if you update your theme the changes will be overwritten. I’d strongly suggest creating a child theme (read more here) to avoid this from happening. Child theme’s exist to extend the functionality of your theme, overwriting any behaviour you require but the changes are not lost when your main theme is updated.

I hope this helps ??

*Reads*

Much thanks for the great detailed reply, Joey! ??

Joey… thank you very much for going through such a long and helpful instructional post to direct me. I will certainly read through it and evaluate what i feel i am able to do. I appreciate the time you spend writing this up for me.
Blessings!
Ann