H1 for homepage logo

[johnaps]

Hello, i have read all other support threads about this matter and non of the solutions written were of any help to my site…

I am trying to make my logo which is right next to the hamburger button, an h1 tag for seo purposes…
Its important though to not mess with any spacing of any element in any media, because everything is preconfigured and with no available space…

Fore example i tried implementing 2 hooks one before site logo and one after with the first containing <h1> and the second </h1> respectively but no matter what css i tried my header spacings were messed up.

I think maybe with php code i ll be able to solve this, so if you can forward this directly to Tom, it would be very much appreciated!

But any suggestions are welcomed of course!~

[David]

Hi there,

you can try this PHP snippet to add the H1 for the homepage only:

<?php
add_filter( 'generate_logo_output', 'db_home_logo_htag', 10, 3 );
function db_home_logo_htag( $output, $logo_url, $html_attr ) {

    if ( is_front_page() ) {
    
        printf(
		'<div class="site-logo">
            <h1>
			    <a href="%1$s" title="%2$s" rel="home">
				    <img %3$s />
                </a>
            </h1>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
    
        );
    } else {
    
        printf(
		'<div class="site-logo">
		    <a href="%1$s" title="%2$s" rel="home">
			    <img %3$s />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
    
        );
    }

}

Then this CSS to remove the H1 styling:

.site-logo h1 {
    margin-bottom: 0 !important;
    line-height: unset;
    font-size: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

thank you very much! It worked! Is there any place in the code that i can manipulate whats my h1 “data” will be? Because i see in the code
”
a href=”%1$s” title=”%2$s” rel=”home”
”
or is that my logo’s div?

Thank you very much!

[David]

What do you want it to be?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

Ι guess my site’s name with the city my physical store is in, which also contains the main keyword for my niche…
something like “Σοφιανός Ορθοπεδικά Είδη Αθήνα”

[David]

I mean the HTML 🙂

So in the code you will see this:

<h1>
    <a href="%1$s" title="%2$s" rel="home">
        <img %3$s />
    </a>
</h1>

You can edit the HTML to include any attributes you need eg.

<h1 title="my site title">
    <a href="%1$s" title="%2$s" rel="home">
        <img %3$s />
    </a>
</h1>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

so i can change the attribute title to title=“Σοφιανός Ορθοπεδικά Είδη Αθήνα”?

[David]

Thats correct

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts