# 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.

{% file src="<https://1960595267-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MO_MCuUmo-vyp_3Rc1O%2F-MObWLQHVMSHsWKSZZek%2Fvibe-boilerplate.zip?alt=media&token=aed1e35a-3f79-4ef2-b903-c9ca065572ba>" %}
Vibe Boilterplate
{% endfile %}

Link to boilerplate with node modules : [Download](https://drive.google.com/file/d/1tdtox2fQ2QHzMw7a3S2UK6Yoch9PHFkD/view?usp=sharing)

Now, install this plugin and activate the addon.

![Add to menu](https://1960595267-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MO_MCuUmo-vyp_3Rc1O%2F-MObWVOZmOOYexlCfYEF%2Fadd_to_menu.png?alt=media\&token=ef00322a-bbc1-4d24-a712-969fb3e0eb58)

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

![this is the boiler plate addon](https://1960595267-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MO_MCuUmo-vyp_3Rc1O%2F-MObWcvRcAGZDj0AgKNm%2Finterface.png?alt=media\&token=1c9c79e3-c2f4-42c8-836f-61ddeb455720)

Now you can start building the extension.

1.. open the Vibe boilerplate plugin folder  in the terminal or vscode&#x20;

2\. Now move to folder assets/boilerplate , if you open package.json there are 2 commands.&#x20;

3\. To initialise the react project, run&#x20;

```
Initialise : npm install
```

3\. Start development mode.

```
Development mode : npm run dev
```

understanding projkect strucutre

![project structure](https://1960595267-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ6s5FGS69lFw7GlM7i%2F-MO_MCuUmo-vyp_3Rc1O%2F-MObXZAwEzm1kzu0IrWe%2Freact_project.png?alt=media\&token=e12ac61f-ab40-44ec-9403-871f3a749250)

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

{% embed url="<https://www.youtube.com/watch?v=IFfyUQy4kdA>" %}