“Bean Mobile Wordpress Theme”

Created: 16/11/2013
By: Webbu

Thank you for purchasing my theme.


Table of Contents

  1. Getting Started
  2. Installation
    1. Configuration
    2. Bean Options Panel
    3. WMF Shortcodes Plugin Instruction
    4. WMF Framework Plugin Instruction
    5. Desktop Theme Integration
    6. Credits
    7. Support
    8. Localization

A) Getting Started - top

In order to begin installing Bean theme. You need the latest version of Wordpress. Here is the download URL. Once you downloaded and set it up, You are ready to go.

if you don’t know how to do that please go here:http://codex.wordpress.org/Installing_WordPress


B) Installation - top
Important:
If you plan to use desktop theme & mobili theme together please read this instruction before 5.1 Use Desktop theme & Bean theme together

Upon downloading the package, you will have a "Bean" folder inside the theme package. Upload this folder to your themes folder at: your WordPress installation root directory /wp-content/themes

Log into WordPress administration and click on the Appearance > Themes tab. After that is done, activate the theme as you would activate any other theme.

Notice: if you are new to WordPress and have problems installing it you might want to check out this link: Solving broken theme issues. After that is done activate the theme as you would activate any other theme at Appearance > Themes. Bean is now the active theme and you can configurate all settings from Appearance > Bean Option Panel .

If you are new to WordPress and have problems with setting up the theme you might want to import the dummy content file ( you can find in demo_content folder > demo_content.xml) that comes with the theme. You can import this file by clicking Tools > Import > Wordpress. The theme will then import some dummy posts and pages from the live preview. However you will still need to set some options on your own ex. main menu settings. Please see below configuration sections.


B 1) Configuration - top

B 1.1) Auto Update Config - top

This section will help you for future updates. If fill all informations your theme will check updates from Envato Server. Auto update setting is under the Appearance > Bean Options > Auto Update Tab. You can find Envato Username and API key in to the Envato Control Panel > My Settings > API Key. For more detail click here to see help photo. This setting is optional.




Open Appearance > Menus then click "Create A New Menu" name it "Bean Main Menu". Add items to your menu items and select menu location. Then for share button menu do same work again and create one more menu for it. Also you have to select menu location again for share menu Menu Settings > Bean Share Buttons Menu

You need to set Theme Locations > Menu. You can find this setting below the menu page. This setting is required.(in WordPress 3.6.x)







For see how to add menu buttons please see below photo; For FontAwesome Icons go to this address: http://fontawesome.io/3.2.1/icons/




B 1.4) Setup Front Page & Posting Page - top

After Install Theme you can setup custom front page & posts page from Settings > Reading Section. This setting is required.






B 1.5) Plugin Installation - top

Bean is using TGM Plugin Installation. This setting is required. After Install Theme you only need to install & activate plugins with this activator. After install you will see notice below;

Once click "Begin Install plugins" button you will find window photo below;



B 2) Bean Options Panel - top

You can find Bean options panel under Appearance > Bean Options menu. And you can find instructions of admin panel in to the below photos;

B 2.1) General - top



B 2.2) Logo Settings - top



B 2.3) Theme Customizer - top




B 2.4) Top Bar Settings - top




B 2.5) Menu Buttons - top




B 2.6) Content Settings - top




B 2.7) Typography - top

Typography settings will effect typography of site. Leave all settings blank for load default typography.




B 2.8) iOS Splash Screens - top

This feature only work in iOS devices. You will see different sized images below this instruction. These images are designed for device position & type. Please upload all images. You can find sample images in Downloaded content > Sources > splash-screens folder.




B 2.9) iOS Add Home Bubble - top




B 2.10) iOS Touch Icons - top

Touch icons will help to iOS users while adding your site to the home screen. The sizes are different because retina & non-retina devices using different size icons. For find sample icons only check downloaded content > sources > touch-icons folder. You can change these images & re upload here easily.




B 2.11) Import / Export Settings - top

If want to Import/Export customized settings. Only need to use Wordpress Admin Menu > Bean Import/Export.





B 3) WMF Shortcodes Plugin Instruction - top

B 3.1) Setup Twitter API - top

Before using Twitter shortcode you need to configure Settings > WMF Shortcodes > Twitter settings Image below;
Also we have included a PDF file for give you instruction how you can get these keys. You can find this instruction file by clicking here.






B 3.2) Columns Shortcode - top

1st parameter is mobile="on" or mobile="off" this will enable/disable column style for mobile. If leave it on columns will be look like same order like normal web page. This tag only supported on 1,2,3 columns!. This mean you can use maximum 3 columns in Mobile & Tablet devices. 

