“Point Mobile Wordpress Theme”

Table of Contents

1. Getting Started
2. Installation
   1. Configuration
      • 1.1 Auto Update
      • 1.2 Setup Menu
      • 1.3 How to add menu items?
      • 1.4 Setup Front Page & Posting Page
      • 1.5 Plugin Installation
   2. Point Options Panel
      • 2.1 General
      • 2.2 Logo Settings
      • 2.3 Theme Customizer
      • 2.4 Top Bar Settings
      • 2.5 Menu Layout
      • 2.6 Menu Header Bar
      • 2.7 Content Settings
      • 2.8 Typography
      • 2.9 iOS Splash Screens
      • 2.10 iOS Add Home Bubble
      • 2.11 iOS Touch Icons
      • 2.12 Auto Update
      • 2.13 Import / Export Settings
   3. WMF Shortcodes Plugin Instruction
      • 3.1 Setup Twitter API
      • 3.2 Column Shortcode
      • 3.3 Dropcap Shortcode
      • 3.4 Highlight Shortcode
      • 3.5 Notification Shortcode
      • 3.6 Label & Badge Shortcode
      • 3.7 Seperator Shortcode
      • 3.8 Accordion(Collapse) Shortcode
      • 3.9 Font Icon Shortcode
      • 3.10 Tab Shortcode
      • 3.11 Button Shortcode
      • 3.12 Button Group Shortcode
      • 3.13 Google Map Shortcode
      • 3.14 Table Shortcode
      • 3.15 Video Shortcode
      • 3.16 Progress Bar Shortcode
      • 3.17 Twitter Feed Shortcode
      • 3.18 Services Box Shortcode
      • 3.19 Padding Shortcode
      • 3.20 Mobile Detection Shortcode
   4. WMF Framework Plugin Instruction
      • 4.1 WMF Gallery & Portfolio
      • 4.2 WMF Slider
      • 4.3 How to link portfolio & slider image to an URL?
   5. Desktop Theme Integration
      • 5.1 Use Desktop theme & Point theme together
      • 5.2 Use Desktop theme & Point theme separated
   6. Credits
   7. Support
   8. Localization

A) Getting Started - top

In order to begin installing Point 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 & Point theme together

Upon downloading the package, you will have a "Point" 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. Point is now the active theme and you can configurate all settings from Appearance > Point 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 > Point 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.

B 1.2) Setup Menu - top

Open Appearance > Menus then click "Create A New Menu" name it "Point Main Menu". Add items to your menu items and select menu location.

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)

B 1.3) How to add menu items? - top

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

Point 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) Point Options Panel - top

You can find Point options panel under Appearance > Point 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 Layout - top

B 2.6) Menu Header Bar - top

B 2.7) Content Settings - top

B 2.8) Typography - top

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

B 2.9) 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.10) iOS Add Home Bubble - top

B 2.11) 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.13) Import / Export Settings - top

If want to Import/Export customized settings. Only need to use Wordpress Admin Menu > Point 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;

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

One half page (2 columns) is code below;

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

One Third (3 columns) is code below;

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

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

[wmf_row]
[wmf_col cls="3"]Text or Code goes here...[/wmf_col]
[wmf_col cls="3"]Text or Code goes here...[/wmf_col]
[wmf_col cls="3"]Text or Code goes here...[/wmf_col]
[wmf_col cls="3"]Text or Code goes here...[/wmf_col]
[/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.

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

B 3.4) Highlight Shortcode - top

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

B 3.5) Notification Shortcode - top

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

B 3.6) Label & Badge Shortcode - top

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

B 3.7) Seperator Shortcode - top

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

B 3.8) Accordion(Collapse) Shortcode - top

[wmf_toggles]
[wmf_toggle title="Title"]Collapse content goes here.[/wmf_toggle]
[wmf_toggle title="Title"]Collapse content goes here.[/wmf_toggle]
[/wmf_toggles]

B 3.9) Font Icon Shortcode - top

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

B 3.10) Tab Shortcode - top

