Edition theme: Making the site title the H1 header on page one only

Developer help
1

It may not be a big deal, but page one on my site doesn’t have an H1 tag. Most likely 90+ per cent of other Ghost Pro users will be in the same position.

I’d like to make the site title an H1 tag on the first page, but only on the first page.

This was one of the first things I figured out how to do when I used WordPress… but I’ve looked at the code for Ghost and I haven’t got a clue how to do it here. Ha someone with coding expertise figured this out yet?

2

Should be fairly simple to do.

Can you show us the site where you’d like to edit it and point out the exact heading you’re referring to?

Is it the “Edition is a minimal newsletter theme for Ghost. A beautiful way to share stories with your growing audience.” which can be seen in the demo here?

3

Thanks.

The page is here. Ideally the H1 would be where it says: New Zealand telecommunications and technology news.

But it could equally be when my name (and the site name) shows up in the top left corner: Bill Bennett

Yes… that is Edition it is a very good theme for my purposes.

4

Alright, I see :slight_smile:

The file you want to edit is the /partials/cover.hbs. Like the folder name indicates, it’s a partial file, wrapping a component that can then be re-used. That just makes the overall structure of the theme a bit better to understand, but if you’ve never worked with that, it is certainly a bit confusing.

Here are the exact lines you need to edit: Edition/cover.hbs at c97e1d860583b934398ce6788b8b819774c9fcb8 · TryGhost/Edition · GitHub

As you can see, there is quite a bit of logic in there. The text will be different depending on whether the user is logged in and whether the “Email Signup Text” custom setting is set.

But, to make things easier, you can just wrap the entire block in an h1 like this:

<div class="cover-description">
    <h1>
        {{#unless @member}}
            {{#if @custom.email_signup_text}}
                {{@custom.email_signup_text}}
            {{else}}
                {{@site.description}}
            {{/if}}
        {{else}}
            {{@site.description}}
        {{/unless}}
    </h1>
</div>

Do keep in mind though, that adding this <h1> tag might change the style a big. Depending on your preference, you might want to adapt the CSS styling a bit after you see how it looks (haven’t tested it myself).

Hope this helps!

1 Like
5

Thanks Jannis, this did the trick.

1 Like