Search Results Page outputs HTML code

Question

Search Results Page header displays visible code.

For example this is what's displayed at the top of a search results page including the span code around the search word:

"Search Results for: <span>search_word</span>"

I can't figure out where the span code is generated and need help making the code invisible. I'm using the Primer theme and looked at the search related templates, but now I'm stumped.

I will really appreciate your help! Thank you!

UPDATE

Here's the strange search.php code I found in the Primer template - I switched to the Twenty Seventeen theme and now all is good:

    <?php
/**
 * The template for displaying search results pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package Primer
 * @since   1.0.0
 */

get_header(); ?>

<section id="primary" class="content-area">

    <main id="main" class="site-main" role="main">

    <?php if ( have_posts() ) : ?>

        <?php while ( have_posts() ) : the_post() ?>

            <?php get_template_part( 'content', 'search' ); ?>

        <?php endwhile; ?>

        <?php primer_pagination(); ?>

    <?php else : ?>

        <?php get_template_part( 'content', 'none' ); ?>

    <?php endif; ?>

    </main><!-- #main -->

</section><!-- #primary -->

<?php get_sidebar(); ?>

<?php get_sidebar( 'tertiary' ); ?>

<?php get_footer(); ?>

Answer 1

There is most likely a problem with escaping HTML in your code. You might be doing something like this:

echo esc_html("Search Results for: <span>search_word</span>");

Instead, use printf or only wrap your search word with esc_html():

printf('Search Results for: <span>%s</span>', esc_html( $search_word ) );

Update

The search results are rendered by search.php, most of the times (If it exists, and you don't have rewrite rules and template redirects, etc.)

But first, right click on the header that is having problem, and click Inspect Element. The developer console will open, and the header will be highlighted. Take a look at below screenshot that belongs to the header of this question:

Now, you know the general structure that is surrounding your header. You can look for this pattern in your search.php file.

Update 2

It appears that you are using the free Primer theme from the WordPress's theme repository.

After digging for a while, after a chain of "Tom & Jerry styled" chase of functions declared randomly all across the templates, I've found the source of your issue. The issue is coming from line 47 of /inc/helpers.php:

$title = sprintf(
    /* translators: search term */
    esc_html__( 'Search Results for: %s', 'primer' ),
    sprintf(
        '<span>%s</span>',
        get_search_query()
    )
);

Which is what I was expecting. To solve the issue, simply remove the <span> and </span> that are wrapping the search query. You can solve this without removing the spans, but it requires a couple of more files to be chain edited. Removing it is not a big deal though.

However, you can use a child theme to do this.