[wmf_tabs]
[wmf_tab title="Title"]Tab content goes here.[/wmf_tab]
[wmf_tab title="Title"]Tab content goes here.[/wmf_tab]
[/wmf_tabs]

B 3.11) Button Shortcode - top

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

B 3.12) Button Group Shortcode - top

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

B 3.13) Google Map Shortcode - top

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

B 3.14) Table Shortcode - top

[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

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

B 3.16) Progress Bar Shortcode - top

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

B 3.17) Twitter Feed Shortcode - top

[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.

• Once click service box button.
• Write a title.
• Write an icon name. (You can find it from fontawesome website.)
• Paste an url.
• And select a target for this url.
• Then press insert.

[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.

• Once click padding button and write size numeric.
• Then press insert.

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.

• Once select your content which you want to hide or show on device.
• Then click to Mobile Detection Shortcode Button
• Then Select option and press Insert for use this code.
• And of all you will see your content covered with our detection shortcode.

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.

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.

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;

B 5) Desktop Theme Integration - top

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

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

• You only have to setup Appearance > Point Options Page after install Point on your existing WordPress site.
• You do not change Menu Setting & Widget Setting or Settings > Reading.!!
• AND DON'T IMPORT DEMO CONTENT!! (Optional this will add more pages your existing site.)

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 - Point 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 Point Theme Switcher Mode plugin from demo_content > theme-switch-mode > mobili-themeswitcher-patch.zip. Then activate it.
   
   
   
3. After activation only you need to setup your mobile theme from Mobile Theme Switcher Menu photo below and select Point Theme for Tablet & Smartphone;
   
   
   
4. Now you need to setup Mobile Menu from Appearance > Menus > Create a new menu called Left Menu & one more for Right Menu. You will see Point 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 Point Mobile theme if you want to edit Point 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 & Point 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;

• Solution A: (Better for WordPress Desktop Site Owners)
  1-) Download WMF Mobile Redirector Plugin: https://github.com/webbudesign/WMF-Mobile-Redirector
  2-) Install this plugin to your WordPress Desktop site. And activate it.
  3-) Go to Settings > WMF Mobile Redirector Page and set your mobile site address. And change other settings as you want.
  4-) After this it will redirect mobile & tablet devices to your mobile site.
  
  
• Solution B: (Better for Joomla or PHP Desktop Site Owners)
  1-) Just download the file: http://www.webbudesign.com/envato/files/phpdetect.zip
  2-) You will see 2 file in downloaded zip file. First is mobile_detect.php and second one demo.php. Open demo.php.
  3-) Replace demo.php’s codes with your mobile site address.
  4-) And copy all codes.
  5-) Open your desktop site’s index.php with an editor.
  6-) Put copied code in to the head of this document.
  7-) And be sure mobile_detect.php at the same directory with your desktop site’s index.php.
  
  

B 6) Credits - top

Thanks to all resource owners.

Point Theme;

• Option Tree
• HTML5 Blank Wordpress Theme
• FontAwesome
• Conditionizr
• Modernizr
• Add 2 Home Script
• Thanks to AlfoArt for demo photos.
• Touch Gesture Icons

WMF Shortcodes;

• Bootstrap 3
• Respond JS
• IRIS JS
• PHP Mobile Detect
• Plugin Update Checker
• Fluid Vids
• FontAwesome

WMF Framework;

• PHP Mobile Detect
• Plugin Update Checker
• Flex Slider
• Colorbox
• PhotoSwipe

B 7) Support - top

Support policy

• All tickets submitted on weekends or during holidays will be answered on business days.
• We only provide support for fixing bugs and questions regarding to theme features usage.
• Please be sure to provide live URL to your site, if you are not on localhost.
• You will get respond to your ticket within 48 hours or 2 business days.
• We do not provide support for additional custom modifications to our items.
• We do not provide any refunds to our products, this is handled by Envato network. For more information read this REFUND POLICY
• Our timezone is GMT +2

B 8) Localization - top

Point 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 Point 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 PointMobile WordPress Theme.
   

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

Webbu Design

Go To Table of Contents