Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

2 menus needed - One for desktop users, one for mobile users WordPress

  • SOLVED

Hi,

I'm new to the Wordpress world need to know how to create 2 different menus so that depending on whether they a visitor is a desktop or mobile user will determine which menu they will see. Desktop users users will need navigate to certain pages and mobile users navigate other pages.

I have had a look around for an answer, and a similar issue seems to have been resolved here... http://wpquestions.com/question/showLoggedIn/id/3396, so it is possible?

Answer away please!



Answers (3)

2011-11-23

Francisco Javier Carazo Gil answers:

Hi Zammit,

I'm going to add a detail to Luis Abarca have said. Besides you can choose the theme_location depends on user-agent (mobile or not) you can choose differente menu.


if ( is_mobile() )
{
wp_nav_menu( array('theme_location' => 'primary-mobil', 'menu' => 'Mobile menu' ) );
}
else
{
wp_nav_menu( array('theme_location' => 'primary', 'menu' => 'Desktop menu') );
}


You can also make your own menus directly from HTML and PHP:


if ( is_mobile() )
{?>
<div id="navmenu" class="mobile-menu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<li><a href="about-mobile/">About</a></li>
<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>
<?php}
else
{?>
<div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<li><a href="about/">About</a></li>
<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>
<?php}


Luke Zammit comments:

Hi Guys,

Tried implementing both ideas - separately , but keep getting errors.

Francisco would you consider implementing your resolution for me and then letting me know which file I need to edit to hard code the links in to?

If yes, I can provide log in details.

Cheers


Francisco Javier Carazo Gil comments:

Hi Zammit,

If you want, send me credential via PM and tell me details.

2011-11-22

Luis Cordova answers:

yes so the only difference will be that you will be using the touch phone plugin and in the theme there you use its detecting sentence with this solution http://wpquestions.com/question/showLoggedIn/id/3396


Luis Cordova comments:

WP touch or such is the name of plugin


Luke Zammit comments:

Sorry to be dense.. so in the header.php I will need to add a detection sentence like:


if( 1 == 1 ) { // Some code to determine if it is a mobile user

$theme_location = '?';

} else {

$theme_location = '?;

}

wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => $theme_location ) );



Was that the solution in the end?

2011-11-22

Luis Abarca answers:

Yep, create 2 menus

// functions.php

register_nav_menus( array( 'primary' => 'Main Menu', 'primary-mobil' => 'Mobil Menu' ) );

function is_mobil()
{

$mobile_browser = 0;

if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobile_browser++;
}

if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
$mobile_browser++;
}

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda ','xda-');

if (in_array($mobile_ua,$mobile_agents)) {
$mobile_browser++;
}

if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
$mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
$mobile_browser = 0;
}

return $mobile_browser;

}



In your theme


$theme_location = 'primary';

if ( is_mobile() ) {
$theme_location = 'primary-mobil';
}

wp_nav_menu( array('theme_location' => $theme_location ) );