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

AppTheme Setup

Install AppTheme | AppPresser Documentation

AppTheme Logo

No matter what extensions you buy or what features you use, one thing that your visitors and app users are going to see is your app's appearance. With AppTheme, we have created a theme that helps tailor the user experience on a mobile device. While Responsive Web Design is indeed a very hot topic these days, AppTheme goes above and beyond just being responsive. It also provides integral hooks for other AppPresser extensions to latch onto and execute their own functionality. Couple this with Child Themes and you have a lot of flexibility right at your hands.

Demo video

Notes:

  • AppTheme does not currently have the settings tab.
  • "Load AppPresser for mobile browsers" is no longer available because of cordova.js conflicts outside of PhoneGap.
  • "Use different theme for app" is now named "App-only theme"
  • "Disable dynamic page loading" is now on the main AppPresser settings page, not the settings tab.
  • You do not need to activate the theme for everyone to use the customizer anymore. Link below the App-only theme select box.
  • Menu setup is only in Customizer as of 1.0.4

Icons provided by Font Awesome

With the two icon spots available with the WordPress customizer and AppTheme, you can specify which Font Awesome icons you want to use with your two menu hotspots. You can also add them to your left "drawer" menu to add a finer touch to your application. See the menu section below for more information on that.

Just paste the correct Font Awesome class into the input areas and click save. See the Font Awesome Icons page for available icons and how to utilize them.

Theme Setup

General Information

AppTheme is designed to be active only inside the built native app, allowing your current theme to remain for laptop and mobile browser users.

Do not activate it like you would other themes you have installed to use with WordPress. Activating that way makes it visible to all of your normal website visitors.

To properly load the theme for your AppPresser app, you should visit the AppPresser settings page and select "AppTheme" from the "App-only theme" select box. For testing purposes, you can use the "Load AppPresser for Admins Only?" checkbox and that will load AppTheme, for only admins, on the frontend with your laptop as well.

Menus

The AppPresser theme uses menus that are active only when the theme is active. That way you can have different menus for your app.

The AppPresser settings page allows you to set your app menus.

Note: menu selection for AppTheme has moved to the Theme Customizer as of version 1.0.4. To access, visit your AppPresser settings page and click the "Click here to customize app colors, menus, & more." link.

Introduced in 1.0.4 is the new footer menu area, intended for up to 3 menu items that you wish to add extra highlight to. See the "Menu Icons" section for information on how to add custom icons to them.

Menu Customization

The main left panel menu is highly customizable. To create a menu like our demo app, here are a few things you can do.

Menu Icons

The AppPresser theme includes the font awesome 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="fa fa-home"></i> Home<br>
			

You can see all the available font icons here: http://fontawesome.io/icons/

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 #. If you wish to have a "header" style divider for organization, fill in the "Link Text" field with whatever you wish. In the "CSS classes" field for the newly added menu item, add "nav-divider". The nav-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.

Note: This only works for the menu set as the "Main App Menu"

Top Menu

The top menu is the gear icon at the top right of your app. You can add a top menu, then assign it to your app on the AppPresser settings page. The top menu does not work well with icons, it's best to use a short list of important links.

Theme Customizer

You can customize the your app using the theme customizer. To get started, visit your AppPresser settings page and click the "Open Customizer" button below the "App-only theme" dropdown. This will pull up the customizer screen for your chosen theme while not revealing it to your regular users. Please note, all previous theme options, including static front page, have been moved to the customizer.

Ajax

The AppPresser 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

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

Multitouch support

As of version 1.0.4, AppTheme has hammer.js available for multitouch events. Please read the docs at its website for more information on how to use.

Popup Modal

To specify the contents of a popup using the new popup modal that arrived in 1.0.4, all you need to do is provide the following:

<div id="my-custom-modal" class="io-modal">
    <div class="toolbar site-header">
        <i class="io-modal-close fa fa-times fa-lg alignright"></i>
    </div>
    <div class="modal-content"></div>
</div>
			

The primary div will be the wrapper for the div, and you provide a way to close the modal, and then the modal-content div is where you place all of the text or content you want to display in it.

In order to actually trigger the modal, provide a link whose href attribute is the same as the ID attribute above, like so:

<a href="#my-custom-modal" class="io-modal-open">open</a>
			

We recommend outputting the html to the wp_footer hook to keep it tucked away until you need to display it. Just make sure to provide unique IDs for each one you want to show and that they match the <a> tag you want to trigger it.

Custom Modal Example with Child theme

Example code for a custom modal along with a child theme can be found on our blog here: http://apppresser.com/custom-photo-modal/

Translation

Translation files are located in the /languages folder. For more information on translating your theme, please see Translating WordPress. The text domain used for AppTheme is apptheme.

Sample Code

These code snippets can go in the functions.php file of a child theme.

Remove the featured image on all single posts

// Remove single post featured image
function my_appp_filter($content) {
    if( is_single() ) {
        $content = '';
    }

    return $content;
}
add_filter('post_thumbnail_html','my_appp_filter');<br>
			

Remove the single post title

// Remove single post title
function my_appp_title($content) {

    $content = '';

    return $content;
}
add_filter('appp_single_post_title','my_appp_title');
			

Create custom ajax links

Programmatically with javascript: Gist

With HTML, just add a class of "ajaxify" to your link:

<a href="http://www.domain.com/custom-url/" class="ajaxify">My ajax link</a>
			

Tutorials

AppTheme Hooks

appp_app_panel_menu

Type: Action | File: /inc/classes/AppPresser_App_Functionality.php | Since: 1.0.0

Hooks into right side of the top toolbar in the app panel

appp_before

Type: Action | File: header.php | Since: 1.0.0

Hooks into right after the menu, and inside the #page div

appp_left_panel_before

Type: Action | File: /inc/classes/AppPresser_App_Functionality.php | Since: 1.0.0

Hooks into top left panel, and is used for search bar, shopping cart, and user profile pic

appp_login_modal_before, appp_login_modal_after

Type: Action | File: /inc/classes/AppPresser_App_Functionality.php | Since: 2.0.0

Hooks into top/bottom of login modal

appp_page_title

Type: Action | File: header.php | Since: 1.0.0

Hooks into the .site-title-wrap div to display a title value.

appp_single_post_title

Type: Filter | File: /content-single.php | Since: 2.0.0

Filters the single post title

appp_cardlist_footer

Type: Action | File: /content-cardlist.php | Since: 2.0.0

Hook for the footer of a card list

before_sidebar

Type: Action | File: sidebar.php | Since: 1.0.0

Hooks into right at the top of the sidebar, inside the div.

appp_header_right

Type: Action | File: header.php | Since: 1.0.4

Hooks into right at top of the upper right corner menu.

appp_attachment_size

Type: Filter | File: /inc/classes/AppPresser_Tags.php | Since: 1.0.0

Allows you to modify the default attachment size used when displaying an attached image and link to next image.

Default value:

array( 1200, 1200 )
				

{$tax}_archive_meta

Type: Filter | File: /inc/classes/AppPresser_Tags.php | Since: 1.0.0

Allows you to modify the tax archive meta. Uses the tag description by default. This hook has a variable in it, meaning it can end up being one of many values for the hook name. If the taxonomy is post_tag then the filter will be post_tag_archive_meta else it'll be whatever the current taxonomy is. For example, if you have a books taxonomy, the hook will be books_archive_meta

Default value:

'sprintf( '<div class="taxonomy-description">%s</div>', $description )'