Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

UPDATE************ Well I have a working solution, although not ideal.

Using the Genesis sandbox child theme which has a mobile nav button built-in, I was able to set that to use the primary nav menu, so that takes care of minimised desktops.

I then added the responsive menu plugin which allowed me to choose my custom mobile menu for the source. Then I hid the plugin for desktop use, and hid the Genesis menu button for mobiles.

Will leave it a few days and then choose who gets the 50 points - thanks to all for your contributions...


(QUESTION RE-PHRASED) Trying to build a mobile version of my site.

2 themes, 1 for desktop and another just for mobile visitors (mobile theme selected automatically for mobile visitors with "any mobile theme plugin").

I have created a custom menu for each theme in wp admin / menus - desktop menu and mobile menu.

With the desktop theme activated I select the desktop menu for the primary navigation. With the mobile theme activated I set the primary navigation to mobile menu.

The problem is that I have to have the desktop theme active for normal operation. Mobile visitors do see the alternative mobile theme, but the navigation always follows whatever the desktop primary navigation is set to.

How can I stop this happening and force the mobile theme to always/only use the mobile navigation?

share|improve this question
    
did u wrote register_nav_menu() in functions.php of your mobile theme ?? –  Ammu Jul 30 at 6:58
    
Not specifically. In wp admin, I created 2 custom menus. 1 for the main desktop theme, and another for the mobile theme. With the desktop theme selected as the active theme in wp admin, the whole desktop experience works as desired. But when viewed on a mobile (which activates the mobile theme) the menu disappears. It reappears on the mobile only if I set the main desktop theme to use the mobile theme... Does that help? Thanks –  speedypancake Jul 30 at 7:42
    
*Note - the mobile theme was created using the Genesis framework and uses the Genesis dropdown mobile menu, in case that makes any difference??? –  speedypancake Jul 30 at 8:20
    
How are you switching from theme to theme? I assume some sort of php browser/device detection? My guess is that whatever theme switching code you have doesn't handle menus. –  The Maniac Jul 31 at 22:46
    
Post your code please –  Brad Dalton Jul 31 at 23:38

4 Answers 4

I do think that the days of creating a separate theme for mobile users are long gone. With proper planning and layout you can use one theme on desktops, laptops, tablets and mobile devices

I would tackle this is a much different way.

  • Firstly, I would create my theme in such a way it is responsive on according to the required screensize like normal. For examples see the bundled themes, specially as from twentytwelve

  • Use the wp_is_mobile() conditinal tag to load functions that will only be specific to mobile phones. I would also create a separte functions file just for my mobile functions to keep them organised. Example

    if(wp_is_mobile()) {
       //DO SOMETHING FOR MOBILE
    }else{
      //DO SOMETHING FOR EVERYTHING ELSE NOT MOBILE
    }
    
  • Create a spearate stylesheet just for your mobile styles, then enqueue this stylesheet conditionally using the wp_is_mobile() conditional tag. Just remember to add priority to your action so that whenever this stylesheet load, it loads dead last.

For the menu, I would also look at the bundled themes. I like the twentyfourteen menu and how it respond. All is handled by simple js from inside functions.js. You can make use of this and adapt it in your own theme. I have never worked with genesis, so I don't know what hooks ets they are using.

Also a great idea comes from this tutorial from wpmudev.org, which basically incorporates the Alberto Valero’s Sidr plugin for jQuery. I've used it in one of my twentyfourteen child themes, and it works great.

These are just a few alternatives you can consider. I hope some of this helps in solving your problem

share|improve this answer
    
Thanks for your comments and suggestions - will consider this today - cheers –  speedypancake Aug 1 at 9:42
    
No problem, as I said, these are just alternatives :-). Enjoy and I hope out of all these answers you can solve your problem. Cheers :-) –  Pieter Goosen Aug 1 at 9:46

Create 2 menus. One for display on mobiles and one as a default for desktops. Add this code in your header.php or you could use a hook in your functions file.

<?php
if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'theme_location' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'theme_location' => 'desktop-menu' ) );
}
?>