2nd parameter cls="12" is mean 12 vertical line full width page. This code sample below line is full width page;

  1. [wmf_row]
  2. [wmf_col cls="12" mobile="on"]Text or Code goes here...[/wmf_col]
  3. [/wmf_row]

One half page (2 columns) is code below;

  1. [wmf_row]
  2. [wmf_col cls="6" mobile="on"]Text or Code goes here...[/wmf_col]
  3. [wmf_col cls="6" mobile="on"]Text or Code goes here...[/wmf_col]
  4. [/wmf_row]

One Third (3 columns) is code below;

  1. [wmf_row]
  2. [wmf_col cls="4" mobile="on"]Text or Code goes here...[/wmf_col]
  3. [wmf_col cls="4" mobile="on"]Text or Code goes here...[/wmf_col]
  4. [wmf_col cls="4" mobile="on"]Text or Code goes here...[/wmf_col]
  5. [/wmf_row]

4 columns is code below. As you can see mobile="on/off" tag is not using in here;

  1. [wmf_row]
  2. [wmf_col cls="3"]Text or Code goes here...[/wmf_col]
  3. [wmf_col cls="3"]Text or Code goes here...[/wmf_col]
  4. [wmf_col cls="3"]Text or Code goes here...[/wmf_col]
  5. [wmf_col cls="3"]Text or Code goes here...[/wmf_col]
  6. [/wmf_row]

You can find other columns shortcodes by clicking shortcode button in TinyMCE editor.






B 3.3) Dropcap Shortcode - top

1st parameter is textcolor="#ffffff"  : text color for dropcap.

2nd parameter bgcolor="#000000"  : background color fro dropcap.

  1. [wmf_dropcap textcolor="#ffffff" bgcolor="#000000"]M[/wmf_dropcap]y text sample is here






B 3.4) Highlight Shortcode - top

1st parameter is textcolor="#faf4f4"  : text color for highlight.

2nd parameter bgcolor="#ac1a1a"  : background color fro highlight.

  1. [wmf_highlight textcolor="#faf4f4" bgcolor="#ac1a1a"]My sample text[/wmf_highlight]






B 3.5) Notification Shortcode - top

Video Tutorial:


In this shortcode we have one setting for modification. You can select colors easily with using color selector. Also you can select text which you want to put in notification area. Then click notification button and choose style.

1st parameter is style="alert-danger" ; Other Styles: alert-info , alert-success , alert-warning

Sample code is below;

  1. [wmf_notify style="alert-danger"]My notification[/wmf_notify]






B 3.6) Label & Badge Shortcode - top

Video Tutorial:


In this shortcode we have 2 settings for modification. While using this shortcode just select text which you want to change to label and then click label button, choose settings that is it.

1st parameter is color="danger"  : Color code for label/badge (danger, info, success, warning)

2nd parameter type="label" or type="badge" : You can change label to badge

Sample code is below;

  1. [wmf_lb color="danger" type="label"]My Label[/wmf_lb]






B 3.7) Seperator Shortcode - top

In this shortcode we have 2 settings for modification.

1st parameter is align="left"  : Align for text (if text entered) (center, right, left)

2nd parameter Title text : This area is optional if you want to put a text then you can write.

Sample code is below;

  1. [wmf_sp align="left"]Title(Optional)[/wmf_sp]






B 3.8) Accordion(Collapse) Shortcode - top

And you can add more collapse by copying this line: [wmf_toggle title="Title"]Collapse content goes here.[/wmf_toggle]

Sample code is below;

  1. [wmf_toggles]
  2. [wmf_toggle title="Title"]Collapse content goes here.[/wmf_toggle]
  3. [wmf_toggle title="Title"]Collapse content goes here.[/wmf_toggle]
  4. [/wmf_toggles]






B 3.9) Font Icon Shortcode - top

In this shortcode we have 3 settings for modification.

1st parameter is color="#000000"  : color hext code forn icon color

2nd parameter size="24" : size number (px) Only numeric.

3rd parameter icon="icon-heart" : Icon name must be written this area. You can find all icon names in http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

Sample code is below;

  1. [wmf_fonticon color="#000000" size="24" icon="icon-heart"][/wmf_fonticon]






B 3.10) Tab Shortcode - top

And you can add more tab by copying this line: [wmf_tab title="Title"]Tab content goes here.[/wmf_tab]

Sample code is below;

  1. [wmf_tabs]
  2. [wmf_tab title="Title"]Tab content goes here.[/wmf_tab]
  3. [wmf_tab title="Title"]Tab content goes here.[/wmf_tab]
  4. [/wmf_tabs]






B 3.11) Button Shortcode - top

In this shortcode we have 4 settings for modification.

