Localize a store of normalized WP REST API response data. Useful for sharing data and avoiding initial API requests when using Wordpress and the WP REST API in combination with front-end frameworks like Vue, React, and Angular.
- Upload this repo to your
/wp-content/plugins/directory - Activate as you would any other Wordpress plugin
new RADL( 'my_store', 'script_handle', array());'my_store'is the name of your localized store'script_handle'is the handle of the script your store will be localized to'array()'defines the schema for your store
new RADL( 'my_store', 'script_handle', array(
'my_posts' => RADL::endpoint( 'posts' )
));'my_posts'is the key used to call the endpointRADL::endpoint( 'posts' )initializes an endpoint corresponding to'/wp/v2/posts'
// request the 10 most recent posts
RADL::get('my_posts', array( 'per_page' => 10 ));
// request a post with an id of 12
RADL::get('my_posts', 12);- If the second argument is an array, it is used as the arguments for the request, otherwise it is treated as the unique identifier for a resource at the specified endpoint
- The first request is equivalent to
GET /wp/v2/posts/?per_page=10 - The second request is equivalent to
GET /wp/v2/posts/12
- The first request is equivalent to
/**
* Single.php
*/
$my_post = RADL::get('my_posts', get_the_ID());
echo $my_post['title']['rendered'];
// outputs title of postnew RADL( 'my_store', 'script_handle', array(
'my_posts' => RADL::endpoint( 'posts', array( 12, array( 'per_page' => 10 ) ) )
));- The second argument of
RADL::endpoint()is an array of request arguments - Is the equivalent of calling
RADL::get()for each value12adds response data fromGET /wp/v2/posts/12array( 'per_page' => 10 )adds response data fromGET /wp/v2/posts/?per-page=10
new RADL( 'my_store', 'script_handle', array(
'site' => RADL::callback( 'site_info' )
));
function site_info( $arg = 'default' ) {
return array(
'name' => get_bloginfo('name'),
'desc' => get_bloginfo('desc'),
'url' => get_bloginfo('wp_url'),
'arg' => $arg
);
}'site'is the key used to access data returned from the callbackRADL::callback('site_info')initializes a callback where'site_info'is a callable that will be called bycall_user_func_array()
echo RADL::get( 'site' )['name'];
// outputs equivalent of get_bloginfo('name')
echo RADL::get( 'site', array( 'too late' ) )['arg'];
// outputs 'default'
// would output 'too late' if not previously called without arguments- Callbacks are only called once
- If not called explicitly, will be called by default with no arguments before being localized
new RADL( 'my_store', 'script_handle', array(
'state' => array(
'posts' => RADL::endpoint( 'posts' ),
'site' => RADL::callback( 'site_info' )
));- Use dot syntax for nested keys when using
RADL::get()RADL::get( 'state.posts', array( 'per_page' => 10 ) )RADL::get( 'state.site', array( 'some_val' ) )
As used in Vue.wordpress
new RADL( '__VUE_WORDPRESS__', 'vue_wordpress.js', array(
'routing' => RADL::callback( 'vue_wordpress_routing' ),
'state' => array(
'categories' => RADL::endpoint( 'categories'),
'media' => RADL::endpoint( 'media', array( 7 ) ),
'menus' => RADL::callback( 'vue_wordpress_menus' ),
'pages' => RADL::endpoint( 'pages' ),
'posts' => RADL::endpoint( 'posts', array( array( 'per_page' => 6 ) ) ),
'tags' => RADL::endpoint( 'tags' ),
'users' => RADL::endpoint( 'users' ),
'site' => RADL::callback( 'vue_wordpress_site' ),
)
) );To view example output:
- Go to vue-wordpress.com
- Open Developer Tools
- Type
__VUE_WORDPRESS__in the console and press enter