How to create a widget

Posted on July 12, 2025

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.