1st parameter is size="normal"  : Size for button can be used btn-xs (Mini), btn-sm (Small), btn-lg (Large) , normal

2nd parameter is color="btn-info"  : Color for button can be used btn-info (Light Blue), btn-danger (Red), btn-default (Transparent) , btn-success (Green) , btn-warning (Yellow)

3rd parameter is target=""  : Target for button can be used _blank , _self , _parent or empty

3rd parameter is url="http://www.google.com"  : URL value for button.

Sample code is below;

  1. [wmf_button size="normal" color="btn-info" target="" url="#"]Button[/wmf_button]






B 3.12) Button Group Shortcode - top

In this shortcode we have 1 settings for modification.

1st parameter is align="center"  : Align for button group can be used right, center, left

Note: While using this code I recommend create 2 or more buttons then select that codes. Click to button group shortcode button from menu and choose align. That is it. This shortcode will make group your buttons which you have selected.

Sample code is below;

  1. [wmf_buttong align="center"]
  2. [wmf_button size="normal" color="btn-info" target="" url="#"]Button[/wmf_button]
  3. [wmf_button size="normal" color="btn-success" target="" url="#"]Button[/wmf_button]
  4. [/wmf_buttong]






B 3.13) Google Map Shortcode - top

In this shortcode we have 5 settings for modification. And for find Lat Lng position please use this site: http://itouchmap.com/latlong.html

1st parameter is height="150"  : Need an height value (px)

2nd parameter type="m" : Map type: m = Road Map - k = Satellite - h = Hybrid - p = Terrain

3rd parameter lat="38.428971" : Lat coordinate for map

4th parameter lng="38.428971" : Lng coordinate for map

5th parameter zoom="14" : Zoom parameter only numeric

Sample code is below;

  1. [wmf_maps height="150" type="m" lat="38.428971" lng="27.134342" zoom="14"][/wmf_maps]






B 3.14) Table Shortcode - top

In this shortcode we have 3 settings for modification.

1st parameter is type="bordered"  : Table type can be used; bordered , striped , hover , condensed

2nd parameter is cols="colname1,colname2"  : Column names must be written with comma like sample.

3rd parameter is data="data1,data2"  : Table Data names must be written with comma like sample.

Sample code is below;

  1. [wmf_table type="bordered" cols="#,First Name, Last Name, Username" data="1, Filip, Stefansson, filipstefansson, 2, Victor, Meyer, Pudge, 3, Mans, Ketola-Backe, mossboll"][/wmf_table]






B 3.15) Video Shortcode - top

In this shortcode we have 3 settings for modification.

1st parameter is w="430"  : Width for video

2nd parameter h="600": Height for video

3rd parameter type="youtube": Video site can be using: youtube , vimeo, dailymotion, yahoo, bliptv , veoh , viddler

Sample code is below;

  1. [wmf_video h="430" w="600" type="youtube" id="rMltoD1jCGI"][/wmf_video]






B 3.16) Progress Bar Shortcode - top

In this shortcode we have 3 settings for modification.

1st parameter is value="10"  : % value

2nd parameter color="progress-bar-success": Color type for bar can be using: progress-bar-success (green), progress-bar-danger ( red), progress-bar-info (light blue), progress-bar-warning (yellow)

3rd parameter type="": Progress Bar Type can be empty for normal bar but also you can use : "progress-striped" or "progress-striped active"

Sample code is below;

  1. [wmf_prg value="10" color="progress-bar-success" type=""][/wmf_prg]






B 3.17) Twitter Feed Shortcode - top

In this shortcode we have 2 settings for modification.

1st parameter is user="username"  : Twitter Username

2nd parameter numb="3": Tweet Number

  1. [wmf_twitter user="username" numb="3"][/wmf_twitter]






B 3.18) Services Box Shortcode - top

In this shortcode we have 4 settings for modification. This shortcode will create a service box.

[wmf_services title="Title" icon="icon-heart" target="" link="#"]Content goes here...[/wmf_services]






B 3.19) Padding Shortcode - top

In this shortcode we have 1 settings for modification. This shortcode will create an empty space with size height.

1st parameter is size. And you can edit this parameter by using shortcode manager.

[wmf_pad size="20"][/wmf_pad]






B 3.20) Mobile Detection Shortcode - top

In this shortcode we have 1 settings for modification.

1st parameter is type. And you can edit this parameter by using shortcode manager.

[wmf_detect type="notphone"]This text only visible in Phones & Tablets[/wmf_detect]
[wmf_detect type="notmobile"]This text only visible in Desktop PC[/wmf_detect]







B 4) WMF Framework Plugin Instruction - top

B 4.1) WMF Gallery - top

