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)
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.
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?
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 ) );