Custom Extension

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
Link to boilerplate with node modules : Download​
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.
Video
​

Developer Guide - Previous

Customisation tips

Next - FAQs

FAQs

Last modified 2mo ago

Copy link