[Support request] Search Box with input field and button

Home Forums Support [Support request] Search Box with input field and button

Home Forums Support Search Box with input field and button

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1740815
    Kathryn

    Hi there,

    Currently, search on my website shows only icon and when the icon is clicked, it activates the search functionality. I need complete search box to be displayed (input field with placeholder and search button with icon as “button text”).

    My current PHP for search:

    function search_filter($query) {
      if ( !is_admin() && $query->is_main_query() ) {
        if ($query->is_search) {
          $query->set('post_type', 'product');
        }
      }
    }
    
    add_action('pre_get_posts','search_filter'); 
    
    add_filter( 'generate_navigation_search_output', function($output) {
        $output = sprintf(
            '<form method="get" class="search-form navigation-search" action="%1$s">          
    			<input type="search" class="search-field" value="%2$s" name="s" title="%2$s">			
            </form>',
            esc_url( home_url( '/' ) ),
            esc_attr_x( 'Search', 'label', 'generatepress' ) 
        ); 
         return $output;
    } );
    #1740906
    Kathryn

    This is slightly modified code. Is it possible to make search box completely visible – input field with placeholder + search button (search icon as button text)?

    
    function search_filter($query) {
      if ( !is_admin() && $query->is_main_query() ) {
        if ($query->is_search) {
          $query->set('post_type', 'product');
        }
      }
    }
    
    add_action('pre_get_posts','search_filter'); 
    
    add_filter( 'generate_navigation_search_output', function($output) {
        $output = sprintf(
            '<form method="get" class="search-form navigation-search" action="%1$s">          
    			<input type="search" placeholder="Search..." class="search-field" value="" name="s" title="%2$s" />			
            </form>',
            esc_url( home_url( '/' ) ),
            esc_attr_x( 'Search', 'label', 'generatepress' ) 
        ); 
         return $output;
    } );
    
    #1741119
    Elvin
    Staff
    Customer Support

    Hi there,

    This is slightly modified code. Is it possible to make search box completely visible – input field with placeholder + search button (search icon as button text)?

    It’s definitely possible w/ a few tweaks on the code. But I can’t picture how you want it to look.

    Do you have any mockup image of how you want it to be laid out? Do you want to use any specific search icon?

    Let us know.

    #1741374
    Kathryn

    I want it to be always visible. I will style the box, just need input field (with placeholder) and search button (search icon as button and when clicked it searches the term) always visible – not only visible on click. So, the most basic search form with the same functionality.

    #1741375
    Kathryn

    Omg man, lifetime package and i need to wait 7 hours only to be asked something like this. Sorry, but this is frustrating.

    #1741413
    David
    Staff
    Customer Support

    Hi there,

    sorry if we have caused any frustration – we aim to answer all requests within 24hrs and sometimes we need to ask a few questions to fully understand the requirement.

    The simplest solution would be to NOT use the Navigation Search.

    Instead you can hook in the wp search form using a function like so:

    add_action('generate_menu_bar_items', function() {
      get_search_form();
    });

    Or you could use a Hook Element to add the function call.

    It will require some CSS to style – which we can help with if you require.

    #1741511
    Kathryn

    Thank you. I just need to clear out the search input field once the search has been completed.

    #1741984
    Kathryn

    Is this possible?

    #1742048
    Kathryn

    Solved it, never mind

    #1742694
    David
    Staff
    Customer Support

    Glad to hear you found the solution.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.