[Resolved] Search Placeholder PHP Snippet

Home Forums Support Search Placeholder PHP Snippet

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1147364
    Michael

    Hi all,

    I have implemented the snippet to change the navigation search placeholder text and that works fine:

    https://www.dropbox.com/s/tl3vokeyg7rqrf0/nav-search-placeholder.jpg?dl=0

    However on the results page, the 2 search boxes get populated with the search term I have just searched for, and if I delete this, then the placeholder text reverts to “Search…”

    How can I get the placeholder text on these to show up as per the navigation search placeholder, and do so without first auto-populating with the previous search term?

    https://www.dropbox.com/s/n3d0uxg0fcgdsle/search-results-page.jpg?dl=0

    Many thanks.

    Michael.

    The url I am testing on: https://reclaimdesign-383226.easywp.com/about-reclaim-design.html

    #1147581
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1147796
    Michael

    Hi Leo, I’ve done that now πŸ™‚

    #1147807
    Michael

    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

    #1148419
    Tom
    Lead Developer
    Lead Developer

    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.

    #1148436
    Michael

    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.

    #1148728
    Tom
    Lead Developer
    Lead Developer

    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.

    #1149130
    Michael

    Hi Tom, I’ve updated that code and if I enter “test” it still returns Latest and About pages

    #1149552
    Tom
    Lead Developer
    Lead Developer

    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/

    #1149975
    Michael

    Thanks Tom, I will give that a shot

    #1150012
    Michael

    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.

    #1150716
    Tom
    Lead Developer
    Lead Developer

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

    #1151301
    Michael

    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 πŸ˜‰

    #1151534
    Tom
    Lead Developer
    Lead Developer

    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).

    #1151606
    Michael

    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.

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.