[Resolved] Title Attribute not there for my logo images

[Joseph]

I am using ContentKing to assess my technical SEO factors and they keep harassing me about my Title text missing from my 2 logo images. (sticky and non-sticky) They are set up correctly in WordPress, so it has to be the theme that has this missing from the code. Please help me fix this so these errors stop. Thanks!

[David]

Hi there,

try adding this PHP snippet:

add_filter( 'generate_navigation_logo_output','db_navigation_logo_title_attr' );
function db_navigation_logo_title_attr( $output ) {
	return sprintf(
	'<div class="site-logo sticky-logo navigation-logo">
        <a href="%1$s" rel="home">
            <img src="%2$s" title="%3$s" alt="%4$s" />
        </a>
    </div>',
    esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
    esc_url( apply_filters( 'generate_navigation_logo', $settings['sticky_menu_logo'] ) ),
    esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
    esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
}

https://docs.generatepress.com/article/adding-php/

[Joseph]

Ok, I added that snippet. It seems one of the errors went away, but there is still a trigger on the Logo image that it doesn’t have a title. Is there another class for this logo? My staging is: https://humjam.wpengine.com

[Joseph]

it is still triggering the error.. maybe an easy update to the snippet? I am not sure what to try. Is there a list of classes somewhere as a guide?

The site is now moved to just https://humjam.com

[Joseph]

and also these images on this page? https://humjam.com/about (says the same thing) – is there a list of image classes that can be added to the snippet to cover all images created by the system?

[Joseph]

This is what the output:

<div class="inside-navigation grid-container grid-parent">
				<div class="site-logo mobile-header-logo">
					<a href="https://humjam.com/" title="Hum JAM" rel="home">
						<img src="https://humjam.com/wp-content/uploads/2020/05/HumJAM-HomePage-Logo.png" alt="Hum JAM" />
					</a>
				</div>

And it seems the snippet created a phantom. See below:

`<div class=”inside-navigation”>
<div class=”site-logo sticky-logo navigation-logo”>
<a href=”https://humjam.com/&#8221; rel=”home”>
<img src=”” alt=”Hum JAM” />
</a>
</div>`

[Tom]

Hmm, the <a> element has a title, so the image itself shouldn’t have to.

However, if you need it to, try this:

add_filter( 'generate_navigation_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    return sprintf(
        '<div class="site-logo sticky-logo navigation-logo">
            <a href="%1$s" rel="home">
                <img src="%2$s" title="%3$s" alt="%4$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_url( apply_filters( 'generate_navigation_logo', $settings['sticky_menu_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

[Joseph]

Ahhh! Mobile! How can I add mobile to the script?

				<nav id="mobile-header" data-auto-hide-sticky="true" class="main-navigation mobile-header-navigation has-branding has-sticky-branding" itemtype="https://schema.org/SiteNavigationElement" itemscope>
			<div class="inside-navigation grid-container grid-parent">
				<div class="site-logo mobile-header-logo">
					<a href="https://humjam.com/" title="Hum JAM" rel="home">
						<img src="https://humjam.com/wp-content/uploads/2020/05/HumJAM-HomePage-Logo.png" alt="Hum JAM" />
					</a>
				</div>	

[Tom]

Same sort of thing:

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" rel="home">
                <img src="%3$s" alt="%4$s" title="%2$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

There should be a way to standardize this throughout the theme – will look into that.

[Joseph]

I need all of them including mobile. Is it possible to have the script do all three for me?

[Joseph]

I am good.. just enabled both snippets. I am new to this.

[Tom]

Glad you got it working 🙂

[Joseph]

Is there any drawback to both snippets being enabled instead of one long one that does it all? Since it is broken up into two? – don’t know if this affects the performance or not.

Thanks. You guys rock!

[Tom]

Not at all – it won’t affect performance 🙂

[Author]

Posts