String replace WordPress Site Title

by

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:

<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.

Leave a Comment