How to display particular content to mobile users in WordPress

This guide illustrates how to display particular content to mobile users in WordPress.

To display particular content to mobile users in WordPress, you can use several methods to detect the user’s device and display personalised content.
Below are some effective approaches:

1. Use a WordPress Plugin:
   Plugins make it easy to detect mobile devices without coding.
   1. Recommended Plugins:
      1. WP Mobile Detect: Allows you to display or hide content based on the device.
      2. Mobile Content: Offers shortcode-based control to display mobile-specific content.
   2. How to Use WP Mobile Detect:
      1. Install and activate the plugin.
      2. Use shortcodes in your posts or pages:

         [notdevice]Content for desktops[/notdevice]
         
         [mobile]Content for mobile users[/mobile]

2. Use Custom CSS with Media Queries:
   You can hide or display content using CSS for different screen sizes.
   Steps:
   1. Add a custom CSS class to your content block in the WordPress editor.
   2. Add media queries to your theme’s custom CSS:

      .mobile-only {
      
      display: none;
      }
      
      @media (max-width: 768px) {
      
      .mobile-only {
      
      display: block;
      
      }
      
      .desktop-only {
      
      display: none;
      
      }
      
      }

3. Use PHP Code in Theme Files:
   For advanced customization, use conditional PHP code to detect mobile devices.
   Steps:
   1. Add this code to your theme’s functions.php file:

      function is_mobile_device() {
      
      return wp_is_mobile();
      }

   2. Use this function in your theme files to show content:

      <?php if (is_mobile_device()) : ?>
      
      <p>Content for mobile users.</p>
      <?php else : ?>
      
      <p>Content for desktop users.</p>
      <?php endif; ?>

4. Use Page Builders:
   If you use a page builder like Elementor, Divi, or WPBakery:
   1. Select the section or widget you want to customize.
   2. Adjust visibility settings to show or hide content for mobile, tablet, or desktop.
5. Use JavaScript
   JavaScript can also detect device types dynamically.
   1. Add this script to the customizer or theme:

      if (/Mobi|Android/i.test(navigator.userAgent)) {
      
      document.getElementById('mobile-content').style.display = 'block';
      } else {
      
      document.getElementById('desktop-content').style.display = 'block';
      }

   2. Structure your content with IDs:

      <div id="mobile-content" style="display:none;">Content for mobile</div>
      
      <div id="desktop-content" style="display:none;">Content for desktops</div>

6. Responsive Design Approach:
   Design content responsively to adapt to different devices rather than showing specific content for mobile users only. This ensures a seamless experience across all platforms.

In such a manner, you will be able to display particular Content to Mobile Users in WordPress. Choose a method based on your technical comfort level. For quick and easy implementation, plugins are ideal. For full control, CSS or PHP are excellent options. Test thoroughly to confirm the mobile-specific content displays correctly.