[Resolved] Show search box in navigation?

Home Forums Support [Resolved] Show search box in navigation?

Home Forums Support Show search box in navigation?

Viewing 15 posts - 16 through 30 (of 38 total)
  • Author
    Posts
  • #1236353
    David
    Staff
    Customer Support

    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

    #1236524
    Anonymous

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

    #1236764
    Tom
    Lead Developer
    Lead Developer

    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.

    #1238060
    Anonymous

    Hi Tom,

    Which option should be used to achieve the outcome?

    #1238304
    David
    Staff
    Customer Support

    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.

    #1239113
    Anonymous

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

    #1239282
    David
    Staff
    Customer Support

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

    #1239452
    Anonymous

    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?

    #1239652
    David
    Staff
    Customer Support

    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 }
    #1240545
    Anonymous

    Thanks David.

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

    How is the second option different?

    #1240919
    Tom
    Lead Developer
    Lead Developer

    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.

    #1241040
    Anonymous

    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?

    #1241834
    Tom
    Lead Developer
    Lead Developer

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

    #1242020
    Anonymous

    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?

    #1242225
    David
    Staff
    Customer Support

    This is the basis of the CSS:

    .inside-navigation {
        display: flex;
    }
    
    .inside-navigation form {
        order: 5;
    }
Viewing 15 posts - 16 through 30 (of 38 total)
  • You must be logged in to reply to this topic.