Widgetkit是模块化扩展设计形式: 它可以将内容和介绍彼此分开.


In order to create your own content provider you can copy an existing one and start adapting it to your needs. Alternatively, you can create a new one from scratch following the steps explained here. In both scenarios you shoud rely on the existing plugins as reference, which you can find in the/wp-content/plugins/widgetkit/plugins/content folder in WordPress and/administrator/components/com_widgetkit/plugins/content folder in Joomla.

NOTE Please make sure to  style="color: #0096d7;" title="Where to Store Your Customizations">store your customizations in a way so that they don't get lost during a Widgetkit update.


Let's start by creating the file structure for our plugin. We need the main file, an icon and the view to render the content editor layout.

|-- plugin.php          // main plugin content|-- content.svg         // plugin icon in SVG format+-- views/|      edit.php         // edit form layout


The plugin.php file contains a PHP array to set your plugin by passing the configurations and event functions to Widgetkit. Whatever logic you need it must be passed throught this array. Checkout the comments to get information about what does each one of it. Don't forget the return statement, as this file is supposed to return a valid configuration array.


return array(

    // Plugin name

    // Main class the plugin is extending

    // Plugin configuration

        return array(

            // Plugin raw name
            'name'  =>'PLUGIN-NAME',

            // Plugin label which will be displayed to the user

            // Url to the plugin icon
            'icon'  => $app['url']->to('plugins/content/PLUGIN-NAME/content.svg'),

            // Supported widget fields
            'item'  => array('title','content','link','media'),

            // Default configuration data
            'data'  => array(

    // Function that will retrieve and return the widget items
    'items'=>function($items, $content, $app){

        // Retrieve the data and maps it to the widget item
        foreach($source as $value){

            $data = array();

            // Add new item to the widget array of items


    // 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

        // Triggered when Widgetkit is initialized in the front end
        'init.site'=>function($event, $app){},

        // Triggered when Widgetkit is initialized
        'init'=>function($event, $app){}



The views/edit.php file contains the form layout that will be displayed in the Widgetkit admin area when setting up the content provider. It relies on UIkit;for its styling and on AngularJS;for the logic. Check the respective documentation for further information.

<!-- wrap the content with uk-form style --><divclass="uk-form uk-form-stacked">

    <!-- wrap each field -->

        <!-- set the field label -->

        <!-- set the field inputs -->


    <!-- other examples -->
            <label><inputtype="checkbox"ng-model="content.data['FIELD-NAME']"ng-true-value="1"ng-false-value="0"> FIELD-LABEL</label>