String replace Wordpress Site Title

Question

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>

Answer 1

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:

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

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')); ?>
</h1>

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.

Answer 2

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