Return to Support

Change Placeholder Text in Searchbox

Home Forums Graphene WordPress theme Support Change Placeholder Text in Searchbox

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #8775
    Sharon
    Member

    Hi all,

    Apologies for this, I can see another thread addressing the same issue but unfortunately the solution didn’t work for me, evidently I’m doing something incorrectly.

    I am attempting to change the placeholder text in my search box to “‘Search by Ingredient, Recipe Name or Category'”. I have used some code that Prasanna provided

    <?php
    function graphene_filter_gettext( $translated, $original, $domain ) {
    $strings = array(
    'Search' => 'Search by Ingredient, Recipe Name or Category',
    );
    if ( ! empty( $strings[$original] ) ) {
    $translations = &get_translations_for_domain( $domain );
    $translated = $translations->translate( $strings[$original] );
    }
    return $translated;
    }
    add_filter( 'gettext', 'graphene_filter_gettext', 10, 3 ); ?>

    I’ve read both of the related threads as directed by Syahir (as well as a number of articles found on Google) . I’m hoping you may be able to tell me what I’m doing wrong.

    Regards,

    Sharon

    #42142
    Luko
    Member

    If you use that code it will replace the “Search” text on button also. The method above is usable in menu search-box, but when you use search widget it’s slightly different.

    Maybe is better to modify the code in searchform.php. Create new php file and upload it to your child-theme folder, name it searchform.php and put this code in it:

    <form id="searchform" class="searchform" method="get" action="<?php echo get_home_url(); ?>">
    <p class="clearfix default_searchform">
    <input type="text" name="s"
    onblur="if (this.value == '') {this.value = '<?php _e('Search','graphene'); ?>';}"
    onfocus="if (this.value == '<?php _e('Search','graphene'); ?>') {this.value = '';}"
    value="<?php if ( $term = get_search_query() ) echo esc_attr( $term ); else _e( 'Search by Ingredient, Recipe Name or Category', 'graphene' ); ?>" />
    <button type="submit"><span><?php _e('Search', 'graphene'); ?></span></button>
    </p>
    <?php do_action('graphene_search_form'); ?>
    </form>

    #42143
    Sharon
    Member

    Hi Luko,

    Thank you for responding, this has worked a treat and the text has changed.

    There’s a follow on problem that I had not anticipated and now the text does not disappear when I click in the search box. Is there a way to make the text automatically disappear when someone clicks in the searchbox?

    Cheers,

    Sharon

    #42144
    Sharon
    Member

    I’ve found a lot of CSS using Google (primarily StackOverflow, but others as well), and have ruled out the following:

    input:focus::-webkit-input-placeholder  {color:transparent;}
    input:focus::-moz-placeholder {color:transparent;}
    input:-moz-placeholder {color:transparent;}

    input:focus::-webkit-input-placeholder {
    color:transparent;}

    textarea::-webkit-input-placeholder, input::-webkit-input-placeholder {
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; }

    textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder {
    opacity: 0;}

    input:focus::-webkit-input-placeholder {
    opacity: 0;}

    I’m quite a bit lost on this one. Wondering if anyone has any other ideas?

    Cheers,

    Sharon

    #42145

    I believe that’s a javascript function, not css, since it depends on user input (clicking).

    #42146
    Sharon
    Member

    Ahhh, thanks Kenneth. In my research I found a lot of potential CSS solutions but also came across Javascript and J-Query, neither of which I’m at the point of understanding yet. Would putting this in my .php file work, do you think, again, I found this on StackOverflow? And how do I put in in, is there any other special opening and / or closing attributes?

    $('textarea,input').focus(function(e){
    val=$(this).attr('value');
    if (!val)
    $(this).attr('value',' ');
    this.select();
    }).blur(function(e){
    val=$(this).attr('value');
    if (val==' ')
    $(this).attr('value','');
    });

    Thanks so much for your help, and sorry to be a bother.

    Regards,

    Sharon

    #42147
    Sharon
    Member

    I got this figured with some help from the WordPress Forums. In case anyone else has a search box inside a widget, here is the code I used. This will allow you to change the search box text, and it will also ensure that the text disappears when someone starts to type in the search box. Just change ‘Search by Ingredient, Recipe Name or Category’ to whatever you need it to be for your site.

    <form id="searchform" class="searchform" method="get" action="<?php echo get_home_url(); ?>">
    <p class="clearfix default_searchform">
    <input type="text" name="s" placeholder="Search by Ingredient, Recipe Name or Category" value=""
    onblur="if (this.value == '') {this.value = '<?php _e('Search','graphene'); ?>';}"
    onfocus="if (this.value == '<?php _e('Search','graphene'); ?>') {this.value = '';}"
    value="<?php if ( $term = get_search_query() ) echo esc_attr( $term ); else _e( 'Search by Ingredient, Recipe Name or Category', 'graphene' ); ?>" />
    <button type="submit"><span><?php _e('Search', 'graphene'); ?></span></button>
    </p>
    <?php do_action('graphene_search_form'); ?>
    </form>

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.