Ajax Search Pro Menu Focus Conflict

[Chas]

I’m using the Ajax Search Pro plugin to add a website search form to the menu of my GeneratePress themed site, but the search form appears to have a conflict with GeneratePress that doesn’t allow the form to get focus when the user clicks on it. The developer of the plugin determined that the cause is a conflict with a script that’s most likely generated by the theme, although he couldn’t pinpoint which script specifically. He said the developers of the theme would be able to spot it quickly. Can you help me diagnose where this conflict is coming from, and how I might resolve it?

To see the problem in action, I’ve given admins the URL of the site in a development environment. Notice that the same search form appears twice on the home page: once in the menu and once in the middle of the page. The one in the middle of the page works fine. The one in the menu doesn’t gain focus when the user clicks, so can’t work. (This is the core problem.)

Any help would be appreciated. Thanks.

[Tom]

Hi there,

I’m not seeing anything obvious.

Is it possible to hook the search into the navigation without adding it as a menu item? If there’s a function we can reference to output the search, I can help with the hook itself.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chas]

Yes, it is possible to hook the search form into the nav. Here’s a doc on the exact code snippet that does it: https://documentation.ajaxsearchpro.com/getting-started/placing-the-search-shortcode-in-theme-files

Looks pretty simple.

Which PHP file (and roughly where in the file) would I put the snippet to get the search bar to appear just to the right of the website title and the left of the menu? (I use the menu as header option.) Thanks for any info.

[Tom]

You could try this:

add_action( 'generate_inside_navigation', function() {
    echo '<div class="ajax-nav-search">';
        echo do_shortcode( '[wpdreams_ajaxsearchpro id=1]' );
    echo '</div>';
} );

Then you might need some CSS to tweak the positioning.

Let me know if it fixes the issue or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chas]

Sorry, I’m not a php guy. Which php file should this go in?

[David]

Hi there,

this article explains:

https://docs.generatepress.com/article/adding-php/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chas]

Got it added, but it’s now located as the first thing on the page–before the “Site Identity” rather than in between Site Identity and primary navigation menu. How can I control the placement of the search bar?

[Chas]

Specifically, if I could place the search bar to the right of the site identity, rather than to the left of it, that would be perfect. Is there some other action I need to add to other than generate_inside_navigation that would place the search bar AFTER the site icon & name rather than BEFORE it? Thanks.

[Tom]

Give this CSS a shot:

.ajax-nav-search {
    order: 1;
    margin-right: auto;
}

.navigation-branding {
    margin-right: 0;
}

#ajaxsearchpro1_1 {
    margin-top: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chas]

Worked perfectly, thanks!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts