WordPress search block and search results

I’m writing a page to display the results of a site search. In a classic WordPress (WP) theme, you can write PHP conditionals to either show the posts/pages that were found that match the search terms or show a message saying that no posts/pages were found. This seems a normal, user-friendly way of doing things.

For example, my (current) theme, Onepage by Iografica Themes, does this in search.php:

<?php
if ( have_posts() ) : ?>
  <header class="page-header">
    <h1 class="page-title"><?php printf( esc_html__( 'Search Results for: %s', 'onepage' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
  </header><!-- .page-header -->
  <?php
  /* Start the Loop */
  while ( have_posts() ) : the_post();
    /**
     * Run the loop for the search to output the results.
     * If you want to overload this in a child theme then include a file
     * called content-search.php and that will be used instead.
     */
    get_template_part( 'template-parts/content', 'search' );
  endwhile;
  the_posts_navigation();
else :
  get_template_part( 'template-parts/content', 'none' );
endif; ?>

If the results of the search have found any posts, they are looped through and displayed according to the instructions in template-parts/content-search.php. If no matching posts were found, the message in template-parts/content-none.php is displayed to the user instead:

How the classic Onepage theme displays empty search results on this site

The WP Search block doesn’t show anything if there were no matching posts; you’re left with blankness:

How empty search results are displayed using a WP Search block, with title added

This is why I was looking at options for the WP Query Loop block. What I found wasn’t anything useful like what to do if matching posts were found or not found. The options were, as ever, more to do with the display of the found posts, such as how many posts to display per page, how to order them and whether or not to include sticky posts.

I could create HTML template parts corresponding to the PHP ones, but I’d still need a way of showing one or the other, depending on whether there were any posts to show or not.

Finding nothing of use, I turned to the internet. There’s a plugin to make the display of any block conditional; I don’t want my theme to depend on third-party plugins. There’s the suggestion to make one’s own conditional block; blocks seem to be written in PHP, so at least the option of conditional logic is there. I’d use my new conditional block to show empty search results.^*

The only thing I have found to work without using conditionals is to add a message by means of CSS pseudo-element ::after to the container holding the search results that says something like <q>End of results</q>, making sure it works when there are hits and when there are not. Why not use the :empty pseudo-class? I tried that, but for some reason, it refused to work.

It seems this is yet another backwards step that the new-fangled block system has made.

^*Categories and tags that aren’t assigned to any posts also have this problem.

The WP documentation for queries in classic themes gives two examples of how to use queries with the Standard Loop.

The first shows nothing when there are no posts found:

<?php
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
  echo '<ul>';
  while ( $the_query->have_posts() ) {
    $the_query->the_post();
    echo '<li>' . get_the_title() . '</li>';
  }
  echo '</ul>';
} else {
  // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

The second is merely an alternative, and does show a message when there are no posts found:

<?php 
// the query
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
  <!-- pagination here -->
  <!-- the loop -->
  <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <h2><?php the_title(); ?></h2>
  <?php endwhile; ?>
  <!-- end of the loop -->
  <!-- pagination here -->
  <?php wp_reset_postdata(); ?>
<?php else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

WordPress search block and search results

Wait, there’s more!

Leave a Reply Cancel reply