Dynamically Add Javascript and CSS Files in CodeIgniter Header Page

Those who are developing web projects know that, header pages are always the constant file of their template folder. The classic way of using a header page in small projects are to fill it with constant JavaScript and CSS files along with html tags and use it in inside functions where you need. The problem arise when you start to develop a bigger project where you need to use different JavaScript and CSS files. The bad practice is to load all needed files in the header page, that will also start to appear and load in the pages and sections which we do not need them. This will make the page load slow and will cause conflicts and usage problems.

The solution to this problem is to dynamically load the CSS and JavaScript files in the pages we need them and make our page load faster by reducing the included files according to our exact need.

To implement this in CodeIgniter, firstly set the default CSS and JavaScript files in config.php

then, add this helper functions I wrote, to your template helper (or any other helper files you use)

Now, you can manually add CSS and JavaScript files as below:

lastly, you can use the put_headers function to load your CSS and JavaScript files in to your header page.

You can easily extend this helper function to minify your CSS and JavaScript files and pass parameters for further use.

Update: here is the code in Github.

24 thoughts on “Dynamically Add Javascript and CSS Files in CodeIgniter Header Page

  1. hi, it’s nice to meet u jam,

    I already implement your article dinamically add js n css, but still cannot working ….
    The file I added to codeigniter:



    (I put your article)

    Welcome to CodeIgniter

    Welcome to CodeIgniter!

    The page you are looking at is being generated dynamically by CodeIgniter.

    If you would like to edit this page you’ll find it located at:

    The corresponding controller for this page is found at:

    If you are exploring CodeIgniter for the very first time, you should start by reading the User Guide.

    Page rendered in {elapsed_time} seconds



    please reply my comment thanks a lot..

  2. pls tell em where i put the
    add_js(‘jamshid.js’); in controller or in Views if I put in view then how can i call them

  3. Thank you for this. But it would be great of that stuff is actually working. It puts js and css tags alright but no in header of layout. Called from some view it just puts js file or css file in that view and not in layout header. So this is not substitue form $zend->headScript()->apned(“script”)

  4. just add this

    Call the helper file “css_js_helper” and place in “/application/helpers”
    In your autoload file add “$autoload[‘helper’] = array(‘css_js’);”
    Put in your header “”

    Then is works perfectly 😉

  5. help me, i can’t load my css <link href="public/frontend/css/style.css” rel=”stylesheet” type=”text/css” media=”screen” />

    i used : RewriteCond $1 !^(index.php|images|robots.txt|css);

    RewriteRule ^(.*)$ /anh01/index.php/$1 [L];

    but don’t load css!

  6. Hi, Friends

    I am new with this framework… coming from wordpress world… can I ask where to add the css and js files from this post?

  7. add_css(array(‘jamshid.css’,’hashimi.css’));
    where i place this code controllrer or in iews

  8. this is not working for me..??
    config.php file showing but wiew file din’t show..! Please help

  9. @Jamshid Hashimi bro i have a problem and a question as well.
    when i go to header file and echo put_headers(); so all css and js include in header while i want to load js in the footer. so how can i do this? please guide me.

  10. ohh i have solved my problem bro. i have just add another put function with the of put_headers_js() for js files and echo in footer and it has worked fine for me thanks…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.