To create a custom theme in Yii, follow these steps: 1. Set up your theme folder structure under /themes/, replicating the views structure for overrides. 2. Enable the theme by configuring the view component in config/web.php with basePath, baseUrl, and pathMap to map original views to the theme. 3. Override layouts and views selectively by placing modified files in the theme folder while allowing others to fall back to defaults. 4. Manage assets properly by placing CSS, JS, and images in /web/themes/mytheme/ and registering them via registerCssFile or custom asset bundles.

Creating a custom theme in Yii isn't too hard once you understand how the theming system works. The main idea is to separate your theme files from your main application code so that you can switch looks easily without changing logic.

Here’s how to do it step by step.

1. Set Up Your Theme Folder Structure

In Yii, themes live inside the themes folder of your project. You'll need to create a folder for your theme — let's say "mytheme" — and inside it, replicate the structure of your views.

For example:

/themes/mytheme/
    ├── site/
    │   └── index.php
    └── layouts/
        └── main.php

This way, when you enable this theme, Yii will look for view files here instead of in the default locations.

If you're using advanced template (with frontend and backend), make sure to place your theme folder under the correct app (like /frontend/themes/mytheme).

2. Enable the Theme in Configuration

To activate your theme, you need to configure the view component in your config file (config/web.php or similar depending on your setup):

'components' => [
    'view' => [
        'theme' => [
            'basePath' => '@app/themes/mytheme',
            'baseUrl' => '@web/themes/mytheme',
            'pathMap' => [
                '@app/views' => '@app/themes/mytheme',
            ],
        ],
    ],
],

What this does:

• Tells Yii where to find the theme files.
• Maps your original view paths to the theme version.
• So when a page tries to load site/index, it loads the one in your theme folder if it exists.

3. Override Layouts and Views

Now that the theme is active, you can start replacing layouts and individual view files.

The most common layout to customize is layouts/main.php. Copy your current layout file there and modify it as needed — change CSS links, HTML structure, header/footer styles, etc.

For specific pages like site/index.php, just drop a version into your theme folder and it will override the default one.

? Tip: It’s best to only copy the files you want to change. Let the rest fall back to default views unless you need to replace them.

4. Use Assets Properly

Don’t forget about assets — CSS, JS, images. These should go into your web-accessible folder, like /web/themes/mytheme/.

Then reference them in your layout like this:

<?php $this->registerCssFile('@web/themes/mytheme/css/style.css') ?>

Or better yet, use asset bundles if you’re managing multiple CSS/JS files.

You can even create a custom asset bundle class for your theme:

class MyThemeAsset extends AssetBundle {
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = ['themes/mytheme/css/style.css'];
}

Then register it in your layout with:

MyThemeAsset::register($this);

That's basically how to set up a custom theme in Yii. It’s not complicated, but it helps to keep things organized and know which files are being overridden. Once you get the structure right, switching themes becomes easy.

Just remember to clear your cache after setting up a new theme — sometimes Yii doesn't pick up changes immediately.

The above is the detailed content of How do I create a custom theme in Yii?. For more information, please follow other related articles on the PHP Chinese website!