Asset helper tutorial for CI

Tutorial on creating a helper in CodeIgniter for organizing JS, CSS and Images.

Asset helper makes the view files more organized and speedup your coding since you can quickly include asset files to the views. We will start by creating following folder structure for organizing our assets. 

   |--- assets
           |-- css
           |-- js
           |-- img
           |-- cache

So now we have created an assets folder parallel to our CodeIgniter application folder. As next step we need to include the assets root path to a configuration file. Instead we will add it as a constant since it is not going to change frequently. So open the file at application/config/constants.php and add the following line in it.

*   End of application/config/constants.php

Now we have defined a constant with name ASSET_PATH which can be used inside our asset helper. We are planning to have three main functions inside our asset helper. 

  • css_asset
  • js_asset
  • img_asset

Also we will have one internal function for generating the URL for the above three functions and we will name it as asset_url. The asset_url is our core function which generates the relative url for the asset. Also it does one more awesome work by combining multiple files into one in runtime when asset name passed together in an array. This is useful to reduce the number server hits when more css and js files used in a single page. 

function asset_url($asset_name, $asset_type = NULL) {
    $obj = & get_instance();
    $base_url = $obj->config->item('base_url');
    $asset_root = '/assets/';
    $asset_location = $base_url . $asset_root;
	if (is_array($asset_name))
		$cachename = md5(serialize($asset_name));
		$asset_location .= 'cache/' . $cachename . '.' . $asset_type;
		if(!is_file($asset_root . 'cache/' . $cachename . '.' . $asset_type))
			$out = fopen($asset_root . 'cache/' . $cachename . '.' . $asset_type, "w");
			foreach($asset_name as $file)
				$file_content = file_get_contents($asset_root . $asset_type . '/' . $file);
				fwrite($out, $file_content);
		$asset_location .= $asset_type . '/' . $asset_name;
    return $asset_location;

So now we have implemented our core function and will see how to implement the remaining helper functions which are actually called from our view files.

function css_asset($asset_name,$attributes = array()) {
	$attribute_str = _parse_asset_html($attributes);
	return '<link href="' . asset_url($asset_name,'css') . '" rel="stylesheet" type="text/css"' . $attribute_str . ' />';


function js_asset($asset_name) {
	return '<script type="text/javascript" src="' . asset_url($asset_name,'js') . '"></script>';


function image_asset($asset_name, $module_name = '', $attributes = array()) {
	$attribute_str = _parse_asset_html($attributes);
	return '<img src="' . asset_url($asset_name,'img') . '"' . $attribute_str . ' />';


function _parse_asset_html($attributes = NULL) 
	if (is_array($attributes)):
		$attribute_str = '';
		foreach ($attributes as $key => $value)
			$attribute_str .= ' ' . $key . '="' . $value . '"';
		return $attribute_str;
	return '';

Using the asset helper

Now we have completed with the asset helper and it is the time to use it. Place the files in appropriate folder then call it using one of the below method inside the view files.

	echo css_asset('mystyle.css');
	echo image_asset('myimage.css');
	echo js_asset('myscript.js');

For image_asset() and css_asset() you can pass the second optional parameter as an array containing the attributes for the HTML element.

Website in minutes

Do you know that you can generate a complete PHP websites in minutes with PHP Website Generator?


  • Free admin dashboard
  • Role based security
  • Login with Facebook, Google and more
  • Queue based email processing
  • Price at $3 for website
  • Uses CodeIgniter framework

Generate website now See Pricing

You can generate an entire website in CodeIgniter using our PHP Website Generator using easy to use wizards. PHP Website Generator provide many features including search with pagination, AJAX based grid data editors, Group based security and free Admin dashboard etc. Please connect with Google or Facebook and to generate your CodeIgniter website in minutes.