[Resolved] H1 for homepage logo

Home Forums Support H1 for homepage logo

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1161967
    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!~

    #1161994
    David
    Staff
    Customer Support

    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;
    }
    #1162081
    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!

    #1162186
    David
    Staff
    Customer Support

    What do you want it to be?

    #1165906
    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 “Σοφιανός Ορθοπεδικά Είδη Αθήνα”

    #1166040
    David
    Staff
    Customer Support

    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>
    #1166125
    johnaps

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

    #1166252
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.