How to create a widget

Posted on January 11, 2020

Tutorials

In this tutorial we will create a widget that displays the last tweets of an account. Instead of using an event to run the code, we let the administrator create instances of the widget and choose in which widget area wants to display the plugin. Inside src/ create a folder twitter-timelines and add the following files:

package.json
load.php
widgets/twitter-timeline/widget.php
widgets/twitter-timeline/twitter-timeline.php

package.json:

{
  "name":"Twitter Timelines",
  "version":"1.0.0",
  "description":"Installs a widget to display twitter timelines."
} 

load.php:

<?php 
// registers the widget name and its path 
Config::widgets([ 'twitter-timeline'=>'twitter-timelines/widgets/twitter-timeline' ]); 

widgets/twitter-timeline/widget.php will include the widget options we want to use. In this case we need the user account and the name to be displayed.

<?php 

return [
   'accountID'=>[ 'title'=>'Twitter Account' ]
]; 

widgets/twitter-timeline/twitter-timeline.php is the view file of the widget, it will generate the html code. We use the embedding Twitter content from here

<?php 
$account = Config::getOption('twitter-timelines.accountID','gilacms'); 
?> 
<a class="twitter-timeline" data-height="400" href="https://twitter.com/<?=$account?>">Tweets by <?=$account?></a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Config::getOption() gets the option of the package that we set up in the package settings. A default value can be used if the option is null.

 

Activate the package.

Now in /admin/widgets you can create a new widget with type twitter-timeline and set the widget area sidebar or dashboard to see it.

 

Subscribe to our newsletter