Skip to main content

Element Hook

Inside plugin’s index.php file use vcv:api hook for any API call. To add an element you need to pass a path to manifest.json file and URL to the base directory of your element (see WordPress plugin example.)

index.php file with hook example with a single element: index.php file with hook example with a single element:

<?phpadd_action(    'vcv:api',    function ($api) {        $api->elements->add(            '/var/www/absolute/path/to/element/myelement/manifest.json',            'http://mywordpress/url/to/element/basedirectory'        );    });

index.php file with hook with 3 elements:

<?phpadd_action(/** * @param $api \VisualComposer\Modules\Api\Factory */    'vcv:api',    function ($api) {        $elementsToRegister = [            'logoSuperTest',            'textTest',            'imageGalleryWithTestZoom',        ];        $pluginBaseUrl = rtrim(plugins_url(basename(__DIR__)), '\\/');        /** @var \VisualComposer\Modules\Elements\ApiController $elementsApi */        $elementsApi = $api->elements;        foreach ($elementsToRegister as $tag) {            $manifestPath = __DIR__ . '/elements/' . $tag . '/manifest.json';            $elementBaseUrl = $pluginBaseUrl . '/elements/' . $tag;            $elementsApi->add($manifestPath, $elementBaseUrl);        }    });

manifest.json file example:

{  "elements": {    "imageGalleryWithTestZoom": {      "settings": {        "name": "Image Gallery With Test Zoom",        "metaThumbnailUrl": "[publicPath]/image-gallery-with-zoom-thumbnail.png",        "metaPreviewUrl": "[publicPath]/image-gallery-with-zoom-preview.png",        "metaDescription": "A grid type image gallery with a test zoom effect upon hover to catch visitors' attention."      }    }  },  "categories": {    "Image gallery": {      "elements": [        "imageGalleryWithTestZoom"      ]    }  }}