[Resolved] Is it Possible to Add Placeholder Text/Default Label to [wpv-filter-search-box]

[Author]

Posts

[dbarber]

I am trying to add placeholder text/default value to [wpv-filter-search-box].

I've tried various options but none work.

I did some research on the WP Toolset website and saw that there are no attributes for [wpv-filter-search-box], so I'm thinking it might not be possible or perhaps there's a custom function that can make it happen?

Please advise.

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

Yes, you are right, there are no attributes for [wpv-filter-search-box]
https://toolset.com/documentation/views-shortcodes/#wpv-filter-search-box
This shortcode has no attributes

I suggest you try create another custom shortcode for it, please check the source code of Views plugin, file wpv-shortcodes.php, line 2273~2312:

/**
 * Add a shortcode for the search input from the user
 *
 */

add_shortcode('wpv-filter-search-box', 'wpv_filter_search_box');
function wpv_filter_search_box($atts){
    extract(
        shortcode_atts( array(), $atts )
    );

    global $WP_Views;
    $view_settings = $WP_Views->get_view_settings();

    if ($view_settings['query_type'][0] == 'posts') {
        if ($view_settings && isset($view_settings['post_search_value']) && isset($view_settings['search_mode']) && $view_settings['search_mode'] == 'specific') {
            $value = 'value="' . $view_settings['post_search_value'] . '"';
        } else {
            $value = '';
        }
        if (isset($_GET['wpv_post_search'])) {
            $value = 'value="' . stripslashes( urldecode( sanitize_text_field( $_GET['wpv_post_search'] ) ) ) . '"';
        }
    
        return '<input type="text" name="wpv_post_search" ' . $value . ' class="js-wpv-filter-trigger-delayed" />';
    }        

    if ($view_settings['query_type'][0] == 'taxonomy') {
        if ($view_settings && isset($view_settings['taxonomy_search_value'])  && isset($view_settings['taxonomy_search_mode']) && $view_settings['taxonomy_search_mode'] == 'specific') {
            $value = 'value="' . $view_settings['taxonomy_search_value'] . '"';
        } else {
            $value = '';
        }
        if (isset($_GET['wpv_taxonomy_search'])) {
            $value = 'value="' . stripslashes( urldecode( sanitize_text_field( $_GET['wpv_taxonomy_search'] ) ) )  . '"';
        }
    
        return '<input type="text" name="wpv_taxonomy_search" ' . $value . '/>';
    }        
}

[dbarber]

Hi Luoy

I take it that I wasn't supposed to copy and paste the code you provided/referenced above into my functions.php file because when I did I got the following:

Fatal error: Cannot redeclare wpv_filter_search_box() in /nas/wp/www/staging/dawsonsites/wp-content/themes/true-local-online-marketing/functions.php on line 37

I deleted it and got things back to normal, then started to look for the wpv-shortcodes.php file but haven't been able to find it yet.

Could you please clarify your instructions?

Thanks

Dawson

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

As I mentioned above it needs custom PHP codes to create a shortcode,

Please try this:
1) add codes in your theme/functions.php

add_shortcode('my-filter-search-box', 'my_filter_search_box');
function my_filter_search_box($atts){
    extract(
        shortcode_atts( array(
		'placeholder' => 'Search',
		'default_value' => '',
		), $atts )
    );
 
    global $WP_Views;
    $view_settings = $WP_Views->get_view_settings();
 
    if ($view_settings['query_type'][0] == 'posts') {
        if ($view_settings && isset($view_settings['post_search_value']) && isset($view_settings['search_mode']) && $view_settings['search_mode'] == 'specific') {
            $value = 'value="' . $view_settings['post_search_value'] . '"';
        } else {
            $value = 'value="' . $default_value . '"';
        }
        if (isset($_GET['wpv_post_search'])) {
            $value = 'value="' . stripslashes( urldecode( sanitize_text_field( $_GET['wpv_post_search'] ) ) ) . '"';
        }
     
        return '<label class="search-label" for="wpv_post_search">Search for:</label><input type="text" name="wpv_post_search" id="wpv_post_search" ' . $value . ' class="js-wpv-filter-trigger-delayed" />';
    }        
 
    if ($view_settings['query_type'][0] == 'taxonomy') {
        if ($view_settings && isset($view_settings['taxonomy_search_value'])  && isset($view_settings['taxonomy_search_mode']) && $view_settings['taxonomy_search_mode'] == 'specific') {
            $value = 'value="' . $view_settings['taxonomy_search_value'] . '"';
        } else {
            $value = '';
        }
        if (isset($_GET['wpv_taxonomy_search'])) {
            $value = 'value="' . stripslashes( urldecode( sanitize_text_field( $_GET['wpv_taxonomy_search'] ) ) )  . '"';
        }
     
        return '<input type="text" name="wpv_taxonomy_search" ' . $value . '/>';
    }        
}

2) use the shortcode in your view's filter form like this:
[my-filter-search-box placeholder="Search here" default_value="1234"]

[dbarber]

Hi Luoy

Thanks for your assistance on this.

After adding the code above to my functions.php file and using the shortcode you advised me to use, the search box just outputs the shortcode on the front end.

