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.

Link to boilerplate with node modules : Download

Now, install this plugin and activate the addon.

2. Refresh BuddyPress navigation from WP admin - Vibebp - Settings - BuddyPress

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

A sample API call looks like :

const APICall = () =>{
		//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) => {
				if (data.status) {
				  //Do struff

The handler in includes/class.api.php

the rest API init we define the API call

private function __construct(){


	function register_api_endpoints(){

		register_rest_route( VIBE_BOILERPLATE_API_NAMESPACE, '/endpoint', 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(
        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);

            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,
                        'avatar'=> (function_exists('bp_core_fetch_avatar')?bp_core_fetch_avatar(array(
                                        'item_id' => $user->data->ID,
                                        'object'  => 'user',
                                        'html'    => false
                        'roles'=> $user->roles,
                        'caps'=> apply_filters('vibebp_user_caps',$user->allcaps),
                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 updated