This documentation is for AppPresser 2 only. For AppPresser 3 docs, click here.

Ion Theme Setup

The Ion Theme brings the sleek components of the  Ionic Framework to WordPress. It is based heavily on the AppTheme, and uses many of the same features under the hood, but has a much improved UI.

*The Ion theme uses the CSS components from Ionic, not the Javascript components

Setup

  1. Download the theme zip file from your AppPresser account page.
  2. Login to your WordPress website, and go to Appearance=>Themes=>Upload.
  3. DO NOT activate the Ion theme unless you want it to replace your desktop theme.
  4. Navigate to the AppPresser settings page, and choose "Ion" in the app only theme select menu, and save.

The Ion Theme is designed to be used inside your AppPresser app, allowing your current theme to remain for laptop and mobile browser users. You may use it for your normal website theme as well, but please be aware it is only designed for use on mobile devices, so it may not work well on a large screen.

For testing purposes, you can use the "Load AppPresser for Admins Only?" checkbox and that will load the Ion theme, for only admins, on the frontend with your website as well.

Theme Customization

To customize the theme, go to the AppPresser settings, and click the blue customize button. This will take you to the theme customizer, where you can edit colors, menus, and more.

For more information about using a custom menu for your app, please see  this article.

Menu Icons

The Ion theme includes the  Ionicons icon font library, and you can use any of these icons in your menu. To do this, add a new menu link, then in the "Navigation label" field, enter your icon like this:

<i class="icon ion-home"></i> Home

To add a different icon, simply change the part that says "ion-home" to a different icon name. You can see all the available font icons here:  http://ionicons.com/

Nav dividers

To add a section divider to your navigation, first scroll to the top of the Appearance -> Menus page, click the "Screen Options" tab, and check "CSS classes."

Next, add a custom link to your menu. To prevent the user from accidentally going anywhere, fill the "URL" input with a #. In the "CSS classes" field for the newly added menu item, add "item-divider". The item-divider class styles the link to look like a divider instead of a menu link.

Sub menus

If you want a multi-tiered menu, you can set up your menu the same way you would for dropdowns. Simply click and drag the menu item to the right until it indents. The immediately preceeding menu item will now be the parent menu item. AppPresser will take care of the rest and provide arrows and back buttons to navigate this menu.

Footer Menu

A footer menu is available by creating a new menu, and assigning it to the "footer" location.

  • Use only a few links in the footer, it will not work well with more than 3 or 4 links
  • You must add icons for all footer links, as described in the 'Menu Icons' section above

Ajax

The Ion theme relies heavily on ajax to avoid page refreshes. Not all WordPress plugins are going to be compatible with ajax, so if you are having trouble and seeing issues, try disabling ajax with the checkbox option on the AppPresser settings page.

We highly recommend you keep the ajax active if possible, as page refreshes ruin the experience of app-functionality.

Child Themes

Do not edit the core files of this theme. Instead, put all of your custom code in a child theme. Download our sample Ion Child Theme.

More information on child themes can be found on the child themes codex page regarding when and why you should use a child theme.

Sticky Menu for Larger Screens

If you are viewing the Ion theme on a larger screen like an iPad, the side menu will stay open for easy access.  If you would prefer they go closed when loading a new content, you can add the following code to your child theme's function.php file.

/**
 * If you would like to turn off the sticky menu for larger screens,
 * add this to your child theme
 */
function sticky_ion_menu() {
	wp_localize_script( 'jquery', 'sticky_ion_menu', "off" );
}
add_action( 'wp_enqueue_scripts', 'sticky_ion_menu' );