[Support request] Display Hook element on Mobile only

[prakshah]

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

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

[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.

To understand recursion, you first have to understand recursion.

[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. 😀

A wise man once said:
"Have you cleared your cache?"

[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

To understand recursion, you first have to understand recursion.

[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

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

[Elvis]

Thanks David

To understand recursion, you first have to understand recursion.

[David]

You’re welcome

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

[Author]

Posts