Please advise.

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

I tested above shortcode in my localhost, it works fine, if you need more assistance for it, please duplicate same problem in a test site and fill below private detail box with login details, also point out the problem View URL and page URL, and where I can edit the PHP codes, thanks

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

You are editing wrong theme file, your current theme is "DMS", so the custom shortcode can not be resolved, I have edited the file:
hidden link

Added the codes I mentioned above, please check if the problem is fixed or not

[dbarber]

Sorry Luoy.

I put together the test site in a hurry and forgot to activate the child theme.

Anyway, I saw that it was working as you said on, with the parent theme activated.

I deleted the code from the parent theme functions.php and activated the child theme (whose functions.php still had the code you provide) and it was also working.

Clearly there's a problem with the other installation (same parent and same child theme).

I'll take a look and report back before closing this off, if that's all right.

Many thanks,

Dawson

[dbarber]

Okay so a few moments after I realized I had steered you to the wrong functions.php file, it occurred to me that I may have been editing the wrong functions.php file on my live site.

Sure enough, I was...what a genius.

Anyway, after editing the right functions.php, it, of course, works.

Thank you, Luoy.

One last request, if I may: how can I output only the value and not the label?

I've deleted placeholder="Search here" from the shortcode you provided:

[my-filter-search-box placeholder="Search here" default_value="1234"]

But that's not it, so I'm guessing it's somewhere in the shortcode you provided.

This is all I've got that relates to the search box now:

<div class="homepage-search-keywords">
  [my-filter-search-box default_value="Keywords"]
  </div>

I don't want to take a chance on messing it up by guessing, so if you could let me know, that would be great.

Many thanks

Dawson

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

Please replace the PHP codes with:

add_shortcode('my-filter-search-box', 'my_filter_search_box');
function my_filter_search_box($atts){
    extract(
        shortcode_atts( array(
		'placeholder' => '',
		'default_value' => 'abc',
		), $atts )
    );
 
    global $WP_Views;
    $view_settings = $WP_Views->get_view_settings();
 
    if ($view_settings['query_type'][0] == 'posts') {
		if($placeholder != ''){
			$label = '<label class="search-label" for="wpv_post_search">Search for:</label>';
		}
        if ($view_settings && isset($view_settings['post_search_value']) && isset($view_settings['search_mode']) && $view_settings['search_mode'] == 'specific') {
            $value = 'value="' . $view_settings['post_search_value'] . '"';
        } else {
            $value = 'value="' . $default_value . '"';
        }
        if (isset($_GET['wpv_post_search'])) {
            $value = 'value="' . stripslashes( urldecode( sanitize_text_field( $_GET['wpv_post_search'] ) ) ) . '"';
        }
     
        return $label . '<input type="text" name="wpv_post_search" id="wpv_post_search" ' . $value . ' class="js-wpv-filter-trigger-delayed" />';
    }        
 
    if ($view_settings['query_type'][0] == 'taxonomy') {
        if ($view_settings && isset($view_settings['taxonomy_search_value'])  && isset($view_settings['taxonomy_search_mode']) && $view_settings['taxonomy_search_mode'] == 'specific') {
            $value = 'value="' . $view_settings['taxonomy_search_value'] . '"';
        } else {
            $value = '';
        }
        if (isset($_GET['wpv_taxonomy_search'])) {
            $value = 'value="' . stripslashes( urldecode( sanitize_text_field( $_GET['wpv_taxonomy_search'] ) ) )  . '"';
        }
     
        return '<input type="text" name="wpv_taxonomy_search" ' . $value . '/>';
    }        
}

use the shortcode like this:
[my-filter-search-box default_value="1234"]

[henkd]

If I may ask a question here ...

Is there a way to :
- make the placeholder disappear when clicking inside the search-box.
- make the searchbox ignore the "Keyword" placeholder. Presently the user has to go delete the "Keyword" first before doing a 'blank/all" search.

[timm-5]

i, I am trying to use this code also and have figured out that instead of using the value you can place a placeholder attribute onto this bit as shown below:

return $label . '<input type="text" name="wpv_post_search" id="wpv_post_search" ' . $value . ' class="js-wpv-filter-trigger-delayed" placeholder="Search.." />';

by doing this it means you don't need to use the value part which then doesn't need to be deleted before the search can be used 🙂

---

My issue is i'm trying to use this with a parametric search and it doesn't seem to want to play ball as the search filter won't recognise the custom shortcode and then won't update the search.

Any ideas on how to resolve this?

Thanks

[timm-5]

Hi all, Me again 😀

I have great news for thos of you having this issue - be it only temporary AND you will need to redo it every time you update views - however here it is 🙂

I spent a good hour trawling through the views files and came across the search filter shortcode creator here:

plugins/wp-views/embedded/inc/classes/wpv-render-filter.class.php

go to line: 3783 or there abouts and add : placeholder="Search..." after type="text" - save then upload and you have your placeholder 🙂

Have fun with it guys 🙂

[henkd]

Thanks timm-5. Great to know 🙂

[Woody]

In response to timm-5:

I tried your solution but cannot find line 3783 in this file mentioned. It is much shorter code.

Advise.

Woody