Category Archives: Guides & Tutorials

Wiziapp WordPress Plugin Version 3 Themes & Apps – Tutorial

Wiziapp WordPress Plugin Version 3 Themes & Apps – Tutorial content

A. Installing the Wiziapp WordPress Plugin Version 3

B. Mobile Themes

  • Choose the right theme for you
  • Customize the theme’s colors and settings

C. General Settings

D. Creating an Android Native App

E. Creating an iPhone Native App

F. Monetization

G. Extensions

A. Installing the Wiziapp WordPress Plugin Version 3

Installing the “WiziApp” Plugin from your WordPress admin panel:

  1. Go to the “Plugins” / “Add new” on the left main menu.
  2. Type WiziApp within the search box and click “Search Plugins”.
  3. Choose the “WiziApp – Adaptive Mobile Themes, Native Android & iPhone Apps (WooCommerce & BuddyPress compatible)”
  4. Click “Install Now”.
  5. Click “Activate Plugin”.
  6. Click the WiziApp button on the left main menu to start creating your own mobile App.

Download and Install the “WiziApp” Plugin from WordPress plugin directory or from the WiziApp website:

  1. Click the “Download” button.
  2. Go to your WordPress admin panel, open the Plugins menu on the left main menu and click “Add New”.
  3. Click upload on the top page menu.
  4. Choose the “WiziApp – Adaptive Mobile Themes, Native Android & iPhone Apps (WooCommerce & BuddyPress compatible)” plugin and click “Install Now”.
  5. Click “Activate Plugin”.
  6. Click the WiziApp button on the left main menu to start creating your own mobile App.

 

B. Mobile Themes

Choose the right theme for you

manu - 1

On your WordPress system left sidebar, click “Wiziapp”, and go to “Themes” at the top menu.

The themes directory is updated from time to time as we add new themes, the premium theme has the advance features in addition to the free theme like:

  • Branding Free
  • Header customization
  • Full colors customization
  • Editable CSS
  • Click to call
  • Get directions (open Google maps / Waze)

The free theme is activated by default as you activate the “Wiziapp” plugin.

Note, that reactivation of the “Wiziapp” plugin for any reason, requires to reactivate your chosen theme, which you can do with the themes directory – “Activate” button, which can be found below each of the themes thumbnails.

 

Customizing the theme colors and settings

1. Accessing the theme customization options

You can access the theme interface customization on your WordPress from:

“Wiziapp” – “Themes” –  “Customize” button beneath the theme you would like to customize.

OR

“Wiziapp” – “Settings” –  “Customize theme” button on the “Theme Settings” section.

2. Theme customization options

Clicking the “Customize” opens a screen which displays the customization options and on the right side of the screen you can see a live preview of your mobile App.

2.1 App Header layout – text

manu -2

 

 

 

Choose the App title to be displayed on the App header.

 

Title color – Set the text color

 

Background color – Set the header background color

 

 

 

 

2.2 App Header layout – image

manu -3

 

 

 

 

Upload an image to serve as your App header on all the App’s screen, the image type should be png file and size should be 1024/44 pixels.

 

 

 

 

 

2.3 App colors

manu -4

 

 

Set the App text color and the App start and end background colors.

The background color customization will show on all screens that have “list” type of display, like, “Latest post”, “Categories”, “Pages”, “Tags”, etc.

For users that have CSS knowledge, just click the “Edit CSS” to customize it to your needs.

 

 

 

2.4 Latest post screen settings

manu5

 

 

Set the latest posts screen display for the following data, to each of your posts:

  • Author
  • Date
  • Comments
  • Thumbnails

Author & Date text like “Posted on” is translated automatically to your WordPress default language on the webapp itself.

 

2.5  Post screen settings

manu6

 

 

 

 

 

Set the posts screen display for the following data, to each of your posts:

  • Author
  • Date
  • Comments
  • Categories
  • Tags

 

2.6 Page screen settings

manu7

 

 

 

 

Set the page screen display for the following data, to each of your posts:

  • Author
  • Date
  • Comments
  • Subpages

 

 

 

2.7  Static Front Page

manu8

 

 

 

 

 

 

Set here the front page of the App, clicking the drop down menu, will open all of your WordPress pages and you can choose either one to serve as the App front page.

 

 

C. Generanl Setting

This chapter refers to “settings” which can be found on the ‘wiziapp” plugin- “Settings” tab.

manu9

Activate Mobile theme for Smartphones & tablets browsers buttons, can be set to “ON” or “Off”, note that changing these settings may take a while to take effect, unless you will clear the cached on your server.

