Mobile

Mobile Theme Creation

Live themes are stored in /files/pluginbuddy_mobile/THEMENAME/ (multisites) OR /wp-content/uploads/pluginbuddy_mobile/THEMENAME/ . You should always edit the theme files in these directories.

Non-live original theme files (backups and originals) are stored in /wp-content/plugins/mobile/themes/THEMENAME/ You should never edit the files in this directory.

If you would like to edit an existing theme you may do so by editing the live theme files. If you do this we suggest unchecking the option in Settings for automatically upgrading theme files on automatic upgrades to prevent your changes from being lost. Style manager edits create a CSS file within /files/pluginbuddy_mobile/THEMENAME.css (multisites) or /wp-content/uploads/pluginbuddy_mobile/THEMENAME.css so that these changes will not be lost on upgrades.

To create a new theme you can just clone an existing theme to /files/pluginbuddy_mobile/THEMENAME/ (multisites) or /wp-content/uploads/pluginbuddy_mobile/NEWTHEMENAME/


Additional Head HTML (includes Apple icon definitions)

if ( defined('MOBILEBUDDY_HEAD_CONTENT') ) {
   echo MOBILEBUDDY_HEAD_CONTENT;
}


Link to Full Site

if ( defined('MOBILEBUDDY_FULL_SITE_LINK') ) {
   echo '<a href="' . add_query_arg( 'nomobile', '', str_replace( 'mobile', '', $_SERVER['REQUEST_URI'] ) ) . '">View Full Site</a>';
}

Customize Mobile

Remove Footer Link

You can remove or change the footer text and/or link that is shown to all mobile users by default.

  • 1: To remove OR change that footer, edit the footer.php file in the appropriate theme folder, depending on which Mobile theme you are using. That file will be in one of the theme directories in either of the following directories:
    • wp-content/uploads/pluginbuddy_mobile
    • OR (on Multisites) wp-content/blogs.dir/X/files/pluginbuddy_mobile (change the X to the appropriate site number)
  • 2: Find line 12 of the footer.php to what you want. It currently says
    Mobile Site By <a href="http://pluginbuddy.com/">PluginBuddy</a><br />
  • 3: Change the above to anything you wish to be shown OR hidden from the mobile users in question who will be viewing that theme.

Change the Default Home Page

This applies if your site is not using a specific page as the homepage (set through wp-dashboard > Settings > Reading)

There is currently no setting to set a specific homepage for the mobile version of your site. You can however change this using the following steps:

1: Create a new page in WordPress with your mobile home page content. Make sure NOT to include that page in your non-mobile theme's navigation. For the sake of these instructions, let's say you created a page with the page slug "mobile-home"

2: Create a new navigation menu (wp-dashboard > Appearance > Menus), and add a custom menu item named "Home" (or whatever you wish to call it) linking to http://www.yoursite.com/mobile-home/ (the page create at #1)
Set this new menu as the default menu for " PluginBuddy Mobile Navigation Menu "

3: edit index.php in your mobile theme and add the following line at the very top:

<?php wp_redirect( 'http://www.yoursite.com/mobile-home/', 302 ); exit; ?>

Note that you need to use FTP or your hosting filemanager to access and edit the index.php file of your mobile theme. You should edit the file that exists in wp-content/uploads/pluginbuddy_mobile/{theme you are using}/

That should make sure that the home link on your mobile site, as well as the landing page resolves to your mobile homepage

Change the Default Home Page When Using a Specific Landing Page

This applies if your site is using a specific page as the homepage (set through wp-dashboard > Settings > Reading)'

There is currently no setting to set a specific homepage for the mobile version of your site. You can however change this using the following steps:

1: Create a new page in WordPress with your mobile home page content. Make sure NOT to include that page in your non-mobile theme's navigation. For the sake of these instructions, let's say you created a page with the page slug "mobile-home"

2: Create a new navigation menu (wp-dashboard > Appearance > Menus), and add a custom menu item named "Home" (or whatever you wish to call it) linking to http://www.yoursite.com/mobile-home/ (the page create at #1)
Set this new menu as the default menu for " PluginBuddy Mobile Navigation Menu "

3: find the page id for the page that you have set as the homepage for your non-mobile site (e.g. page-123)

4: create a new file in you mobile theme and add the following code:

<?php wp_redirect( 'http://www.yoursite.com/mobile-home/', 302 ); exit; ?>

Save that file, and name it page-123.php .

Note that you need to use FTP or your hosting filemanager to add page-123.php file to your mobile theme. It should go in wp-content/uploads/pluginbuddy_mobile/{theme you are using}/

Advanced Technical Support for Mobile

Mobile: Error Codes

9001

ERROR: WordPress 2.9.0 or newer is required for PluginBuddy Mobile.

Mobile requires that it run on WordPress 2.9.0 or newer or it may encounter fatal errors. WordPress 3.0 provided maximum functionality with custom menus. Upgrade WordPress to correct this error. This is caused by a reliance on get_site_transient()

Error Messages

