Done! After weeks of work, the new shiny O.3 version is finally here 🙂

App’s Panel Reinvented

10 months ago, Lionel joined us on this crazy project. He has worked on many aspects of the plugin since but we are very proud to announce that he has led the 0.3. Lionel has done a marvelous work on the app’s panel to offer a much better user experience. I am sure you will like it.

Let’s take a look in video! (turn sound on and double-click for fullscreen.)

As Usual, you can download WP-AppKit from GitHub:

Better Theme API

Along with the UI redesign, Mathieu also took time to enhance the theme API.

  • You can now pass any custom JavaScript variable or module to app templates using the new template-args JavaScript filter. For example if you develop a custom Javascript module in your theme, you can now use it anywhere in your templates.
  • All app jQuery AJAX calls (for web services) can now be customized. Thanks to the new ajax-args JavaScript filter, any setting from the jQuery.ajax() function can be set on WP-AppKit web services. Very useful to pass HTTP authentication data along with web services for example.
  • And last but not least, it is now possible to pass any custom data from your app to the server when calling a web service. Using the web-service-params JavaScript filter, you can now send any parameter that is specific to your current app state (like an app user setting) along with web services and filter your component query accordingly on server side.

For example, to filter a Post List component on categories that the app user would choose on app side: in functions.js, add your user categories to the web service using the web-service-params JavaScript hook.

App.filter( 'web-service-params', function ( web_service_params, web_service_name ){	

web_service_params.user_categories = your_user_categories_slug_array;

return web_service_params;
} );

On server (WordPress) side use the wpak_posts_list_query_args filter and the new WpakWebServiceContext class to filter your component content with the user categories received from the app.

add_filter( 'wpak_posts_list_query_args', 'filter_by_app_user_categories', 10, 2);
function filter_by_app_user_categories( $query_args, $component ){

//Retrieve categories sent by the app :
	$user_categories_slugs = WpakWebServiceContext::getClientAppParam('user_categories');

	//Set the WP_Query’s ‘tax_query’ param accordingly :

$query_args['tax_query']['relation'] = 'OR';
	foreach( $user_categories_slugs as $cat_slug ) {
		$query_args['tax_query'][] = array(
			'taxonomy' => 'category',
			'field'    => 'slug',
			'terms'    => $cat_slug,

        return $query_args;

We really hope that 0.3 will allow you to shape better apps 🙂

Published by Benjamin on May 7, 2015

Head of Digital for a press group, WordPress since 2008, WordCamp organizer, developer for the fun


  1. Very nice. And good doc web page too!

    Your wpak_custom_component filter example uses array_column which requires php 5.5. Perhaps a note about that and how to use array_map instead?

    A little more info on what should go in the PhoneGap Build fields would also be helpful.

    Thank you for all the work. Looking forward to new releases!

  2. Really good job! I love these projects popping out of the ground for WordPress. This one is in particular very usefull for me.

    The docs are easy to read and makes the learning curve a bit smaller!

    Keep up the good work and i’m also looking forward to new releases!

  3. Can I use this from a CLI using node.js and Cordova or do I have to use Phonegap Build?

    • Hi, you can use Cordova CLI. However there’s some specific things to keep in mind:

      • you have to add <access origin=”*” /> in config.xml
      • since last CLI version, for the <<access> setting to work, we need to add the "cordova-plugin-whitelist" plugin
      • config.xml must be at the root of the Phonegap project and not in the www folder as it is by default when exporting from WPAK
      • the next WPAK version 0.4 will have a specific WPCLI command for this CLI export

Leave a Reply

Your email address will not be published. Required fields are marked *

Having questions?

FAQ | Tutorials | Documentation


Contact Us