Display Hook element on Mobile only

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

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.

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. :D

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

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

Thanks David

You're welcome