[Support request] Display Hook element on Mobile only

Home Forums Support [Support request] Display Hook element on Mobile only

Home Forums Support Display Hook element on Mobile only

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1623073
    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.

    #1623556
    David
    Staff
    Customer Support

    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

    #2107921
    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.

    #2107930
    Elvin
    Staff
    Customer Support

    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?"

    #2107990
    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.

    #2108104
    David
    Staff
    Customer Support

    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

    #2108175
    Elvis

    Thanks David

    To understand recursion, you first have to understand recursion.

    #2108179
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.