How to Display a Joomla Module Only on Mobile Devices

We are getting an increasing number of clients telling us that they want to display certain modules only for mobile devices (and some other modules only for computers). This is very normal, since all websites are seeing a dramatic increase in mobile traffic, a fact that is causing businesses to target mobile visitors with some different content (such as different advertisements) in order to increase conversions.

In this post, we will explain exactly how we do this in a very clean way. Without further delay, let’s start!

• We first open the file index.php located under the templates/[template-name] folder and we add the following function immediately after the defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); line:

  function isMobileTraffic(){
  	$arrMobileAgents = array('android', 'blackberry',
  	'googlebot-mobile', 'ipad', 'iphone', 'ipod', 'mobi',
  	'mobile', 'opera mini', 'safari mobile', 'windows mobile');
  	$strCurrentUserAgent = $_SERVER['HTTP_USER_AGENT'];
      foreach ($arrMobileAgents as $strMobileAgent) {
  		if (stripos ($strCurrentUserAgent, $strMobileAgent) !== FALSE) {
  			return true;
  		}
  	}
  	return false;
  }

  The job of the above function is to detect whether the traffic is coming from a mobile device. If it is, then the function will return true. If not, then it will return false. Please note that the above function is not exhaustive, so it might be that there are some rare user agents that are not taken into consideration (in that case, the function will treat traffic coming from these devices as desktop [computer] traffic).

• After adding the above function, we add the mobile exclusive position to the template; we just locate the position where we want to add the module and we add the following code:

  <?php if (isMobileTraffic()) { ?>
  <div id="mobile-module-1">
  	<jdoc:include type="modules" name="mobile-module-1" style="raw" />
  </div>
  <?php } ?>

• Once the above is done, we create a module (it can be of any type), and then we assign it to the mobile-module-1 position. Once that is done, the website will display that module only for mobile traffic! Easy, huh?

But what if we already have a template that is dedicated for mobile traffic?

In this case, you only need to create a unique position (e.g. a position that doesn’t exist in the non-mobile template) in the index.php of the mobile template, and you’re all set! (you don’t have to add the function above to the beginning of the index.php file.)

We have tried to make this guide as clear as possible. But, it is impossible for us to make it code free. If you’re not a programmer and you need help implementing the above, then all you need to do is to contact us. Our fees are super affordable, our work is super fast, and we are super professional!