Surrond h1 entry-title automatically with a span tag

Question

I would like to implement a style on all h1 entry titles, the issue is that the styling is reliant on there being span tags around the element. Hence how can I automatically insert a span tag either side of my entry titles.

For background info, this is the style I wish to add:

h1.entry-title {
   text-transform: uppercase;
   position: relative;
   text-align: center;
   margin-bottom: 50px;
}

h1.entry-title span {
    background: #fff;
    padding: 0 30px;
    position: relative;
    z-index: 1;
}

h1.entry-title:before {
    background: #004B92;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: 50%;
    width: 100%;
}

h1.entry-title:before {
    left: 0;
}

Which results in:

As you can see, the span is key for hiding part of the line.

<h1><span>Partners</span></h1>

I was hoping there maybe something I could write into the functions.php file to achieve this?

Answer 1

You could either add the span in your template file like this:

<h1><span><?php the_title() ?></span></h1>

Or you could add a filter to manipulate the output like this:

add_filter('the_title', function ($title) {
  $title = '<span>' . $title . '</span>';
  return $title;
});