Mobile Pro Documentation by Sitebase v1.4.1


Mobile Pro

Created: 13-07-2011
By: Sitebase (Wim Mostmans)
Email: wim@sitebase.be

Informations about Updates and New Scripts are always announced on Twitter, Facebook and LinkedIn.

Wim Mostmans Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here or on Twitter. Thanks so much!

Sitebase


Table of Contents

  1. Description
  2. How to install
  3. Pages
  4. Plugins
    1. Contact
    2. Gallery
    3. Google Analytics
    4. Remote Page
    5. Rss News
  5. Create plugins
  6. Create themes
  7. Changelog
  8. FAQ
  9. Updates
  10. Support notes

Descriptiontop

This application helps you to create in no time a mobile version of a website. This script supports all major devices like iPhone, Blackberry, Android devices, PSP, PDA's, Windows mobile, Opera mini devices and other generic devices.

With this script there is no need for you to create a subdomain for your mobile website. This script detects if the visitor is using a mobile device and then shows the mobile website if needed.

To implement this script on your website you only need to include one file in the index.php file of your website. This way it’s possible to use this on any kind of website: WordPress, Joomla, Drupal or just custom written.


How to install top

The installation of this script is incredibley easy. Follow these steps an you'll have your mobile website up and running in no time.


Pages top

If we take a look in the pages directory we see all the pages that our website contains. There are two important files that always need to exist in the pages directory:

If you open the home.php file in a text editor you will see some code like:

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

As you can see in the above code you put every content part in a div with class content. If you want to put a menu in that specific content part you'll also add the class nopad. Below you see the image that shows the visual parts:

How to download an update
Mobile website structure

You can link to other website pages like you would do in a normal website. If you want to link to a specific other page that you created under the pages directory. For example portfolio.php. You're link would look like this index.php?mpage=portfolio. So always use this index.php?mpage= part, plus the name of the file you want to link to without the .php extension. You can also use extra parameters if you want, for example index.php?mpage=portfolio&item=1.

The Mobile Pro script will now automaticly convert these link to a ajax version when the device supports advanced javascript. For example on iPhones, Androids or BlackBerry's.

Mobile Pro has also some handy constants that you can use in your pages/plugins/themes. Below you find a list these constants:

There are more constants but these will only be interesting for developers. To see the full list open the mobile/bootstrap.php file and take a look at line 45 and below.

Some of these constants will be very handy. For example if you want to place a back button on a page you'll use the following code:

<a href="<?php echo URL_PREVIOUS_PAGE ?>">back</a>

In the video below I show you how to add your own html page to your mobile website.

Add custom page to the mobile site


Plugins top

To make it more easy to create pages with some advanced content, we made Mobile Pro plugin ready. So now you can build your own, or re-use plugins from other developers.For more information about plugin development see here.

I already included 4 plugins that will come in handy when building Mobile websites. Below you find a overview of the different plugins and how to use them.

Contact

First we need to set in our config file that we gonna use the Contact plugin. This is done by adding the following line to the config file:

MobileBase::registerPlugin('Contact');

Now we can use the contact shortcode to place the contact form somewhere in a page. Open the page where you want to place the contact form and add the following code.

[contact to="my@email.com"]

Now replace the to e-mail with a e-mail address of choise and you are ready.

First we need to set in our config file that we gonna use the Gallery plugin. This is done by adding the following line to the config file:

MobileBase::registerPlugin(Gallery);

We can choose to define the images you want to use as parameter of the registerPlugin. This is perfect if you only need one gallery in your mobile website. If you want more than one mobile gallery you can also choose to define the images as a comma separate list with parameter image.

      [gallery images="http://www.site.com/image1.jpg,http://www.site.com/image2.jpg,http://www.site.com/image3.jpg"]
      

If you only need one gallery you can better use this in the config:

MobileBase::registerPlugin(Gallery, array('images' => array(
    'http://www.site.com/image1.jpg',    
    'http://www.site.com/image2.jpg',    
    'http://www.site.com/image3.jpg',
)));

And on your page you then use a shortcode without parameters:

[gallery]

Google Analytics

First we need to set in our config file that we gonna use the Google Analytics plugin. This is done by adding the following line to the config file:

MobileBase::registerPlugin(GoogleAnalytics, array('code' => 'UA-xxxxxx-x'));

Replace the UA-xxxxxx-x with your Google Analytics UA code and that's it.

Remote Page

This is definitly the most powerfull plugin of them all. With this plugin you can load remote content of your regular website. The advantage is that you then can just edit the content of your mobile website with the CMS you use for your normal website. Doesn't matter if it's WordPress, Drupal, Joomla or another CMS. First we need to set in our config file that we gonna use the Remote page plugin. This is done by adding the following line to the config file:

MobileBase::registerPlugin(RemotePage);

Now we can use the remote page shortcode. This shortcode has 4 parameters.

An example would be:

[remote-page page="http://computerfaq.be/layouts-leren-slicen-met-photoshop/" selector="div.content"]

Below you find an overview of some other selectors that you can use:

Attribute filters

RSS News

First we need to set in our config file that we gonna use the RSS Newsplugin. This is done by adding the following line to the config file:

MobileBase::registerPlugin(RssNews);

Now we can use the rss-news shortcode to place news page somewhere in a page. Open the page and add the following code where you want the news overview to be placed.

[rss-news feed="http://codecanyon.net/feeds/users/Sitebase"]

Keep in mind to place this shorttag in a div with class content and nopad. The nopad is needed because the result of this shortcode will be a menu.

[rss-news feed="http://codecanyon.net/feeds/users/Sitebase"]

Create plugins