After installation WMF Framework plugin will show you a note for install required plugins. Please be sure install all required plugins for see this gallery menu.

Click Photo for See Bigger




B 4.2) WMF Slider - top

After installation WMF Framework plugin will show you a note for install required plugins. Please be sure install all required plugins for see this slider menu.

Click Photo for See Bigger






B 4.3) How to link portfolio & slider image to an URL? - top

Slider & Gallery image link system both same. So you can see how to do it photo below;

Click for bigger Image







B 5) Desktop Theme Integration - top

B 5.1) Use Desktop theme & Bean theme together - top

In this solution we recommend you install Bean to your existing WordPress Desktop Site. And activate it for setting up configurations ;

After finish your configuration, activate your existing desktop theme again. Now we will install 2 plugin for switch theme.

  1. Click to Plugins > Add New and type WP Mobile Theme Switcher to search area. When you find this plugin click Install Now and activate it. Also you can find this plugin in to the demo_content > theme-switch-mode > wp-mobile-theme-switcher.v1.0.1.zip.


  2. Please check Webbu Mobile First - Bean Theme Switcher Plugin from your installed plugins. If not installed then Go to Plugins > Add New > Upload in to the your existing WordPress Desktop site. And upload plugin called WMF Bean Theme Switcher Mode plugin from demo_content > theme-switch-mode > beanthemeswitcherpatch.zip. Then activate it.


  3. After activation only you need to setup your mobile theme from Mobile Theme Switcher Menu photo below and select Bean Theme for Tablet & Smartphone;


  4. Now you need to setup Mobile Menu from Appearance > Menus > Create a new menu called Main Menu& one more forTop Share Buttons. You will see Bean Menu Theme Locations below your menu page. Please set left & right menu. Info photo below; (Navigation Menu is your existing desktop theme menu. So don't touch it.)



  5. IMPORTANT PLEASE READ:
    Now our work finished. You can activate Bean Mobile theme if you want to edit Bean Theme Options . Otherwise you do not need to activate it again. WMF Shortcodes , WMF Framework, Revolution Slider will work with your desktop theme.

    Only you can have problem on your static front page. On this case we recommend you to use Mobile Detection Shortcode and add a page code only visible in tablet & mobile phones in to the your existing front page & add a shortcode to your existing content for only visible in desktop computers (You can do this by select all your existing code, then press Mobile Detect Shortcode Button and select Only Show Desktops and Insert). So your current website will not effected with this code. But your mobile site will use this section only.

    For other pages you do not need to do this because you can create a menu separated from your existing desktop site. So you can create separated pages from your existing desktop site's pages.

    Hope this helps.





B 5.2) Use Desktop theme & Bean theme separated - top

In this solution we recommend create a new clean wordpress installation. Like m.yourdomain.com or yourdomain.com/mobile. After this Install our mobile theme in to the this clean wordpress. Configure and make a full setup work. Then;


B 6) Credits - top

Thanks to all resource owners.

Bean Theme;

WMF Shortcodes;

WMF Framework;







B 7) Support - top

You can create a ticket on our support forum
BUT PLEASE READ SUPPORT POLICY BELOW BEFORE OPEN TICKET.
 
Click here for open our support forum

Support policy

Please write your problem to us. We are ready to help.
 
We have changed our support policy so please read this before submitting your ticket!
Please Note: Support is limited to questions regarding the template features or problems. We are not able to provide support for code customizations or third-party plugins. If you need help with customizations of your theme then you should enlist the help of a developer. Once again, thank you so much for purchasing this theme. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.





B 8) Localization - top

Bean Mobile WordPress theme could be translated into any language using WordPress Localization Technology →

To translate your site into your language follow these steps:

  1. Copy file en_EN.po from mobili/languages directory of Bean Mobile package
  2. Rename it to your locale string name. For example tr_TR.mo if you are translating to Turkish language.
  3. Translate all lines in translation file to your language using po file edit software. We recommend using Poedit→ for this purpose.
  4. Copy automatically generated .mo file (in our Turkish example its tr_TR.mo) translation files to mobit/lang directory in your website.
  5. Change locale settings in wp-config.php file. If you are translating to Turkish find line define(‘WPLANG’, ”); and replace it with define(‘WPLANG’, ‘tr_TR’);
  6. Translate core WordPress. Use this guide: WordPress in Your Language →
  7. Reload BeanMobile WordPress Theme.
Now your website and admin panel is translated.

If you need detailed information or help on translating WordPress theme refer to this great and detailed article on How to Translate a WordPress Theme

Note: WMF Shortcodes & WMF Framework plugin locale files under the wp-content > plugins > pluginfolder > languages folder Please translate these plugins from that files under the languages folder.





Webbu Design

Go To Table of Contents