Blog

Get your iOS device push token

When adding notifications to your iOS app using the WP-AppKit Pushwoosh Addon, you may need to know your device push token.

If you use Xcode you can get it from your app logs, as explained here: http://docs.pushwoosh.com/docs/ios-faq#how-do-i-obtain-my-ios-device-push-token-to-use-in-test-devices

If you don’t use Xcode, you can get it by using the cordova pushwoosh plugin api function “getPushToken()” that you’ll have to (temporarily) add directly to your app javascript code (in your WP-AppKit theme’s functions.js), as follows:

if ( typeof cordova !== 'undefined' ) {
        var pushNotification = cordova.require( 'pushwoosh-cordova-plugin.PushNotification' );
        pushNotification.getPushToken(
                function( token ) {
                        alert( 'Push token: ' + token );
                }
        );
}

This will display your push token when you launch your built app on your device, provided you have the PushWoosh Addon activated for the app and correctly configured iOS push certificates.

Disable CrossWalk Usage

By default, WP-AppKit includes CrossWalk Cordova plugin, leading to a heavy final application (+20MB).

To disable CrossWalk and reduce the size of the application, add the following in a php file in your WP-AppKit theme’s php folder:

function remove_crosswalk( $default_plugins ) {
     if( !empty( $default_plugins['cordova-plugin-crosswalk-webview'] ) ) {
         unset( $default_plugins['cordova-plugin-crosswalk-webview'] );
     }
      return $default_plugins;
}
add_filter( 'wpak_default_phonegap_build_plugins', 'remove_crosswalk' );

Warning: this could lead to some features not being well handled by some old devices, especially animations.

Extend history behavior for a post to post navigation

You may want to create link to another post from the single.html. In that case, you’ll need to modify the history and screen transitions behavior.

The code below detects a post to post navigation and modifies the history accordingly. It is already there by default in Q theme for Android. What you’ll need to add is a “last history action” memory to it (see highlighted lines), so that the correct screen transition can be triggered:

//Memorize last history action to be able to run the corresponding transition:
var last_history_action = '';

// @desc Catch if we're going to a single and coming from a single (it is the case when clicking on a post in the last posts widget at the bottom of a post)
// Update properly the history stack
App.filter( 'make-history', function( history_action, history_stack, queried_screen, current_screen, previous_screen ) {

    if( queried_screen.screen_type === 'single' && current_screen.screen_type === 'single' ) {
        if ( ( queried_screen.item_id !== previous_screen.item_id ) ) { // Going to a single to another single that is not the one we came from

            history_action = 'push';

        } else { // Going back to the previous single
            history_action = 'pop';
        }
    }

    //Memorize last history action:
    last_history_action = history_action;

    // Return the proper history action
    return history_action;

});

Then, thanks to this last_history_action memory, we can trigger the correct “previous” or “next” screen transitions when going from a single to another single:

// Handle screen transitions when going from a single and coming to a single:
App.filter( 'transition-direction', function( transition, current_screen, next_screen ){
	if( current_screen.screen_type === 'single' && next_screen.screen_type === 'single' ) {
		if ( last_history_action === 'push' ) {
			transition = 'next-screen';
		} else {
			transition = 'previous-screen';
		}
	}
	return transition;
});

Your “single to single” links should now behave nicely 🙂

Create a custom screen attached to a custom template

To create a custom app screen that is rendered using a custom template:

//In functions.js:
App.addCustomRoute( 'my-custom-screen-fragment', 'my-custom-screen-template' ); 
//Note: no final .html for the template name here!

This creates a new screen in the app that can be reached at #my-custom-screen-fragment and is rendered using the my-custom-screen-template.html template.

Then to pass custom data (my_custom_data) to your custom template:

App.filter( 'template-args', function( template_args, view_type, view_template ) {
	if ( view_template === 'my-custom-template') { //Don't need .html here

		//Add our custom data:
		template_args.my_custom_data = { key: 'value' };

		//Now "my_custom_data" variable is available in the my-custom-template.html template :)
	}
	return template_args;
} );

To go further:

• see this tutorial about creating a custom “home” screen associated to a custom “home.html” template
• more info about passing custom data to templates
• the tutorial about how routes are created and handled in WP-AppKit
• documentation for App.addCustomRoute() and “template-args” filter

2 categories for one component

As explained here Post List components queries can be customized using the wpak_posts_list_query_args filter hook.

Here’s how to define a component (slug my-component-slug) that gets posts from 2 categories (my-first-category-slug and my-second-category-slug) instead of only one.

Create a post list component in your app, associated to one category. Then use the tax_query parameter of WP_Query to customize the component’s categories and add a second category it:

//To put in the "php" folder of your WP-AppKit theme:
function two_categories_for_my_component( $query_args, $component ) {
	
	if( $component->slug === 'my-component-slug' ) {
		$query_args['tax_query'] = array(
			array(
				'taxonomy' => 'category',
				'field' => 'slug',
				'terms' => 'my-first-category-slug'
			),
			array(
				'taxonomy' => 'category',
				'field' => 'slug',
				'terms' => 'my-second-category-slug'
			)
		);
	}
	
	return $query_args;
}
add_filter( 'wpak_posts_list_query_args', 'two_categories_for_my_component', 10, 2 );

Sort component posts by alphabetical order

As explained here Post List components queries can be customized using the wpak_posts_list_query_args filter hook.

Here’s how to customize a Post List component (slug my-component-slug) query so that the posts can be sorted by alphabetical order instead of default chronological order:

//To put in the "php" folder of your WP-AppKit theme:
function my_custom_query( $query_args, $component ) {
	
	if( $component->slug === 'my-component-slug' ) {
		$query_args['orderby'] = 'name';
		$query_args['order'] = 'ASC';
		//see https://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters
	}
	
	return $query_args;
}
add_filter( 'wpak_posts_list_query_args', 'my_custom_query', 10, 2 );