Custom Widget Plugin

Widgetkit is modular and extendable by design: Widget content and widget rendering are separate from each other.

In this article you will learn how to create your own widget plugin. A widget plugin is used by Widgetkit to determine how a given content element is rendered. This allows a content element to be reused and to be rendered in different ways each time.

In order to create your own widget plugin you can copy an existing one and start adapting it to your needs. Alternativeley, you can create a new one from scratch following the steps explained here. In both scenarios you should rely on the existing plugins as reference. They are located in the /wp-content/plugins/widgetkit/plugins/widgets folder in WordPress and /administrator/components/com_widgetkit/plugins/widgets folder in Joomla.

The plugin.php file contains a PHP array to set your plugin by passing the configurations and event functions to Widgetkit. Don't forget the return statement, as this file is supposed to return a valid configuration array.

<?php
return array(
// Main class the plugin is extending
'main' => 'YOOtheme\\Widgetkit\\Widget\\Widget',
// Plugin configuration
'config' => function($app) {
return array(
// Plugin raw name
'name' => 'PLUGIN-NAME',
// Plugin label which will be displayed to the user
'label' => 'PLUGIN-LABEL',
// Url to the icon that will be used in the widget plugin overview
'icon' => $app['url']->to('plugins/widgets/PLUGIN-NAME/widget.svg'),
// Path to the view file that will be used when rendering the widget
'view' => 'plugins/widgets/PLUGIN-NAME/views/widget.php',
// Supported widget fields
// A list of fields the widget requires from a selected content element.
// Example: The map requires a 'location' field to be present.
'item' => array('title', 'content'),
// Default settings to be used for every widget instance
'settings' => array(
'key' => 'value'
)
);
},
// An array of Widgetkit events you want to listen to
'events' => array(
// Triggered when Widgetkit is initialized in the back end
'init.admin' => function($event, $app) {
// Registers the edit view
$app['angular']->addTemplate('PLUGIN-NAME.edit', 'plugins/widgets/PLUGIN-NAME/views/edit.php', true);
},
// Triggered when Widgetkit is initialized in the front end
'init.site' => function($event, $app) {},
// Triggered when Widgetkit is initialized
'init' => function($event, $app) {}
)
);

The view/edit.php file contains the form layout that will be displayed when setting up the Widget rendering options. It relies on UIkit for its styling and on AngularJS for the logic. Check the respective documentation for further information.