Integrating themes in Yii2 allows developers to customize the appearance of their applications efficiently. Yii2 provides built-in mechanisms for theme integration, enabling the separation of frontend assets and layout files from the core logic.
This tutorial covers:
The default way to integrate a theme in Yii2 is by configuring the theme component inside the config/web.php file.
'components' => [
'view' => [
'theme' => [
'pathMap' => [
'@app/views' => '@app/themes/custom',
],
'baseUrl' => '@web/themes/custom',
],
],
],pathMap defines where Yii2 should look for overridden view files.baseUrl specifies the URL path for theme assets.@app/themes/custom.Now, when Yii2 renders views, it will first check @app/themes/custom before falling back to @app/views.
A more modular and maintainable approach to theme integration is by using Asset Bundles. This method provides better performance and control over theme assets.
Create a new asset bundle file at assets/HomeAsset.php:
namespace app\assets;
use yii\web\AssetBundle;
class HomeAsset extends AssetBundle
{
public $sourcePath = '@app/themes/home/assets/';
public $css = [
'css/prettyPhoto.css',
'css/main.css',
];
public $js = [
'js/jquery.prettyPhoto.js',
'js/main.js',
'js/jquery.placeholder.min.js',
'js/handlebars-1.0.0.beta.6.js',
'js/core.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset',
];}In your layouts/main.php or any view file where you want to apply the theme, register the asset bundle:
use app\assets\HomeAsset;
HomeAsset::register($this);main.php Layout Files for Theme AssetsWhen integrating a new theme or updating an existing one, ensure that the main.php layout file correctly registers the theme's asset bundle.
layouts/main.php Update:<?php
/** @var yii\web\View $this */
/** @var string $content */
use app\assets\HomeAsset;
use app\widgets\Alert;
use app\widgets\BreadcrumbsCustom;
use yii\bootstrap4\Html;
HomeAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php $this->registerCsrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="page">
<div>
<?= $this->render('_header') ?>
<?= $this->render('_navbar') ?>
</div>
<div class="main-content app-content">
<div class="main-container container-fluid">
<?= BreadcrumbsCustom::widget([]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
</div>
<div class="main-footer">
<div class="col-md-12 text-center">
<div class="container-fluid">
Copyright © <?= date('Y') ?> Company. All Rights Reserved
</div>
</div>
</div>
</div>
<a href="#top" id="back-to-top"><i class="las la-arrow-up"></i></a>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>main.php:HomeAsset is registered before the beginPage() call.By following these steps, your Yii2 theme integration remains modular, organized, and easily updatable.
If you are using Yii2 Modules and want each module to have its own views and layouts, you can override the default view component inside the module’s init() method.
namespace app\modules\admin;
class Module extends \yii\base\Module
{
public function init()
{
parent::init();
\Yii::$app->view->theme = new \yii\base\Theme([
'pathMap' => ['@app/views' => '@app/modules/admin/themes/admin'],
]);
}
}admin module will use the theme located in @app/modules/admin/themes/admin.main.php Layout When Integrating a New ThemeWhen integrating a new theme, ensure that the layout structure in layouts/main.php matches the new theme's requirements. Update the <div>, <section>, and other structural elements accordingly.
use app\assets\HomeAsset;
HomeAsset::register($this);Also, verify that all CSS and JS files are correctly linked in HomeAsset.php. Missing or incorrect asset references can cause issues with the theme’s functionality.
Yii2 provides multiple ways to integrate themes, but using Asset Bundles is the recommended approach for better modularity and performance. By leveraging Yii2’s theme system, you can efficiently manage different themes and layouts in your application.
Sign in to join the discussion and post comments.
Sign in