Docs

[Fotkyzadarmo]

Hello,

I would like to add button with the icon search next to the search field or be part of it. The button would trigger the search action.

Currently the user has to press enter key to search. I want also a button to do it. Could you do it for us?

Please add button on these places
1. On front page
2. In sidebar

Could you also provide code for others dealing with this in the future? Thank you.

[Fotkyzadarmo]

This reply has been marked as private.

[Jade]

Hi there,

Please try to add this code in the child theme’s fucntions.php:

/**
 * Generate custom search form
 *
 * @param string $form Form HTML.
 * @return string Modified form HTML.
*/

function wpdocs_my_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
    </div>
    </form>';
 
    return $form;
}

add_filter( 'get_search_form', 'wpdocs_my_search_form' );

Hope this helps.

[Fotkyzadarmo]

Thanks that worked. Any tip how to show icon instead of search text in the button?

[Rue Nel]

Hello There,

Thanks for the updates! Glad it works out for you.

To show an icon instead of the text, please have the code updated and make use of this code:

/**
 * Generate custom search form
 *
 * @param string $form Form HTML.
 * @return string Modified form HTML.
*/

function wpdocs_my_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. do_shortcode( '[x_icon type="search"]' ) .'" />
    </div>
    </form>';
 
    return $form;
}

add_filter( 'get_search_form', 'wpdocs_my_search_form' );

Please let us know if this works out for you.

[Fotkyzadarmo]

This somehow failed to render the icon.
I know the shortcode is right I checked it but it puts out i tag. Where is the problem then?

[Nabeel A]

Hi again,

Please add the following CSS code in your child theme’s style.css file:

#searchform>div:after {
    content: "\f002";
    display: inline-block;
    margin-left: -55px;
    position: relative;
    color: white;
    font-size: 25px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    top: -5px;
    padding: 0 26px;
}

#searchform>div {
    width: 105%;
}

And then replace the above code with this:

/**
 * Generate custom search form
 *
 * @param string $form Form HTML.
 * @return string Modified form HTML.
*/

function wpdocs_my_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="" />
    </div>
    </form>';
 
    return $form;
}

add_filter( 'get_search_form', 'wpdocs_my_search_form' );

Let us know how this goes!

[Fotkyzadarmo]

Hi there,

sorry for the late reply. Code works but just a little detail and it will be all good. Do you know how to get the icon to be part of the button so when user hovers button it will display cursor as clickable rather than text cursor? I know this can be done with css but it will not do anything on click. The working area for action to work is around the icon.

simply said icon acts as not part of the link.

[Rue Nel]

Hello There,

Thanks for updating in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[Author]

Posts