Giving a span to my site-title in Wordpress

So, If I am working on a site using only Visual Studio Code, then I am able to change the website’s title, by giving the title a <span> in the index.html-file.

But… When I try to do this on a website that is running on Wordpress there is no index.html-file to alter.

What I want to do is to give a span to the last three letters in the title of the website and turn them blue instead of black. If I do this using Visual studio code it is easy to just give the last three letters a span.

But how can I do this in Wordpress? Is the title, and its class, located in some of the PHP-files or something? I have looked for the site-title’s name in most of the relevant PHP-files, in the CPANEL. But I cannot find it…

Does anyone here know where it is located, or have a solution to this?
In CSS it is possible to change only the first letter, of the title-tag, by using = class::first-letter {} . But I want to change the last three letters of the title and I think that is only possible to do using a span(?). Therefore I have to locate the code of the title but I don’t know where it is located.

From my own experience…I know their Codex is…quite dense and their forums can be an “experience”, but, I did find this on stackoverflow. Perhaps it will help? Are you trying to add something to a widget?

https://stackoverflow.com/questions/20576044/adding-a-span-to-widget-title-in-wordpress

The first response:
https://wordpress.stackexchange.com/questions/82312/insert-a-span-inside-widget-title-to-give-a-different-color-to-the-second-word

Hi :slight_smile:

Yeah I know it can be a real hairdryer to go into some of those forums… :slight_smile:
Well no, not a widget really. I want to change the last three letters in my site title. But I don’t know how when I cannot access the index.html-file.

I only have limited knowledge of WordPress, but as I understand it pretty much everything for the layout and design is handled by the template.

If you can do “Edit Source”, or the equivalent, and directly manipulate the HTML element for your title on the page without having to (re)create the template files then you could add the <span> and style it inline with the tag… but I don’t know if that would work.

@ghostlovescore do you know of a way to do this?

2 Likes

Haven’t touched WordPress in a long time, and I’d rather not give any wrong information regarding this :frowning:

That said, @web4739090954, you might want to find the HTML editor (might be in Appearance), and then edit the child theme being used. Then find header.php and add the span there, but I don’t know if this is the cleanest way, or just a quick hack. This page might be subject to change still, so make sure to edit a child theme.

See here for the header.php source code: https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwelve/header.php

I’d attempt to tweak line 39.

2 Likes

Hi again

I have found a similar line in the functions.php-file. It looks kind of like that line 39 in your example. Like this:

<h1 class="site-title">
    <span>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
     </span>
</h1>

How can I alter that php-code to be able to give a span to the last three letters in my title?

When I see the title using a code inspector, at the frontend, the code shows up in html. But in the example-file it shows up like above, in php.

At the frontend the code looks like this:

<h1 class=”site-title”>
<span>
<a href=”#” rel=”home”>The name of my blog</a>
</span>
</h1>

I’d imagine this would do

<h1 class="site-title">
    <span>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?>zzz</a>
     </span>
</h1>

<h1 class=”site-title”>
<span>
<a href=”#” rel=”home”>The name of my blogzzz</a>
</span>
</h1>
1 Like

I am not sure if I got what you did there :slight_smile:

The thing is that the HTML-code above is only visible when I hit the “code inspector” at the homepage of the blog.

I cannot find that exact HTML-code anywhere on the backend. The only thing I find is the string of PHP-code above.

And I don’t know how to give a span to PHP-code. I know how to do it to HTML-code. But not to PHP-code.

If it was the same HTML-code in the backend it would be easy to alter and give a span to the last three letters. But I don’t know how to do that to PHP-code. And the HTML is only visible in the inspector.

Now I’m confused, haha.

I also modified the first piece of code, the one that should be in functions.php.

I simply hard-coded three z in there. <?php bloginfo( 'name' ); ?>zzz

I re-read your first post, and you want these letters blue. So why not do:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <?php bloginfo( 'name' ); ?><span class="blog-name-blue">zzz</span>
</a>

And then modify the CSS accordingly. If you don’t want to touch the CSS file, just do:

<span style="color:blue">zzz</span>

Nothing is stopping you from hard-coding these three letters in there. No need to touch the PHP part of the code. <?php bloginfo( 'name' ); ?> should remain as it is.

Hmm cool, this worked. What is the definition of hard-coding? I think the fact that you were able to come up with this code was really cool. I want to learn that too :slight_smile:

Only thing now is that when I applied CSS to the three zzz:s they did not respond to the same font-size. To make them have kind of the same font size I had to up the font size A LOT.

Look at this below. The first code is for the old title. And the one below is for the span of the three zzz:s.

Old title:

.site-title span a {
    color: #111;
    font-size: 42px;
    letter-spacing: 1.8px;
font-family:oswald;
font-weight:bold;
}

The span below it:

.site-title span a .blog-name {
	color: #111;
    font-size: 57px;
    letter-spacing: 1.8px;
font-family:oswald;
font-weight:bold;
}

The screenshot here shows that despite the fact that the fonts are quite close to each other in size and level, they still differ a small bit. For example the zzz:s look a bit bolder and possibly a bit further down horizontally. Do you know how to fix that:

ZZZ

Well one reason I could think of is that your blog name (ROCKY3) is in upper case, and the zzz in lower case. You’d then have to increase the font-size to reach a similar result.

Make sure they’re either all lower case or upper case.


If you put them all in upper case

<a href="#" rel="home">ROCKY3<span class="blog-name">ZZZ</span></a>

then all you need in your CSS is this

.site-title span a {
  color: #111;
  font-size: 42px;
  letter-spacing: 1.8px;
  font-family: 'Oswald', sans-serif;
  font-weight: bold;		
}

then if you wanted to change the color of the zzz, just add

.site-title span a .blog-name {
  color: blue;
}