How to Add “No Search Results Found” in the Twenty Twenty-Two Theme

When you use a WordPress site search form to look for a term or phrase and no results are found, you expect a message like “No search results found” to display.

But you don’t expect to get a blank page.

Which has you wondering what happened.

• Did the search work?
• Or did something go wrong on the site?
• Do I need to submit the search again?

But that’s what happened to my friend Virginia on Old Ain’t Dead, her movie and TV review website focused on women.

She did a search on her site, which resulted in a blank page.

Which was frustrating. Especially since it wasn’t clear how to add a custom “no search results found” message to search.

Read on to learn about Twenty Twenty-Two theme “no search results found” and what solution I found for Virginia.

Background About Virginia’s Site

After using the Twenty Sixteen theme for years, Virginia recently switched to the Twenty Twenty-Two theme for her site.

With the theme switch came a lot of changes to how a theme works. And how to add features and functionality with blocks rather than plugins and widgets.

When Virginia mentioned the problem about search results to me, I admitted: I hadn’t used the Twenty Twenty-Two theme.

But I was curious.

The “no search results found” message is a default for every theme I’ve used in the past. Or the theme (or support help/forum) provides details on how to add or customize the message.

I had no idea what Twenty Twenty-Two theme included, so I offered to delve in and investigate.

What I Learned about the Twenty Twenty-Two Theme

After installing the Twenty Twenty-Two theme on both WordPress.com and self-hosted WordPress, I tried searches for words I knew weren’t included on the site.

And had the same results as Virginia, a blank page.

Not helpful.

Then I searched the WordPress.com theme page, WordPress.com forums, WordPress.org theme page, WordPress.org support forums, and conducted multiple searches online.

Looking for any mention of a blank page when no search results displayed.

No luck. I couldn’t find anyone who wrote about or asked about a blank page displaying when there were no search results.

And that’s when I posted a topic in the WordPress.com forums as well as the Twenty Twenty-Two theme support forum on WordPress.org.

Success!

People offered solutions in their forum replies, but not the same solution for both WordPress.com and self-hosted WordPress.

Adding a Custom “No Search Results Found” Search Message on WordPress.com

For everyone using the Twenty Twenty-Two theme on WordPress.com, you can customize the “No search results found” message in the Search Template using these steps:

1. Log in to your site

2. Choose Appearance > Editor from the Dashboard

3. Select Templates

4. Select the Search template

   

5. Scroll to the bottom of the template

6. Under the pagination for the template, search for a field titled “Add text or blocks that will display when the query returns no results”

7. Replaced that content with your “No search results found” message in the field

   

8. Select Save (found in top right of template)

My thanks to Adam on WordPress.com staff for answering my question about a custom “no search results found” message!

Displaying a “No Results Found” Search Message on Self-Hosted WordPress Sites

After discovering how to add a custom “no search results found” message on WordPress.com, I expected the same option was available for self-hosted WordPress sites using the Twenty Twenty-Two theme.

I was wrong.

By default, as of September 21, 2022, the Twenty Twenty-Two theme on self-hosted WordPress sites doesn’t include a field for you to add a custom message.

Nor does it include CSS for the custom message.

However, you can add a block and CSS to display a “no search results found” message in Twenty Twenty-Two theme, as Alvaro Gomez explained in my how to customize search results topic in the support forum.

What I don’t understand: theme designers didn’t include the field and CSS for the “no search results found” message in the self-hosted theme.

Which was included in the WordPress.com Twenty Twenty-Two theme.

Makes no sense to me.

Why require users to add the field and CSS themselves? It should have been included in the theme by default.

Anyway, to display a “no search results found” message in self-hosted WordPress sites using Twenty Twenty-Two theme, use these steps:

1. Log in to your site

2. Choose Appearance > Editor from the Dashboard

3. Select Templates

4. Select the Search template

5. Under the “Search results for search” add a block with your custom text of something like “No search results found”

6. Give the block a class name like search-no-results-message, using the Advanced > Additional CSS Classes option

7. Add CSS to your site to hide “Nothing found” message when there are search results (To add CSS, you need to access the Customizer by adding /wp-admin/customize.php after your site’s URL. Sorry, there’s no other option at this time to access the Customizer.)

   .search-no-results-message {
       display: none;
   }

8. Add CSS to your site to display “Nothing found” message when there are no search results

   .search-no-results .search-no-results-message {
       display: block;
   }

I shared the solution with Virginia, and she confirmed it worked on her self-hosted site!

Summary

Thanks to replies from people to my questions in the support forums, I was able to find solutions for the “no search results found” messages.

A reminder to everyone who uses WordPress: forums are an excellent place to ask questions. And a goldmine for support!

Since I’ve worked on both WordPress.com and self-hosted WordPress sites, I know there are often different methods to resolve issues.

In my opinion, the issue of missing “no search results found” message in the Twenty Twenty-Two theme for self-hosted sites is a design oversight.

Something was overlooked in the theme design or in the quality assurance checklist for standard default theme messages.

Have you found another solution to add a custom “No search results found” message in Twenty Twenty-Two theme? If you have, share it in the comments.