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.

  • fendy

    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:

    ——————————————————————————————————
    application
    config
    add_css(array(‘style.css’,’hashimi.css’));

    ————————————————————————————
    controllers
    load->helper(‘template’);
    $this->load->view(‘welcome_message’);
    }
    }

    helpers
    template_helpers
    (I put your article)
    ————————————————————————————————-
    views

    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:
    application/views/welcome_message.php

    The corresponding controller for this page is found at:
    application/controllers/welcome.php

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

    Page rendered in {elapsed_time} seconds

    ——————————————————————————————————————–
    css
    style.css

    system
    index.php

    please reply my comment thanks a lot..

  • @fendy;
    Did you set the css and js arrays in config?

  • jamshidhashimi

    Did you set the css and js arrays in config?

  • umesh chakor

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

  • umesh chakor

    Thank u very much..its work finely 🙂

  • umefarooq

    helpers you can call them any where, either in controller or in views

  • I got error

    I created from this site: http://ellislab.com/codeigniter/user-guide/tutorial/static_pages.html

    where i have to put all code?
    Thank you

  • Johnny

    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”)

  • jamshidhashimi

    I think you did not apply the script correctly. Where did you put the put_headers() function?

  • janvier123

    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 😉

  • Hải Dương

    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!

  • Alex Nitsa

    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?

  • Soundhar

    Thank you, works fine 🙂

  • Vishnu M

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

  • You can place it either in Controller or View.

  • Your welcome. 🙂

  • As you can use helpers both in Controller and View, you can place it in both. Please let me know of any further help.

  • manish

    if url is http://localhost/ci/index.php/user/logout then css is not working and if http://localhost/ci/index.php then css is working proverly…
    help me..

  • The github files are here: https://github.com/hashimi/dynamic-headers