Placing AJAX search pro into header/nav bar

[atomheartBLACKParticipant]

Hi there guys.

Thank for such an awesome product!

I have a question. I would like to place your search bar into the NAV BAR of my x-theme wordpress site. How would I go about doing this?

Thank you.

[Ernest MarcinkoKeymaster]

Hi!

Thank you for the kind words!

There might be two ways:
1. If there are widgetized areas available in the site header, you can use the search widget there. I’m using an older version of the X theme on this site, and I think there are available wiget areas in the header, but I’m not sure about the exact placements.

2. If no widgetized areas are in the header then I think the only way of doing it is to manually place the PHP shortcode to the corresponding .php file. I’m not sure how comfortable are you with editing theme files, but I rather suggest asking the theme author about which files to edit.
There is a short chapter about search shortcodes in themes in the documentation, but honestly there is no exact guide that works with each theme, because each one is very different from the others.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[atomheartBLACKParticipant]

Hi there,

Thanks for the reply!

Here is the code I used in the functions.php:

add_filter('wp_nav_menu_items','x_add_search_to_navbar',10,2);
function x_add_search_to_navbar( $items_html, $args ) {
  //If menu class has x-nav, but this isnt the footer
  if ( isset($args->menu_class) && strpos($args->menu_class, 'x-nav') !== false &&
     ( ! ( isset($args->theme_location) && 'footer' == $args->theme_location ) ) ) {

    ob_start();
    get_search_form();
    $items_html .= '<li>' . ob_get_clean() . '</li>';
  }
  return $items_html;
}

I am not too sure where to place the .php shortcode for the AJAX search.

Can you please help

Thanks

[Ernest MarcinkoKeymaster]

Hi!

Based on the code I would try replacing the get_search_form(); line.

So instead of

ob_start();
get_search_form();
$items_html .= '<li>' . ob_get_clean() . '</li>';

try:

ob_start();
echo do_shortcode('[wpdreams_ajaxsearchpro id=0]');
$items_html .= '<li>' . ob_get_clean() . '</li>';

Don’t forget to replace the ID of the search instance you want to use.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[atomheartBLACKParticipant]

Thank you! It worked.

The only thing is the search bar doesn’t function correctly. The drop down menu pops up at will and the search results does not work either, can’t search anything on the website. There is also a second scroll bar that appears on the opposite corner of the website.

Any idea why?

Thank you

[Ernest MarcinkoKeymaster]

Most likely because the menu is javascript powered as well. Combining two complicated elements might result in things like this.

Do you have a sample page where I can look at this issue? I might be able to tell if there is anything to do to fix it.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[atomheartBLACKParticipant]

No worries. Have decided to not use the search in the Nav bar, but rather in the body.

Thanks for all your help anyways 🙂

Cheers

[Author]

Posts