Widgets

Overview

WordPress provides a powerful way to create your own widgets. WP Bones provides a simple way to add your own Widgets.

Create a Widget Service Provider

You may create your own widget service provider by following the steps below:

php bones make:widget MyWidget

By default, the new provider will be created in the plugins/Widgets directory. Of course, you may create your Service Provider manually and in any directory you prefer. You have to change the namespace accordingly.

/plugin/Widgets/MyWidget.php
<?php
namespace WPKirk\Widgets;
 
use WPKirk\WPBones\Support\Widget;
 
class MyWidget extends Widget
{
  // TODO
}

Edit the Widget Service Provider

Below is an example of a simple Widget Service Provider:

/plugin/Widgets/MyWidget.php
<?php
namespace WPKirk\Widgets;
 
use WPKirk\WPBones\Support\Widget;
 
class MyWidget extends Widget
{
 
  /**
   * Base ID for the widget, lower case, if left empty a portion of the widget's class name will be used. Has to be
   * unique.
   *
   * @var string
   */
  public $id_base = 'wpkirk-demo-widget';
 
  /**
   * Name for the widget displayed on the configuration page.
   *
   * @var string
   */
  public $name = 'WP Kirk Widget';
 
  /**
   * Optional. Passed to wp_register_sidebar_widget()
   *
   * - description: shown on the configuration page
   * - classname
   *
   * @var array
   */
  public $widget_options = [
    'description' => 'WP Kirk Demo Widget Description'
  ];
 
  /**
   * Optional. Passed to wp_register_widget_control()
   *
   * - width: required if more than 250px
   * - height: currently not used but may be needed in the future
   *
   * @var array
   */
  public $control_options = [
    'width'           => 400,
    'height'          => 350,
  ];
 
  /**
   * Update the widget options.
   *
   * @return array
   */
  public function update( $new_instance, $old_instance )
  {
    $old_instance[ 'title' ] = ( $new_instance[ 'title' ] );
 
    return $old_instance;
  }
 
  /**
   * Retrun a key pairs array with the default value for widget.
   *
   * @return array
   */
  public function defaults()
  {
    return [
      'title' => 'My Title',
    ];
  }
 
  public function viewForm( $instance )
  {
    return WPKirk()->view( 'widgets.form' );
  }
 
  public function viewWidget( $args, $instance )
  {
    return WPKirk()->view( 'widgets.index' );
  }
}

As you can see, this new Widget class supports the resource view like a view.

The viewForm method should return the view used in the backend admin area.

The viewWidget should return the view used in the frontend. In other words, this is the output of the widget.

In these methods, you may choose which view to return. Inside the view, you’ll have available $plugin instance, $instance WordPress variable, and Html facade. For example, in widgets.form you can:

<div>
	<h1>Widget Backend</h1>
	<h3><?php echo $plugin->Name ?></h3>
	<?php echo WPKirk\Html::button( 'Click Me!' ) ?>
</div>

Of course, if you wish to share the $instance variable, then you can:

return WPKirk()->view( 'widgets.form' )->with( 'instance', $instance );
<div>
	<h1>Widget Backend</h1>
	<h2><?php var_dump( $instance ) ?></h2>
	<h3><?php echo $plugin->Name ?></h3>
	<?php echo WPKirk\Html::button( 'Click Me!' ) ?>
</div>

Load the Widget Service Provider

Add this new Service Provider to the list of providers in the /config/plugin.php file:

config/plugin.php
  /*
  |--------------------------------------------------------------------------
  | Widgets
  |--------------------------------------------------------------------------
  |
  | Here is where you can register all of the Widget for a plugin.
  |
  */
 
  'widgets' => [ '\WPKirk\Widgets\MyWidget' ],