Creating your own plugin is pretty easy. As long as you have some basic understanding of OO programming you shouldn't have a problem with this. First I'll give you and overview of what methods/properties you can use in your plugin, and then we'll make an example plugin.

Properties

Methods

Overwrite

Create an example plugin

First you create a new folder under the plugins directory with the name of your plugin. Give your folder for example the name 'HelloWorld'. Now open this folder and add a file HelloWorld.php to it. We will add three parts to our plugin:

Create the shortcode part of the example plugin

Move the HTML part of your plugin to a view

Add Hello World alert box to the plugin

Modify Mobile Pro website with filterContent method

The complete source of the Hello World plugin can be downloaded here.


Create Themes top

If you want to create you own theme you just follow the same steps like you would make a normal website. Design your website in Photoshop, Fireworks or another application. Convert that design to CSS/HTML. Now convert your website to a Mobile Pro theme by making a copy of the clean theme and integrating your own CSS/HTML and images in this copy. This is much easier than starting from scratch.

Your theme has only one php file, and that is the index.php. The rest of the content pages is located in the pages directory. On the place where you want to load the pages you set the following code in your index.php file:

$this->load('body');

You do the same for your footer to load the copyright template.

$this->load(copyright);

There are also some handy constants that you can use in your theme to load CSS/JS and images. For example the URL_THEME constant holds the location to your theme directory. So to load an extra CSS file in your theme you could add the following code to the head of your theme.

<link type="text/css" href="<?php echo URL_THEME ?>/css/style.css" media="screen" rel="stylesheet" />

Another usefull constant is URL_HOME. This can be used to link to the home page.

You can also use options that are set in the config.php file, in your theme. For example to set the title of your theme based on the title option in the config.php file you would use this code:

<title><?php echo $this->getOption('title'); ?></title>

Device selectors

Depeding on the device there is also an extra class added to the body. One of the following classes will be added to the body:

Thanks to these classes you can style content based on the device. For example if you want links in red when the mobile site is viewed on a iPhone, you'll add the following code to your theme:

.iphone a { color: #F00; } 

Changelog top

v1.4.1 (13/07/2011)
* Fix character problems on home screen
* Fix load problems in gallery plugin

v1.4.0 (01/07/2011)
* Application bookmark mode
* Remote plugin wrong selector error is now handled in a clean way
* Remote plugin now also supports relative urls (base_url parameter added)
* Multiple instances of remote page plugin on one page

v1.3.0 (16/06/2011)
* Www crossdomain problem fixed
* Added mobile IE cleartype
* Added global header part, handy for creating new themes
* Added types for BlackBerry and Nokia phones

v1.2 (05/05/2011)
* Did some random changes and fixes 

v1.1 (27/04/2011)
* Included the PSD for the mobile candy theme 

v1.0 (26/04/2011)
* Initial version released

FAQ top

My mobile website doesn't display special characters correct

Try to switch to another charset in the config.php file. For example try to set it to utf-8 or ISO-8859-1

When I click on a page the page fade out but the new pages doesn't display, how can I fix this?

This is probably a cross domain problem. That is because you used a different url in your config file and in the url that you use to load the mobile site. See the video below.

Fix page load problem

Can I this script when I use .html files?

Yes, that’s possible. Rename your index.html to index.php and then follow the documentation file to install the script in your index.php file.

For people like me who dont have an iphone or blackberry , how to check whether this works or not for thier site?

You can add ?mobilepro to the url to force the mobile layout to show in a regular browser. But keep in mind that Mozilla and IE sometimes render the HTML and CSS differently than for example the iPhone browser.

I’m getting the following:
Warning: Cannot modify header information – headers already sent by (output started at …...) in ….. on line …

The mobile/bootstrap.php include must be the first line of code you do in your website index.php file. If that's that case you can also try to add ob_start() before the include like shown in the following code:

 <?php   
ob_start();
include "mobile/bootstrap.php";
?>

Does this support iPod Touch?

Yes :)

Is this just for wordpress (or can it be used for anything)?

You can use it for all your PHP websites. So custom build PHP website but also WordPress, Joomla, Drupal and other CMS websites.

How to enable iPad mobile website?

Open the config.php file and change:

$config['exclude_device']           = array('ipad');

to:

$config['exclude_device']           = array();

Updates and New releases top

Updates and new release of the script are free to download once you have bought this item. To download a new version you go to My Account on Codecanyon and

How to download an update
Follow these steps to download the latest release

Support notes top

Right now I'm simply getting more emails and requests for support than I can manage in a timely manner. Some times I can answer emails the same day, but often it'll take me as long as a month (or longer!) to completely empty my inbox.

Before sending a support request make sure that you have done the following things:

  1. Read the full documentation file
  2. See if your answser isn't already answered in the FAQ section of the script on Codecanyon.

To be able to help solve a problem quickly, please read the entries below. I'll do my best to assist you. I provide a full range of Support except:

  1. I don't (and can't) support the 3rd-party code (i.e. external plugins, javascripts, flash players, etc.) In such cases you shall have to contact the authors.
  2. I don't support errors provoked by the strong modification of the original packages.
  3. I do customization but this isn't included in the price of the script. To get a cost estimate for a modification you can email me on wim@sitebase.be.
  4. If you sure that your improvement ideas will be helpful to others, please don't hesitate to share it with me. Most likely that it will became a free package update.
  5. If you have a more general question relating to the script on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Other scripts top

I have released a lot of other cool and handy scripts, so make sure to checkout our other scripts. To get an overview you can take a look at our portfolio on Codecanyon.


Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme/script. No guarantees, but I'll do my best to assist.

Sitebase

Go To Table of Contents