[Support request] Display Hook element on Mobile only

[Praveen]

Hi guys,

I am planing to put banners in header and footer of website using hooks. But the challenge is the desktop banner is wide while the one on mobile is square.

Is there a way I can just display an image on Mobile and another one only on Desktop ?

I am fine adding two hooks for it, if needed.

[David]

Hi there,

there is the wp_is_mobile() function that could be used to filter out which element to display, but is unreliable as server page caches may cache the desktop version and display that on mobile..

Instead you would wrap your content in a <div> and use the hide-on-* classes to show hide which one for each device. This article explains:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Elvis]

I have used wp_is_mobile() in my custom themes extensively. However I am not a heavy cashing kinda guy so it might be that is the reason why it worked.

I am building a bottom nav bar/quicklinks toolbar for a mobile site version, and I am thinking to do it this way.

function prefix_mobile_quicklinks() {
	if ( wp_is_mobile() && function_exists( 'generate_after_footer' ) ) :
	  	do_action( 'mobile_quicklinks' );
	endif;
}

add_action( 'generate_after_footer', 'prefix_mobile_quicklinks' );

It works on my local install, but I wonder. Is this the right way? Regarding caching, does generatepress use some caching I should worry about for this? Any other warnings? SEO?

Thanks.

[Elvin]

It works on my local install, but I wonder. Is this the right way? Regarding caching, does generatepress use some caching I should worry about for this? Any other warnings? SEO?

There’s an option to cache CSS generated by the customizer but that’s it.

For SEO, the flags will depend on the added content. SEO’s usually about semantics. It’s about label attributes so if the things you’ll hook into that mobile_quicklinks are properly labels then it should be all good. 😀

[Elvis]

Thanks Elvin,

regarding SEO I was thinking weather the changing DOM depending on mobile vs desktop, could have negative impact on SEO? Regardless of the semantics of that element.

Best,
Elvis

[David]

Probably a question for an SEO expert … but i can’t see there being an issue unless the intention was to replace the majority of the page content on a specific device. Its quite common to see DOM elements being injected for specific purposes such as UI

[Elvis]

Thanks David

[David]

You’re welcome

[Author]

Posts