Search Placeholder PHP Snippet

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

Hi Leo, I've done that now :)

Also, it is returning some odd results. If I enter "test" it brings up my About page in the results? I know that I don't have much content at the moment, but I would imagine "test" should bring up a "No Results Found".

https://www.dropbox.com/s/6s27f77wsljew2u/test-result.jpg?dl=0

And if I click search without entering anything into the box, it returns my menu options in a column:

https://www.dropbox.com/s/x2cjhe4uwh2zyn6/blank-input-results.jpg?dl=0

I would have expected it to not submit on a blank input, like the Google search I have running on our live site:

https://www.reclaimdesign.org

And one last question on the search front - is it possible to set it up so that it returns images (as per the search box on our site above)? The people who are searching our site are generally looking for product images rather than info, and tend to do better visually

Hi there,

We can remove the current search result by tweaking the filter. Can you share the current filter you're using to change the placeholder?

Your about page is showing up when you search for "Test" because you have the word "Test" at the top of the page.

WordPress itself displays everything if the search query is empty. However, we may be able to add required to the HTML element itself in the same filter to prevent this.

Hi Tom, thanks for getting back to me.

I've just changed the "Test" text to read "Placeholder" and if I do a search for "test" it still shows my about page for some reason. As far as I can tell "test" isn't in the text anywhere else on that page.

https://reclaimdesign-383226.easywp.com/about-reclaim-design.html

Here is the code snippet I added:

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search Our Eco-friendly Home Decor" 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' ) 
    ); 
} );

And then to style the colour of the input text I added this to the CSS:

.navigation-search input[type="search"], navigation-search input[type="search"]:focus {
	opacity: 1;
}

.navigation-search input[type="search"]::placeholder {
  	color: #fff;
}

.navigation-search input[type="search"]::-webkit-input-placeholder {
	color: #fff;
}

.navigation-search input[type="search"]::-moz-placeholder {
	color: #fff;
}

.navigation-search input[type="search"]::-ms-placeholder {
	color: #fff;
}

I had to adjust the opacity because the menu items were showing up behind. I had a hell of a time trying to get the font to stay white across all browsers - I'm not sure that that the above code I added is actually working all that well since on my phone the input text kept showing up as the same grey colour as the body, but only after I did a search. Initially it was fine.... Really weird.

Try changing it to this:

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

WordPress doesn't have a great search system. It's likely seeing latest in the text and returning it as a result for test.

Hi Tom, I've updated that code and if I enter "test" it still returns Latest and About pages

There's not much we can do about that, unfortunately. That's the search system inside WordPress itself.

Not sure if a plugin like this will help, but it's worth a shot: https://wordpress.org/plugins/relevanssi/

Thanks Tom, I will give that a shot

Hi Tom,

I've installed that plugin and wrote to the developer to ask if it is possible to return images in the results as opposed to text (as per the Google Custom Search), and he said:

What happens on the search results page depends on your theme. Relevanssi can be set to search media library, but it's up to your theme what is shown on the search results page.

How do I set the theme to do as he suggests?

Michael.

I'm not sure what you mean - how would you return only images in the search results? Any examples?

Hi Tom,

I mean something like this (from the google custom search results on my site - https://www.reclaimdesign.org)

https://www.dropbox.com/s/1m8ls7c23hw3z2c/google-custom-search-image-results.jpg?dl=0

As to how you would do it? I have absolutely no idea ;)

We can hide things other than the images in your search results if you'd like? WordPress will still base its search on the content of the page (not the image itself).

Hi Tom, I think the Google search must be looking at alt tags and image sitemap or some such. Anyway, if it's not possible no worries.