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
1
Initialise : npm install
Copied!
3. Start development mode.
1
Development mode : npm run dev
Copied!
understanding projkect strucutre
project structure
A sample API call looks like :
1
const APICall = () =>{
2
setisLoading(true);
3
4
//Args is arguments from state
5
//Your endpoint as defined in the class.api.php
6
7
fetch(`${window.vibeboilerplate.api.url}/ENDPOINT`, {
8
method: 'post',
9
body: JSON.stringify({ ...args , token: select('vibebp').getToken() })
10
}).then((res) => res.json())
11
.then((data) => {
12
setisLoading(false);
13
if (data.status) {
14
//Do struff
15
}
16
}
17
})
18
}
Copied!
The handler in includes/class.api.php
the rest API init we define the API call
1
private function __construct(){
2
3
add_action('rest_api_init',array($this,'register_api_endpoints'));
4
}
5
6
7
function register_api_endpoints(){
8
9
register_rest_route( VIBE_BOILERPLATE_API_NAMESPACE, '/endpoint', array(
10
array(
11
'methods' => 'POST',
12
'callback' => array( $this, 'get_endpoint' ),
13
'permission_callback' => array( $this, 'user_permissions_check' ),
14
),
15
));
16
}
17
Copied!
and its handler.
1
function get_endpoint(){
2
3
$request = json_decode($request->get_body(),true);
4
//do all the processing here, $this->user is the user object
5
$return = array(
6
'status'=>1,
7
'user'=>$this->user
8
);
9
return new WP_REST_Response($return, 200);
10
}
Copied!
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 :
1
function user_permissions_check($request){
2
3
$body = json_decode($request->get_body(),true);
4
5
if(!empty($body['token'])){
6
global $wpdb;
7
//This filter expands the token and captures the user_id
8
9
$this->user = apply_filters('vibebp_api_get_user_from_token','',$body['token']);
10
11
/*
12
$this->user = array(
13
'id' => $user->data->ID,
14
'username'=>$user->data->user_login,
15
'slug'=>$user->data->user_nicename,
16
'email'=>$user->data->user_email,
17
'avatar'=> (function_exists('bp_core_fetch_avatar')?bp_core_fetch_avatar(array(
18
'item_id' => $user->data->ID,
19
'object' => 'user',
20
'type'=>'full',
21
'html' => false
22
)):get_avatar($user->data->user_email,240)),
23
'displayname'=>$user->data->display_name,
24
'roles'=> $user->roles,
25
'caps'=> apply_filters('vibebp_user_caps',$user->allcaps),
26
'profile_link'=>vibebp_get_profile_link($user->data->user_nicename)
27
),
28
*/
29
if(!empty($this->user)){
30
return true;
31
}
32
}
33
34
return false;
35
}
Copied!
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.

Video

Last modified 2mo ago
Copy link
Contents
Video