Codeigniter Tutorials How to load CSS and JavaScript in CodeIgniter

How to load CSS and JavaScript in CodeIgniter

How to load CSS and JavaScript in CodeIgniter - Techbriefers

In this short article, I am going to explain the methods to load styles and scripts In CodeIgniter. To build a user-friendly website, the use of CSS and JavaScript is a must. Without these, we cannot make our website eye-catching as this will be just a simple white page. Firstly I will explain how to load CSS files in CodeIgniter, afterward will explain the loading of JavaScript files.

Before loading CSS and JavaScript files, we need to save them on our web server. I recommend placing all these files in separate folders. So, create ‘css’ folder to save in CSS files and ‘js’ folder to JavaScript files. One more thing that I prefer is to create an assets folder in the root directory. And put CSS and js folders in this folder.

So as per this directory structure, if we have style.css, it will be placed in assets/css/style.css. Similarly, our custom.js will have path assets/js/custom.js. Now, moving towards the process to learn how to include styles and scripts in the CodeIgniter website.

Before learning how to Load CSS and JavaScript in CodeIgniter, please do refer installation and basics of CodeIgniter here.

How to Load CSS in CodeIgniter

To load styles from external CSS files in CodeIgniter, we can opt any of the following methods.

Load CSS files in CodeIgniter by HTML <link> Tag

What we can do is, use link tag of HTML. Put this code in head section of the page. For example: Loading style.css with path as explained in the paragraphs above.

Code Explanation

base_url() function will create your website URL  (eg: http://myweb.com/) and the complete href value will be like http://myweb.com/assets/css/style.css

Another method to do so is by using the HTML helper function.

Load CSS files using link_tag() function

To load CSS files by using link_tag() function, we need to load html_helper. CodeIgniter’s html_helper enables the developers to write HTML elements without typing much HTML tags. What you need to do first is, open application/config/autoload.php. Scroll down to helpers section and add html_helper in autoload like I am doing below.

And now put the code below in <head> section of your HTML page. Place it where you want to include the CSS. link_tag() function needs a few arguments mentioned below, which are treated as attributes of HTML <link> tag.

  1. Path of CSS file (href attribute).
  2. ‘stylesheet’ as rel attribute
  3. ‘text/css’ value of type attribute
  4. String for the title attribute
  5. Media value if you want to (all, print, etc)
  6. True/False for making the link to index page or not (false by default)

You need to pass at least one parameter, i.e. CSS file path, and others are your choice. Defaults are set for CSS inclusion.

How to Load JavaScript files in CodeIgniter

To load external JavaScript files in CodeIgniter, we use HTML <script> tag.

Load JavaScript files by using HTML <script> Tag

You will have to pass the JavaScript file’s path in base_url() function under src attribute. This simple and easy step will load your scripts. This process is pretty much similar to the one we opt-in core PHP websites too.

Example:

Code Explanation

base_url() function will create your website URL (eg: http://myweb.com/) and the complete src value will be like http://myweb.com/assets/js/custom.css

Download Codeigniter

Leave a Reply