“Home screen shortcut icon”- Upload your App icon 1024*1024 png file, the icon is a graphic that represents your Application on the device home screen.

“Home screen icon title”  – A title that will display below your icon.

Navigation – Use this drop-down field to choose the menu for your Webapp.

Menus:

You can set a different menu for each the mobile platform: Webapp (viewed on a mobile browser), native Android App & native iPhone App.

To edit the App menu just go to the “Wiziapp” plugin – “Settings” – “Edit Menu” button is displayed for each of the available platforms.

Clicking this button, leads you to your WordPress menu settings, where you can add or remove items to the App menu as needed.

 

D. Creating an Android Native App

manu10

You can choose here to purchase the Android App and enjoy:

  • A Native Android App
  • Publish your App to the Google Play Store
  • Unlimited push notification service, hosted on the Wiziapp servers

Purchasing the Android App, will open the following settings screen:

Android App settings screen – part 1:

manu11

Activate the Android App- Deactivating this button, will keep the Android App working, it will deactivate the “Wiziapp” powered theme and enable your desktop theme view within the App.

Theme – choose the Android App’s theme.

“Home screen installation icon”- Upload your App icon 1024*1024 png file, the icon is a graphic that represents your Application on the device home screen, make sure to use an original png file and not a converted one.

“Home screen icon title”  – A title that will display below your icon.

Splash screen – This is the initial screen displayed each time a user launch the App

Navigation – Use this dropdown field to choose the menu for your Android App.

 

Android App settings screen – part 2:

manu12

Display Intro Screen – Offer users that visit your site via Android device browsers to download your App, the download is done from the Google Play Store, unless the App was not published, in this case it is downloaded from the “Wiziapp” servers.

Google cloud “Project ID” & “API KEI” data has to be added to the push notification service to work, see a guide for creating it here.

Admob ID – You can earn from Google Admob ID, just fill the code, all the revenues are yours, Wiziapp has no share of it.

APK file – Here you can download the file that will be used for uploading your App to the Play Store, see a guide for this process.

To recreate the APK, just change any of the following parameters:

Icon, Splash screen, Project ID and Admob ID.

Google Play Store – Your App will marked as published within several hours from the time it was published on the “Play Store”

 

E. Creating an iPhone Native App

manu13

Currently, the wiziapp plugin version 3 is not compatible with iPhone Apps, so till it does, Wiziapp plugin version 2 is needed, clicking the “Create Now” button, will enable you to download the “Wiziapp” plugin version 2.1.3 which enables to create an iPhone native app for your WordPress site.

F. Monetization 

320*50 Ads

manu14

Purchase this feature to enable adding Google Adsense ads, as well as your own mobile ads, using iframe tags.

Following this item purchase you should see:

manu15

Google Adsnese publisher ID – Please enter the full code starting “ca..”, you will find this code on your Google account – Settings – Account information

Google Adsense slot ID – On your Adsesne account, create a new ad unit 320*50, or view an existing one and click the “Get code” for finding the “google ad slot”.

iFrame ad URL, Width & Height – These fields should be used for displaying your own ads, consult with your Ad supplier if you are not sure about the exact parameters.

AppWall ads 

Integrate Interstitial App Wall Ads into your mobile site & boost your revenues.

The app wall ads are full screen ads that offer your end users sponsored Apps to download for free. The Ads appear while your users navigate your mobile site, so you can keep all of your existing ad slots like Google Adsense.

You can implement the Apwall ads using our free plugin which can be found at:

http://wordpress.org/plugins/interstitial-app-wall-ads-for-a-better-mobile-monetization/

G. Extensions

Check the Wiziapp plugin – “Plugins” tab for external plugins which adds functionality to the “Wiziapp” powered Apps.

A full list of the Wiziapp plugins can be seen at:

http://wordpress.org/plugins/search.php?q=wiziapp

Creating Admob Ad Unit ID

On mobile, advertising is a growing way of monetization. Leading developers like Rovio and EA have demonstrated that there is a lot of dough in ads.

What is Admob ?

It is an Ads network that enables Apps and mobile friendly web sites owners to display ads and get revenues per click similar to Google Adsense system. By far, it is the largest advertising tool/platform used on mobile, and who owns it now? Google!  Yes, and it is very similar to Ad sense in the revenue sharing mechanisms too! How cool is that?

So, now you know what Admob is, and how cool it’s owner is, let’s get to know how to become an Admob publisher.

Continue reading