How to load CSS and JavaScript in CodeIgniter
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 and 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 CSS files and ‘js’ folder for 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 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 for any of the following methods.
Load CSS files in CodeIgniter by HTML <link> Tag
What we can do is, use the link tag of HTML. Put this code in the head section of the page. For example, Loading style.css with the path as explained in the paragraphs above.
<link rel="stylesheet" href="<?php echo base_url(‘assets/css/style.css’) ?>" type="text/css" />
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 the link_tag() function, we need to load html_helper. CodeIgniter’s html_helper enables developers to write HTML elements without typing many HTML tags. What you need to do first is, open application/config/autoload.php. Scroll down to the “helpers” section and add html_helper in autoload like I am doing below.
$autoload['helper'] = array('html');And now put the code below in the <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.
- Path of CSS file (href attribute).
- ‘stylesheet’ as rel attribute
- ‘text/css’ value of type attribute
- String for the title attribute
- Media value if you want to (all, print, etc)
- True/False for making the link to the 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.
<?php echo link_tag('assets/css/style.css'); ?>
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 the src attribute. This simple and easy step will load your scripts. This process is pretty much similar to the one we opt-in for core PHP websites too.
Example:
<script src="<?php echo base_url('assets/js/custom.js'); ?>"></script>
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