[Resolved] Additional classes for Site Logo and Navigation Logo IMG

[David]

I been experimenting with adding additional classes to the img tag for the site and navigation logos. This documentation has helped. But my PHP skills are lacking, and i just need to add some classes to both logo img tags. Any simple solution?

regards

David

[Leo]

Hi there,

To the actual image tag and not to the logo container like the first example here?
https://docs.generatepress.com/article/generate_logo_output/#examples

If so you’d need to do this:

add_filter( 'generate_logo_output','lh_logo_img_class', 10, 2 );
function lh_logo_img_class( $output, $logo ) {
	printf( 
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img class="header-image MY-CUSTOM-CLASS" src="%3$s" alt="%2$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_logo', $logo ) )
	);
}

and for navigation logo:

add_filter( 'generate_navigation_logo_output','lh_navigation_logo_img_class' );
function lh_navigation_logo_img_class( $output ) {
	return sprintf(
		'<div class="site-logo sticky-logo navigation-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img class="header-image MY-CUSTOM-CLASS" src="%3$s" alt="%4$s" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		'YOUR LOGO URL',
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
}

[David]

Hi Leo,

thank you the site logo works. The nav logo is creating the same problem i had, i want to be able to add the logo in the customiser and not have to add it to the PHP

thanks

David

[Tom]

Give this a shot:

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

	$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" title="%2$s" rel="home">
				<img class="header-image MY-CUSTOM-CLASS" src="%3$s" alt="%4$s" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$settings['sticky_menu_logo'],
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
}

[David]

Thank you Tom and Leo, That did the trick

[Tom]

Glad we could help! 🙂

[David]

Hi Tom, sorry i missed one! So logo, nav logo and featured images are all filtered for the additional class. The one i am missing is the post-image in the post loop. Can this be filtered? Again i need to add a class to the img tag.

kind regards

David

[Tom]

You can see the filter here: https://github.com/tomusborne/generatepress/blob/2.0.2/inc/structure/featured-images.php#L25

Let me know if you need more info 🙂

[Author]

Posts