How to create custom widget in Yii2

This tutorial will show you how you can create your own custom widget in Yii2. Widgets are reusable blocks and they are used in your views. The main advantage of Widget is you can write once and reuse it wherever you need it in your view.

To create a custom widget we must extend the base widget yii\base\Widget and we have to override the init() and/or run() methods of base widget.

Here are the simple steps for creating a custom widget.

Step1:
Make a folder named “components” in your project root folder.

step2:
Create a file with desired widget name inside components folder and copy paste the below code and change the class name in the code. Example – Mywidget.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
<?php
namespace app\components;
use yii\base\Widget;
use yii\helpers\Html;
class Mywidget extends Widget {
    public $message;
    public function init() {
        // your logic here
        parent::init();
        if ($this->message === null) {
            $this->message = 'Welcome Guest';
        } else {
            $this->message = 'Welcome ' . $this->message;
        }
    }
    public function run(){
        // you can load & return the view or you can return the output variable
        return $this->render('myWidget', ['message' => $this->message]);
    }
}
?>

In this class, Mywidget is our custom widget. app\components is the namespace of this class and Mywidget is a class name. Using both namespace and class name, we can access this widget like app\components\Mywidget.

Create a views folder inside components folder. Create a view file named myWidget.php in components/views folder and put your content in it.

Step3:
You are done!. Now you can use your widget inside any of your app views.

Usage example –

1
<?php echo \app\components\MyWidget::widget() ?>

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.