Show search box in navigation?

Hi there,

you can use a Hook Element to add your search function:

https://docs.generatepress.com/article/hooks-element-overview/

The hook to place it there is the inside_navigation hook

Thanks David. Can you elaborate on its function when the option "Enable navigation search is enabled" as well as its configuration?

The method David described is separate from the Navigation Search option, so you would keep that turned off.

Then you can insert and style a static search box directly into the navigation.

Hi Tom,

Which option should be used to achieve the outcome?

I would do the following:

1. Disable the Navigation search.
2. Create new Hook Element - selecting the inside_navigation hook. Add the code provided here to generate the form:

https://developer.wordpress.org/reference/functions/get_search_form/#comment-367

3. Set Display Rules to entire site.

This will place the form inside the same container as the Navigation. It will require some CSS to position - which we can help with but will need to know what layout you're using e.g Navigation as Header.

Thanks David. The code doesn't render correctly. See https://imgur.com/a/24UARub

Aah my apologies - edit the Hook element and check the Execute PHP option.

Hi David,

That required the following line of code to be commented which is undesirable.

define('DISALLOW_FILE_EDIT',true);

What other options are there without needing to comment out the code below?

Couple of options:

1. Use this filter to allow PHP to be executed in Hooks only:
https://docs.generatepress.com/article/generate_hooks_execute_php/

2. Use a function in your functions.php

https://docs.generatepress.com/article/using-hooks/

So your code would be something like this:

add_action( 'generate_inside_navigation','tr_navigation_search' );  

function tr_navigation_search() { ?> 
    <form role="search" method="get" id="searchform"
    class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <div>
        <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
        <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
        <input type="submit" id="searchsubmit"
            value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
    </div>
</form>
<?php }

Thanks David.

The recommendation for the first option is that it remains disabled.

How is the second option different?

Hi there,

The second option is just custom PHP - it's what the Hook Element writes for you. The result is the same as using a Hook Element, but it doesn't require you to turn on file editing.

Thanks for the clarification Tom.

What's the recommended change for the search box and submit button to appear where the search magnifying glass appears when it is enabled in the navigation i.e. to replace the magnifying glass with the search box and submit button?

That's what the code should do, we'll just need to style it with CSS once it's added.

Sorry, I should have been clearer.

The search box and submit button now works. What is the recommended CSS style so that it appears in the same location as the magnifying glass as it's part of a list at the moment?

This is the basis of the CSS:

.inside-navigation {
    display: flex;
}

.inside-navigation form {
    order: 5;
}