Installation
Administrator Guide
Instructor Guide
Student Guide
Extensions & Addons
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