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.

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.