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:

Horizontal Line through title

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


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

1 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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.