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

[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

[David]

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/

[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

[David]

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

[Author]

Posts