Or you could create 2 custom menus and use this code:

<?php
if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}
?>

Or you could switch themes conditionally:

add_filter( 'stylesheet', 'wpsites_change_themes' );
add_filter( 'template',   'wpsites_change_themes' );

function wpsites_change_themes( $theme ) {
    if ( wp_is_mobile() ) 
        $theme = 'my-mobile-theme';
    return $theme;
}
share|improve this answer
    
Thanks Brad - I'm trying your second suggestion, but it adds the mobile menu as well as the desktop menu. I suppose I could hide the desktop using css, but could it be replaced entirely? –  speedypancake Aug 1 at 7:53
    
You should correct your code. See if you can spot the wrong conditional :-) –  Pieter Goosen Aug 2 at 10:01
    
Could this be changed so that instead of introducing a new menu, it could replace the source/content of the existing (genesis) primary navigation menu? Thanks –  speedypancake Aug 2 at 11:25
    
Yes, you can modify the code to do that. –  Brad Dalton Aug 3 at 4:37
up vote 2 down vote accepted

After 5 days of googling, trial and error and umpteen plugins, I finally have a solution that works for me.

I've gone back to using a common theme for both desktop and mobile visitors, but each with their own custom menu. This was made easier for me because I'm experimenting with the Genesis framework and their "Sandbox" childtheme has a minimised / mobile navigation function built in. So I simply set the primary and mobile options to the desktop-menu.

To cater for mobile visitors, I installed the excellent "responsive menu" plugin: https://wordpress.org/plugins/responsive-menu/ This gives you the option to select a different custom menu for its source, so I set this to my mobile-menu.

Adding the responsive plugin means I ended up with 2 navigation menus showing, so I used a bit of conditional CSS to hide the responsive menu on the desktop and hide the Genesis menu for mobiles.

<?php if (wp_is_mobile() ): ?>
<style type="text/css">
.desktop-nav{display: none;}
#click-menu{display:block;}
</style>
<?php endif; ?>

Click menu is the div for the responsive menu. The "wp_is_mobile" function can be more accurately targeted by installing the mobble plugin if required.

I even added a page redirect for mobile visitors which takes them to my edited-down version of the home page:

function so16165211_mobile_home_redirect(){
if( wp_is_mobile() && is_front_page() ){
   wp_redirect( '/mobile-home' ); 
    exit;
    }
}
add_action( 'template_redirect', 'so16165211_mobile_home_redirect' );

So there you have it! It's an acceptable solution for me just now. Ideally I'd be able to offer mobile visitors the option to choose the mobile or desktop experience, but that seems to involve setting cookies which may well be a question for another day.

Thanks again to ALL who took the time to respond - especially those who suggested that having 2 different themes wasn't the best approach.

share|improve this answer
    
Thanks for posting your solution. +1 It is a pleasure and glad I could be of help. Enjoy :-) –  Pieter Goosen Aug 3 at 15:36

Its quite odd to have two themes running like you describe, but I think we can figure this out.

In both themes, wherever your menu is printed (probably header.php) you'll need some code like this that chooses the correct menu, then prints it:

$desktop_theme_name = 'Desktop Theme Name'; // Replace this with the name of the desktop theme
$mobile_theme_name = 'Mobile Theme Name'; // Replace this with the name of the mobile theme

// Get the current theme's information
$current_theme = wp_get_theme();

if ( $current_theme->Name == $desktop_theme_name ) {

    // Print desktop menu
    // NOTE: Instead of using "theme_location" use "menu"

    wp_nav_menu( array(
        'menu' => 'Desktop Menu', // Replace this with the name, slug, or ID of your desktop menu
        // Rest of menu options if needed
    ) );

} else if ( $current_theme->Name == $mobile_theme_name ) {

    // Print mobile menu

    wp_nav_menu( array(
        'menu' => 'Mobile Menu', // Replace this with the name, slug, or ID of your mobile menu
        // Rest of menu options if needed
    ) );

} else {

    // Not using one of the special themes, so just print the menu!

    wp_nav_menu();

}

Hope that helps, good luck!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.