How to customize search results in Twenty Twenty Two theme

  • Testing out the Twenty Twenty Two theme, I discovered the search results page displays blank content when there are no search results.

    Which isn’t helpful.

    I’d like to add text like “Sorry, there were no results for your search.” or something similar when there are no search results.

    I’m not finding any option to do that in the Site Editor.

    Is there a way to add conditional logic to display results when there are matching terms or display “Sorry there were not results for your search” when there are no matching terms?

    • This topic was modified 2 years, 2 months ago by Alvaro Gómez.
Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @redcrew, great question!

    There is in fact, an ongoing conversation on how to add this exact feature to the next bundled theme, Twenty Twenty-Three here.

    For Twenty Twenty-Two, we could add a block with you “Nothing found” message to the Search template and leverage the search-no-results CSS class that is added automatically to the <body> tag to hide said message when results ARE found.

    1. Head to your “Search” template, via the Site Editor or by adding this URL to your site:

    wp-admin/site-editor.php?postType=wp_template&postId=twentytwentytwo%2F%2Fsearch

    2. Insert a block to include your message. Give this block a class name such as search-no-results-message, as seen below:

    Screen Shot on 2022 09 13 at 18 21 19

    3. Add the following CSS to your site:

    /* Hide Custom "Nothing Found" message if we have results*/
.search-no-results-message  {
  display:none;
}
/* Show Custom message if nothing is found */
.search-no-results .search-no-results-message {
  display:block;
}

    (To access the CSS editor in the Customizer in Twenty Twenty-Two you’d need to add this after your site’s URL: /wp-admin/customize.php)

    The CSS code above will hide the block you just added and only show it when there are no results.

    Please let me know if you have any questions or if you encounter any difficulties in doing this.

    Thread Starter Deborah Edwards-Onoro

    (@redcrew)

    Thank you for your quick reply and all the information, Alvaro. I wasn’t aware it was being discussed for Twenty Twenty Three theme, glad to read the discussion.

    Appreciate your help and info for the Twenty Twenty Two theme. I was hoping there was a way to add the message, without requiring a lot of delving into code.

    (Sorry about formatting issues on my support request. I missed updating the formatting until it was too late.)

    > I was hoping there was a way to add the message, without requiring a lot of delving into code.

    I understand. Hopefully this feature will be available in the near future without the need to add any code.

    I am going to mark this thread as solved but if want to try my suggested path and run into any problems, please feel free to ask!

    Thread Starter Deborah Edwards-Onoro

    (@redcrew)

    Thanks, Alvaro.

    I’m working with someone who switched from Twenty Sixteen to Twenty Twenty-Two. As you can imagine, that’s quite a shift in thinking about customizing layout.

    They did try your recommendation on their site and it worked! Thank you for the help, Alvaro.

    Personally, I’m surprised the “No results found for your search” text wasn’t built into the Twenty Twenty-Two theme by default.

    Yes, this can be marked resolved.

    They did try your recommendation on their site and it worked! Thank you for the help, Alvaro.

    Yay!

    Personally, I’m surprised the “No results found for your search” text wasn’t built into the Twenty Twenty-Two theme by default.

    Indeed ?? Thanks again for the feedback!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to customize search results in Twenty Twenty Two theme’ is closed to new replies.