[MBParticipant]

Hi,

We would like to replace the placeholder text in the sidebar search widget to “Search this website” vs “Search”.

Thanks, MB
https://mbguiding.ca/

[Rue NelModerator]

Hello There,

Thanks for writing in! To modify the search widget, you can hook into the ‘get_search_form’ action hook ( check out the “last option” part of the link below ). Set the priority high enough to override anything created in a theme.

function 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', 'my_search_form', 100 );

You can check out the codex here: https://developer.wordpress.org/reference/functions/get_search_form/#Theme_Form

Hope this helps.

[MBParticipant]

Ok, so there’s no way to easily change the placeholder text “Search” to “Search this website” in sidebar search widget on blog: https://mbguiding.ca/trip-reports/

Alternatively, is there a way to use the search trigger thats in primary menu nav in the sidebar?

Thanks, MB
https://mbguiding.ca/

[JoaoModerator]

Hi There,

Please try adding the following code to Appereance > customizer > custom > CSS

input#s.search-query {
 text-indent: -9999px !important;
 line-height: 0 !important; 
}

input#s.search-query:before {
  content:"Search this Website";
  display: block;
 text-indent: 0px;
 
}

Let us know how it goes,

Joao

[MBParticipant]

That created an empty field.

[ThaiModerator]

Hi There,

Please add the following code under Customizer > Custom > Global Javascript:

(function($){
	$("input#s").attr('placeholder', 'Search this website');
})(jQuery);

Hope it helps 🙂

[MBParticipant]

[RESOLVED] Thank you! Curious what the advantage of using the Javascript was over the CSS and PHP codes you advised previously?

[Nabeel AModerator]

Hi again,

Glad we could help. JavaScript is easier than PHP and sometimes using JavaScript is better than PHP to achieve the same goal.

Hope this helps!

[MBParticipant]

Thanks for the clarification. Is there a performance advantage or disadvantage in using JavaScript over PHP?

[DarshanaModerator]

Hi there,

JavaScript is processing in the client’s side (desktop browser/ mobile device browser) while PHP needs to process in the server and output to the browser.

So performance wise, Javascript will be faster.

Thanks!

[Author]

Posts