[Support request] Different or dynamic home page depending on the device on mobile/tablet/desktop

Home Forums Support Different or dynamic home page depending on the device on mobile/tablet/desktop

  • This topic has 3 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1211743
    Kir29 LLC

    Hi,

    We are currently working on a full redesigning our home page and due to some limitations with the Smart Slider 3 PRO pluging that we are using (https://smartslider3.com/) we may need to have different components and content loaded depending:

    1) The device the user is using (mobile/tablet/desktop)
    2) The country / city the user is browsing from

    Could you please advise what/how would you recommend to implement 1) and 2)

    Thank you

    #1211848
    David
    Staff
    Customer Support

    Hi there,

    1. WP includes the wp_is_mobile() function you could include within your development:

    https://developer.wordpress.org/reference/functions/wp_is_mobile/

    Or a plugin like this that provides shortcodes to wrap content for device conditions:

    https://wordpress.org/plugins/wonderplugin-conditional-display/

    2. You would need a Geo Location plugin eg.

    https://en-gb.wordpress.org/plugins/geotargeting/

    #1212755
    Kir29 LLC

    Hi again,

    We were looking for recommendations using the Appearance / Elements in GeneratePress. This will be embedded in our Home page so we would like to avoid using more plugings to speed up the load.

    Could you share any code examples for 1) and 2) using the Appearance / Elements?

    Thank you

    #1212934
    David
    Staff
    Customer Support

    Geo targeting isn’t something i can help with – its rather specialist and would require a plugin.

    Without using a plugin Hiding / Displaying elements based on device can be done with CSS or the wp_is_mobile() function.

    1. CSS – use the GP hide-on-* classes in your HTML:
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    Eg.

    <div class="hide-on-desktop">
        <!-- This content is for Mobile and tablet size devices only -->
        <!-- Add your code here -->
    </div>
    
    <div class="hide-on-mobile hide-on-tablet">
        <!-- Desktop size devices only -->
        <!-- Add your code here -->
    </div>

    2. Within the Hook Element only you can use the wp_is_mobile() function:

    <?php
    if ( wp_is_mobile() ) {
        // Code added here will only display on Mobile devices 
    }
    ?>

    For content on Desktop only the condition becomes:

    <?php
    if ( !wp_is_mobile() ) {
        // Code added here will only display on NON Mobile devices 
    }
    ?>
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.