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

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/

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

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