askupa-software/amarkal-widget

Develop WordPress widgets based on Amarkal UI

amarkal-widget

Develop WordPress widgets based on Amarkal UI., _(*1)

Tested up to: WordPress 4.7
Dependencies: amarkal-ui, _(*2)

, _(*3)

Overview

amarkal-widget lets you develop widgets for your WordPress theme or plugin, using amarkal-ui. amarkal-widget takes care of building the admin user form and saving the user input, so you can concentrate on building the widget itself!, _(*4)

Installation

Via Composer

If you are using the command line:, _(*5)

$ composer require askupa-software/amarkal-widget:dev-master

Or simply add the following to your composer.json file:, _(*6)

"require": {
    "askupa-software/amarkal-widget": "dev-master"
}

And run the command, _(*7)

$ composer install

This will install the package in the directory vendors/askupa-software/amarkal-widget. Now all you need to do is include the composer autoloader., _(*8)

require_once 'path/to/vendor/autoload.php';

Manually

Download amarkal-ui and amarkal-widget from github and include them in your project., _(*9)

require_once 'path/to/amarkal-ui/bootstrap.php';
require_once 'path/to/amarkal-widget/bootstrap.php';

Usage

Create a class that inherits from \Amarkal\Widget\AbstractWidget. This class should implement 2 methods:, _(*10)

• config() - a public function that returns an array with the widget's configuration.

• widget( $args, $instance ) - a public function that prints the widget's front-end HTML., _(*11)

  Configuration Arguments

Example Code

Create a class for your widget:, _(*12)

class MyCoolWidget 
extends \Amarkal\Widget\AbstractWidget
{   
    /**
     * The widget's configuration
     */
    public function config()
    {
        return array(
            'id'              => 'm-cool-widget',   // The widget's id
            'name'            => 'My Cool Widget',  // The widget's id
            'widget_options'  => array(
                'description' => 'Just a very very cool widget...'  // The widget's description
            ),
            'control_options' => array(),           // Optional

            /**
             * The 'fields' argument specifies a list of amarkal-ui components to be used for the widget's admin form.
             */
            'fields'          => array(
                array(
                    'name'          => 'title',
                    'title'         => __( 'Title:', 'slug' ),
                    'default'       => 'My Cool Widget',
                    'description'   => 'Specifies the widget\'s title',
                    'type'          => 'text'
                ),
                array(
                    'name'          => 'content',
                    'title'         => __( 'Text:', 'slug' ),
                    'default'       => 'My cool widget content',
                    'description'   => 'Specifies the widget\'s content',
                    'type'          => 'text'
                ),
            )
        );
    }

    /**
     * The front-end display of widget. User data is accesible through the $instance variable.
     */
    public function widget( $args, $instance ) 
    {
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );        

        echo $args['before_widget'];

        // Echo the widget's title if not empty
        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }

        // Echo the widget's content if not empty
        if( $instance['content'] ) {
            echo '<p>'.$instance['content'].'</p>';
        }

        echo $args['after_widget'];
    }
}

Then register the widget as you would register any other widget:, _(*13)

function register_widgets() {
    register_widget( 'MyCoolWidget' );
}
add_action( 'widgets_init', 'register_widgets' );