Call to undefined function get_site_transient() in /www/wp-content/plugins/mobile/public.php on line 32

  • See ERROR CODE #9001 on Mobile:_Error_Codes
  • The user is using an older version of WordPress, ie 2.7, that does not support some required capabilities to function. Upgrade to a modern version of WordPress. See the WordPress roadmap for versions and their release dates.

Fix for iPhone IOS 7

Due to IOS 7 complications, there have been changes made to iThemes Mobile to allow compatibility.

1.) If you have a custom header you will need to re-size the header and re-upload. Now there is a fancy setting on the mobile theme Style Manager page called "Upload header specifically for iPhone IOS 7." Just tick the checkbox like shown above and upload a header file with the recommended dimensions. This will then only show the file you uploaded when viewing your site with a Apple iPhone running IOS 7.

2.) Note: This is only if you have custom styles added to your mobile theme style.css. If you do not have the option on the settings page "Upgrade themes on automatic upgrade" checked, then you will have to copy some of the code from the header.php and functions.php to make your mobile theme IOS 7 compatible. 

2a.) Here is a sample theme that has the code included to support IOS7. File:Banner-Sample.zip For your mobile custom theme to support IOS 7 it needs code changes in functions.php and header.php for it to work properly. First copy the code down below or in Banner-Sample/function.php from line 54 to the end of the file and then paste the code you copied to the end of your functions.php. Now that you have the code in your functions.php we can add the code to your header.php.

function it_is_ios7( $ipad_enable ) {
    if ( true == $ipad_enable ) { 

        if ( false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPhone OS 7_' ) || false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPad; CPU OS 7_' ) || false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPod touch; CPU iPhone OS 7_' ) ) {
                return true;
        } else {
                return false;
        }

    } else {
        if ( false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPhone OS 7_' ) || false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPod touch; CPU iPhone OS 7_' ) ) {
                return true;
        } else {
                return false;
        }
    }
}

function it_add_stylesheet() {
    $it_iphone_options = array();
    $it_iphone_options = apply_filters( 'grab_iphone_ops', $it_iphone_options);
    if ( false !== it_is_ios7( $ipad_enable = false ) ) { 
        ?>
        <link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') . '/style.css'; ?>" media="screen" />
        <style type="text/css">
            #header {
                font-size: 1.1em;
                clear: both;
                width: 100%;
    <?php 
        if ( !empty( $it_iphone_options['iphone_header_height'] ) ) {           
            echo 'height: ' . $it_iphone_options['iphone_header_height'] . ';' . '\n';  
            } else { ?>
                height: 103px;
        <?php } ?>
            }
            #navbutton {
                position: absolute;
    <?php 
        if ( !empty( $it_iphone_options['iphone_navbutton_margin'] ) ) {
            echo 'margin: ' . $it_iphone_options['iphone_navbutton_margin'] . ';' . '\n';
            } else { ?>
                  margin: 40px 0 0 270px;
    <?php   } ?> 
         
            }

    <?php    
            if ( !empty( $it_iphone_options['iphone_custom_styles'] ) ) {
                echo $it_iphone_options['iphone_custom_styles'];
            } ?>
            
         </style>
<?php    } else { ?>
        <link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') . '/style.css'; ?>" media="screen" />
<?php    }       
}

function it_add_viewport() {
    if ( false !== it_is_ios7( $ipad_enable = true ) ) { ?>
        <meta name="viewport" content="initial-scale=1.0"/>
<?php    } else { ?>
        <meta name="viewport" content="width=480px;"/>
<?php  }

}

function it_add_navbutton() {
    if ( false !== it_is_ios7( $ipad_enable = false ) ) { ?>
        <a id="ithemes_show_menu"><img id="navbutton" src="<?php echo bloginfo('stylesheet_directory') . '/images/IOS7arrow-d.png'; ?>" /></a>
<?php    } else { ?>
        <a id="ithemes_show_menu"><img id="navbutton" src="<?php echo bloginfo('stylesheet_directory') . '/images/arrow-d.png'; ?>" /></a>
<?php    }
}
?>

2b.) Note: Only use this code if you have copied the code above into your functions.php. Here are the three lines you need to edit and the php functions you need to replace them with:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

replace with:

<?php it_add_stylesheet(); ?>

 

<meta name="viewport" content="width=480px;"/>

replace with:

<?php it_add_viewport(); ?>

 

<a id="ithemes_show_menu"><img id="navbutton" src="<?php bloginfo('stylesheet_directory'); ?>/images/arrow-d.png"/></a>

replace with:

<?php it_add_navbutton(); ?>

2c.) After getting all the code right you need to copy the image mobile/themes/Banner/IOS7arrow-d.png to the images directory of your custom theme. If you cant find it, then the image is also included in the sample theme above.

That's it. After you have added the required code your custom mobile theme will now support IOS 7. 

Plugin Conflicts

The following plugins are known to cause conflicts with OR in Mobile. You can either disable the following plugins, upgrade them to their latest versions OR let their development team know about this. Mobile works perfectly when such plugins (or some certain versions of them) are not active.

  • SexyBookmarks (by Shareaholic) - Version 4.0.6.2
    • Dropdown menu has been confirmed to not work properly with this version
Powered by Zendesk