I have tried adding the script below to the “code injection” but it doesn’t seem to work.
const newHeader = document.querySelector(‘.m-hero-title’);
newHeader.id = ‘m-hero-title-java’;
document.getElementById(“m-hero-title”).innerHTML = “New header!”;
The ID tag doesn’t seem to be getting added to the H1 element (HTML class “m-hero-title”) in the header, which I believe is needed to use “document.getElementById().innerHTML” and edit the HTML content.
My questions are:
Does anyone have any thoughts on why it isn’t working?
Any help is hugely appreciated,
Is there a typo? You’re adding an id with -java, but then you’re searching for an element without the -java?
My coding experience is very limited. Are you able to explain?
Thanks for your comment
The hero H1 is controlled by your site title, so you could update your site title if you want to change it.
const h1 = document.querySelector(".m-hero-title");
h1.textContent = "My brand new title";
I really appreciate the response. It means a lot.
In response to your first comment, the theme I am using inputs the site title as the H1 header. However, I want the site title to stay the same and alter the H1 header.
That said, I gave your suggestion a go but for some reason, it still doesn’t seem to be working. If you have 2secs, I have attached a screenshot and I am curious if you notice what the issue is?
The left side shows the inspected title and the H1 element and the class “.m-hero-title”
Any insight is hugely appreciated!
I may be tired today, but I’m not seeing the problem. Can you check your console log to see if there’s an error message? (In Chrome, press F12, then click the Console tab.)
For debugging purposes, consider adding
between the two existing lines. That’ll tell you if the querySelector is actually finding it.
Oh, hang on. I found it. Move that code to the site FOOTER. You’re trying to change the text before the browser has actually drawn it. :)
This is the magic that’s missing. Nice catch, @Cathy_Sarisky!
@sebbunney, It’s probably going to flicker. (Will depend on browser speed.) I’m a little surprised it’s hard-coded, but it might be. (Check in the Ghost admin pages, under site settings - it might be there, the same place you can change your theme color.) If you need it changed in a way that doesn’t flicker (because it’s right to start), hit me up. Five minute job. [Assumes you’re not on the Ghost Pro starter plan. If you’re on the starter plan, then the code injection above is the best option.]
One other option I thought of:
Change your site title (General → Title) to what you want to have in the H1. Then, update Meta title to what you want the site to be called. This will be used in search engine results and the browser tab.
This approach might not work, in which case you have the other one, but I thought I’d throw it out there.
You two are the best. That worked. Ahh, I cannot thank you enough. It really means a lot.
Hey Cathy or @RyanF
I just realized an issue! The HTML class “.m-hero-title” is not unique to the home page. Every page uses the same HTML class. That said, do you know of a way to specifically target the home page H1 “.m-hero-title”?
Thanks in advance for any insight,
Spent some time digging further and managed to solve it. Sorry for tagging you, only to figure it out.
That solution works! Nice. I’ll throw one more out there.
If developers use it, Ghost outputs a specific class for different contexts. For the home page, it outputs the
home-template class. That means you can use it to target elements on the home page.
const h1 = document.querySelector(".home-template .m-hero-title");
Ahh amazing. Thanks a ton Ryan!