Custom Extension
Here's a custom extension boilerplate template for building custom functionality in VibeBP.
The VibeBP framework uses Bulma for its internal styling so we recommend re-using Bulma components to keep your CSS and scripts size to a minimum
Here's a sample extenstion which you can use to develop your custom features in the WPLMS / VibeBP framework.
vibe-boilerplate.zip
104KB
Binary
Vibe Boilterplate
Now, install this plugin and activate the addon.
Add to menu
2. Refresh BuddyPress navigation from WP admin - Vibebp - Settings - BuddyPress
this is the boiler plate addon
Now you can start building the extension.
1.. open the Vibe boilerplate plugin folder in the terminal or vscode
2. Now move to folder assets/boilerplate , if you open package.json there are 2 commands.
3. To initialise the react project, run
Initialise : npm install
3. Start development mode.
Development mode : npm run dev
understanding projkect strucutre
project structure
A sample API call looks like :
const APICall = () =>{
setisLoading(true);
//Args is arguments from state
//Your endpoint as defined in the class.api.php
fetch(`${window.vibeboilerplate.api.url}/ENDPOINT`, {
method: 'post',
body: JSON.stringify({ ...args , token: select('vibebp').getToken() })
}).then((res) => res.json())
.then((data) => {
setisLoading(false);
if (data.status) {
//Do struff
}
}
})
}
The handler in includes/class.api.php
the rest API init we define the API call
private function __construct(){
add_action('rest_api_init',array($this,'register_api_endpoints'));
}
function register_api_endpoints(){
register_rest_route( VIBE_BOILERPLATE_API_NAMESPACE, '/endpoint', array(
array(
'methods' => 'POST',
'callback' => array( $this, 'get_endpoint' ),
'permission_callback' => array( $this, 'user_permissions_check' ),
),
));
}
and its handler.
function get_endpoint(){
$request = json_decode($request->get_body(),true);
//do all the processing here, $this->user is the user object
$return = array(
'status'=>1,
'user'=>$this->user
);
return new WP_REST_Response($return, 200);
}
the permissions to validate the request is handled by VibeBP as this logged in area. It will also initialise a class object and assign the user value in the form as described below :
function user_permissions_check($request){
$body = json_decode($request->get_body(),true);
if(!empty($body['token'])){
global $wpdb;
//This filter expands the token and captures the user_id
$this->user = apply_filters('vibebp_api_get_user_from_token','',$body['token']);
/*
$this->user = array(
'id' => $user->data->ID,
'username'=>$user->data->user_login,
'slug'=>$user->data->user_nicename,
'email'=>$user->data->user_email,
'avatar'=> (function_exists('bp_core_fetch_avatar')?bp_core_fetch_avatar(array(
'item_id' => $user->data->ID,
'object' => 'user',
'type'=>'full',
'html' => false
)):get_avatar($user->data->user_email,240)),
'displayname'=>$user->data->display_name,
'roles'=> $user->roles,
'caps'=> apply_filters('vibebp_user_caps',$user->allcaps),
'profile_link'=>vibebp_get_profile_link($user->data->user_nicename)
),
*/
if(!empty($this->user)){
return true;
}
}
return false;
}
so the subsequent functions in a successful REST API call have the object $this->user as the validated user object passed from Vibebp to API call.
Last modified 10mo ago