Archived topic

Double Search Form inside header and placeholder problem

15 replies · Started by Kathryn on April 13, 2021

Viewing posts 1–15 of 16

April 13, 2021 at 7:06 pm #1733365

Hello,

I have added the following PHP inside Snippets plugin, in order to customize search functionality:

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() {
    printf( // WPCS: XSS ok, sanitization ok. 
        '<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' ) );
} );

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search..." class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

My custom CSS for whole search:

.search-item .gp-icon svg {
     width: 1.3em;
     height: 1.3em;
     fill: #BD1E2E;
     stroke: #BD1E2E;
     stroke-width: 5;
}

.navigation-search.nav-search-active {
 max-width: 1140px;   
    margin: -10px auto 0 auto;
}
#site-navigation .menu-bar-items a[aria-label*="Close Search Bar"] {
  background-color: rgba(255, 255, 255, 0);

}

.navigation-search {
  padding: 0 0.5em;
    
}

.navigation-search input[type="search"] {
  height: 40px;
   margin: 2px;
  padding: 0px 20px;
}

 .main-navigation .menu-bar-item.search-item > a {
    padding-left: 0;
    padding-right: 0;
}

/* Placeholder */

.navigation-search input[type="search"]::placeholder {
    color: #000000;
    text-indent: 20px;
}

.navigation-search input[type="search"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000000;
    text-indent: 20px; 
}
.navigation-search input[type="search"]::-moz-placeholder { /* Firefox 19+ */
   color: #000000;
    text-indent: 20px;
}
.navigation-search input[type="search"]:-ms-input-placeholder { /* IE 10+ */
    color: #000000;
    text-indent: 20px;
}
.navigation-search input[type="search"]:-moz-placeholder { /* Firefox 18- */
   color: #000000;
    text-indent: 20px;
}

For some reason, I have 2 search forms inside header and it is messing with the style. Can you please tell me what is the problem? Since, when I click search icon, it activates input field, but for some reason, it displays placeholder over search text when I start typing and it doesn't disappear when I start typing. When I inspect, there are 2 forms and they overlap each other - i don't know how to solve this.

April 13, 2021 at 8:35 pm #1733406

Hi there,

Your PHP snippet filters generate_navigation_search_output twice here:

add_filter( 'generate_navigation_search_output', function() {
    printf( // WPCS: XSS ok, sanitization ok. 
        '<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' ) );
} );

and here:

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search..." class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

plus both the filters should be returning the changed output instead of directly doing printf.

Example:

add_filter( 'generate_navigation_search_output', function($output) {
    $output = printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search..." class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
    return $output;
} );

April 14, 2021 at 4:18 pm #1734637

Ok, so what should I do and keep all the functions I have before adding placeholder?

I could search terms, filter only by products and clear search input once the search has been done?

April 14, 2021 at 4:20 pm #1734640

Just to make them variables and return output?

April 14, 2021 at 4:30 pm #1734643

I don't know, i just took all the codes you provided in the documentation.

April 14, 2021 at 4:39 pm #1734647

Try keeping only this code:

add_filter( 'generate_navigation_search_output', function($output) {
    $output = printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search..." class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
    return $output;
} );

April 14, 2021 at 4:42 pm #1734652

it shows some number like in the search I sent in the private info

April 14, 2021 at 4:43 pm #1734655

In front of first menu item.

It also does not clear the field after the search has been performed.

April 14, 2021 at 4:48 pm #1734658

Did you mean the "Found 1 product" indicated here? https://share.getcloudapp.com/nOuol4No

If so, that's not added by the theme, that text string is being added by Elementor.
https://share.getcloudapp.com/5zuBAR1g

The theme doesn't control what page builder plugins do. If you want this removed, we recommend asking Elementor support on the best practice to remove it.

April 14, 2021 at 4:53 pm #1734663

No. I meant to the number 254 in front of the first menu item (e.g. Blog).

April 14, 2021 at 5:45 pm #1734711

Also, i need the search field to be cleared after the search has been performed. Maybe it has to do something with the snippet that was there for clearing the field, but you have told me to add only that one snippet. Since I don't have an idea what that number is and how is there.

April 14, 2021 at 6:08 pm #1734724

Ah yes my bad we're supposed to use sprint() for that.

Try this:

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="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
     return $output;
} );

April 14, 2021 at 7:09 pm #1734743

That solved the number issue, but the search term still stays in the search field after the search has been performed.

April 14, 2021 at 8:46 pm #1734789

Try this modification.

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;
} );

April 14, 2021 at 9:16 pm #1734802

Working good, thank you!

This archived topic is closed to new replies.

Start building better websites today.