I want to get rid of a dash '-' in my Wordpress site title on mobile. To do that, I want to place a span around the dash, something like the below.

Desired Result

<h1 class="site-title">My Site Title <span class="remove-mob">-</span> Is Great</h1>

Here's my current PHP code, can anyone suggest an edit, so that I can add the span above around the dash contained within the site title?

Current Code

<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>

2 Answers 2


Method 1

You can do this using JavaScript.

First, add an id for your h1 tag. I will use mobId here so your header tag will look like this:

<h1 class="site-title" id="mobId">My Site Title - Is Great</h1>

Then replace the hyphen with your desired code:

    var myStr = document.getElementById("mobId").innerHTML;
    var newStr = myStr.replace("-", "<span class='remove-mob'>-</span>");
    document.getElementById("mobId").innerHTML = newStr;

It can be written shorter, but i wrote the full code so you know what's going on.

Method 2

Strip using php str_replace():

<h1 class="site-title">
        <?php echo str_replace("-","<span class='remove-mob'>-</span>", get_bloginfo('name')); ?>

You can save get_bloginfo(); in a variable and use that in the function instead, in case it happens to return an error because of quotes.

  • Thank you Jack, can this be done via PHP? I was thinking there might be away to search 'bloginfo' and strip out the dash. Jan 22, 2017 at 16:40
  • Hi, i updated the code for you. I didn't put it in functions.php since we don't want to change bloginfo() across the whole website.
    – Johansson
    Jan 22, 2017 at 17:40

You can actually do this using a filter. The bloginfo() function actually calls the get_bloginfo() function and echoing the result.

The get_bloginfo() has a filter bloginfo applied in the output before it's returned. So you can use add_filter to alter the result of the function.

Using this method, you won't have to edit your theme files.

UPDATE: I've edited the function to make sure it only runs once in the global variable, this should solve the issue of it editing other instances of bloginfo assuming the call in the header is the earliest.

function wpse253508_change_title( $output, $show ) {

    static $run_once;

    if ( "name" == $show && "change_title" != $run_once ) {
        $run_once = "change_title";
        $output = str_replace("-", "<span class='remove-mob'>-</span>", $output);

        return $output;
    return $output;

add_filter( 'bloginfo', 'wpse253508_change_title', 10, 2 );
  • You are right. But this will change the string across the entire website, including those in meta tags, footer, etc.
    – Johansson
    Jan 22, 2017 at 18:03
  • 1
    I've updated the code so it only runs once assuming the earliest call is in the header
    – Tunji
    Jan 22, 2017 at 18:32

Your Answer

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

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