Yii 1.1: How to include Javascript, CSS


There are many methods that we can include javascript, css into your Yii App. Today I will demonstrate three simple and helpul methods.

A simple way to add js, css by editing config/main.php

// application components
         // ...
        // ...

Using getClientScript

Usually, We add in block of code into Controller or layout of your theme

You can also add scripts from controller action. Just add this line in an action method then that script will apear only in that view:

$baseUrl = Yii::app()->baseUrl; 
$cs = Yii::app()->getClientScript();

Or shorter:


Please notice the second parameter when you register the js file, it's the position of your script, when you set it CClientScript::POS_END, you let the HTML renders before the javascript is loaded.

Include core js files of framework

such as: jquery.js, jquery.ui.js


Include Js, css all action

In protected/components/Controller.php, this class extends CController, we override action named "beforeAction" we declare what js, css that we want o add to site.


public function beforeAction($action) {
    if( parent::beforeAction($action) ) {
        /* @var $cs CClientScript */
        $cs = Yii::app()->clientScript;
        /* @var $theme CTheme */
        $theme = Yii::app()->theme;
        $cs->registerScriptFile( $theme->getBaseUrl() . '/js/highlight.js' );
        $cs->registerScriptFile( $theme->getBaseUrl() . '/js/jquery.ba-dotimeout.min.js' );
        $cs->registerScriptFile( $theme->getBaseUrl() . '/js/jquery.scrollTo-' );
        //$cs->registerScriptFile( $theme->getBaseUrl() . '/js/jquery.scrollTo-min.js' );
        $cs->registerScriptFile( $theme->getBaseUrl() . '/js/script.js' );
        $cs->registerCssFile($theme->getBaseUrl() . '/css/reset.css');
        $cs->registerCssFile($theme->getBaseUrl() . '/css/main.css');
        return true;
    return false;

Total 4 comments

#19048 report it
Jesse at 2015/03/03 10:44pm
ScriptMap and CoreScript position

Great article, thank you for this. Another point that some users may find useful is coreScriptPosition and scriptMap.


With 'coreScriptPosition' a user can move core script files to any ClientScript position available. If CClientScript::POS_END is set then script files, such as jquery, will move to the end of the view. This will ultimately speed up the visual load of the page and prioritize jquery functionality second.

Keep the CSS at the top of the page because it is important to the styling. Secondly, all of your registered script files that depend on jquery and more should include CClientScript::POS_END or jquery won't be ready and your script will return an error.



Script map is useful for easily matching js and css files to a CDN. This is used instead of 'packages'.


Example Usage


// application components

and in the main layout view: protected/views/layout/main.php

Yii::app()->clientScript->registerCssFile( Yii::app()->request->baseUrl . '/css/font-awesome.min.css');
Yii::app()->clientScript->registerScriptFile( Yii::app()->request->baseUrl . '/js/bootstrap.min.js',CClientScript::POS_END );

I hope this helps someone.

#18600 report it
David Newcomb at 2014/11/27 08:06am
Pros and cons

The main pro is that it allows you to add javascript (or any other files) to the head/footer sections of the page without altering the layout. Without this feature you would have to add the script tags inside your view file which does not sit well with the MVC separation of concerns pattern. The only con I can think of is that you have to read some documentation in order to learn how to use it!

#15375 report it
Interboy at 2013/11/03 01:51am
@Evgeniy Tkachenko

If you have got more information or resource of this topic, feel free to update by clicking on "Update this article".

This may help Yii users alot.

#15262 report it
YiiJeka at 2013/10/22 03:24am
not fully

Information is incomplete, not fully disclose the fact. Does not tell what are the pros and cons. If I was a rookie, then read the article and did not understand, it's better than the native code:

<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="//www.google.com/jsapi" type="text/javascript"></script>

Leave a comment

Please to leave your comment.

Write new article