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.

I really like the idea to switch themes for mobile devices and am using jetpack for several feature on my website, So I thought, why not use it for mobile devices as well. Jetpack comes packed with a feature that switches themes for mobile devices, but it is only possible to use their theme and adjust some things like bg colour etc.. I was wondering is it possible to completely change this theme? So use jetpack to detect device, yet use your own mobile theme? That would stay like that after any updates.

share|improve this question

closed as off-topic by birgire, Pieter Goosen, G. M., kaiser Sep 22 at 16:04

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

    
What did you find in your research? Have opened the plugin files to check how it works? –  brasofilo Jun 1 '13 at 23:34
    
@brasofilo Found out that there is such things as jetpack mobile template, and that it can be edited slightly, not fully as a whole new template. I understand that I can change the files manually, no problem with that, but wouldn't an update completely destroy it? –  Ilya Knaup Jun 1 '13 at 23:38
    
Yes, sure. I can't test it right now, but looks the only option is remove the filters on minieleven.php and add your own. –  brasofilo Jun 1 '13 at 23:55

2 Answers 2

up vote 2 down vote accepted

I see 3 ways to edit Jetpack Mobile theme:

1. Use Jetpack's Custom CSS module

Jetpack includes a module named "Custom CSS" that allows you to add your own custom CSS without having to edit your theme stylesheet. The custom CSS editor (under Appearance > Edit CSS) also includes an option to include this custom CSS in Jetpack's mobile theme.

You could consequently customize the look of the Mobile theme by adding your custom CSS code there. You can use the .mobile-theme class to target only the Mobile theme.

2. Add your own custom stylesheet to the Mobile theme

If you don't want to use the Custom CSS module, you could load a specific stylesheet only in Jetpack's mobile theme, like so:

// Check if we are on mobile
// Props @saracannon http://ran.ge/2012/12/05/parallax-and-mobile/
function tweakjp_is_mobile() {
    // Are Jetpack Mobile functions available?
    if ( ! function_exists( 'jetpack_is_mobile' ) )
        return false;

    // Is Mobile theme showing?
    if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
        return false;

    return jetpack_is_mobile();
}

// Let's add our custom stylesheet
function tweakjp_maybe_add_css() {

    // On mobile?
    if ( tweakjp_is_mobile() ) {
        wp_register_style( 'custom-mobile', plugins_url( 'style.css', __FILE__) );
        wp_enqueue_style( 'custom-mobile' );
    }
}
add_action( 'wp_enqueue_scripts', 'tweakjp_maybe_add_css' );

3. Edit Jetpack's plugin files to make your changes

No limits there, but all your changes will be overwritten when you update to the next version of Jetpack. I wouldn't recommend it.

share|improve this answer

I know it's an old question, in case anyone is still looking -- you don't have to activate jetpacks mobile theme module to access the mobile detection built into the plugin, no need to edit the jetpack plugin files, keeping things much more update safe.

//load JetPack Mobile Detection
$detect = new Jetpack_User_Agent_Info(); print_r($ua_info);
//Check if we are on Windows Phone 8 (Yes that's right, Windows Phone)
function is_wp8_detect() {
    global $detect;
    if ($detect->is_windows_phone_8()){
        return true;
    } 
}

i.e. with this function I can now do whatever I want throughout my theme or plugin only just for Windows Phone users.

  • I should not that the following comment is in the Jetpack plugin referring to the files that load all the modules classes, including what is needed in the above code; so beware.

    // @todo: Only include things like class.jetpack-sync.php if we're connected.

share|improve this answer

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