• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Rahul Bodana

Blogger, Programmer & Trader

  • Code
  • Charm
  • Money
  • Write
Home » Code » PHP » WordPress » WP Themes » How to Include CSS & JS files in WordPress themes

How to Include CSS & JS files in WordPress themes

April 16, 2022

In WordPress themes depending on our requirements we can create additional stylesheets and JavaScript files.

Apart from creating them, it is also necessary to load those files using standerd WordPress menthod.

In WordPress we use enqueue function that laod all of our scripts and styles.

This function, just like any other function should be added in our themes functions.php file.

Enqueuing Stylesheets

style.css is the hard requirement to any of the WordPress theme, without it you can not even enable theme in dashboard.

Other than that, we also have option to additinal stylesheet files in our theme.

Some feature like navingation menu are required to have Javascript to function propely and for that we need to add Javascript as well.

To load style.css file we use:

wp_enqueue_style('style', get_stylesheet_uri())

The parameters shown here in wp_enqueue_style() are $handle and $src which is required to load stylesheet file.

Here are the all of the Parameters of wp_enqueue_style function and why they are used:

  • $handle: It is the first parameter in this function. This is simply the name of the CSS file. For exaplple if our file is style.css the $handle would be ‘style’.
  • $src: It is the destination where file is located. Instead of linking out whole address we can use funtion get_template_directory_uri() which point to root directory of theme folder. In case the css file is located in subfolder we need add that as well: get_template_directory_uri() . '/css/slider.css'
  • $deps: This paramemeter accept boolean values. This simply definces that if the stylesheet is dependent on another stylesheet.
  • $ver: Set the version number
  • $media: Define type of media to laod in the stylesheet like ‘all’, ‘screen’, ‘print’ or ‘handheld.’

Here is the complete example code if we include all of those parameters:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

Enqueuing Scripts

CSS are not the only thing we use to style our site.

Sometime we need to use additional javascript file in our themes.

Just like for loading stylesheets we also have function for loading Javascript files.

Simmilar to wp_enqueue_style we have wp_enqueue_script function for JS and Jquery.

Here is the function along with all parameters:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
  • $handle: Name of the Script that we are adding.
  • $src: Location of the script.
  • $deps: This is array where we can add any other script upon which our script is depend.
  • $ver: You can list the versio number.
  • $in_footer: It is boolean paramenter. It allows you to place your script in footer instead of header.

Only using all of those parameters our final wp_enqueue_script would look something like this:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Comment reply script

Other than user defined script files, WordPress also has lot’s of predefined scripts.

One of them is Comment reply script.

What this do is open the comment reply using the certain conditional tags.

If your theme has comment section it should be added as well.

Here is how to load comment reply script:

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}

Using the conditional tag, this script would load the comment reply script on the single post pages.

This is not only predefined script. You can more about other script on official WordPress site: https://developer.wordpress.org/themes/basics/including-css-javascript/.

Combine Enqueue Funtions

If we are loading stylesheets, it makes sense to group together in the same function.

So by using one function we all know where we have to if have to make some changes next time.

Here is combine and call them all using wp_enqueue<_scripts function:

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
  
  wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
  
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
  
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Share this:

  • Twitter
  • Facebook
  • Reddit
  • Pinterest
  • WhatsApp
  • More
  • Pocket
  • Telegram

Related Articles

Suggested Posts:

  • WordPress Customizer API: How to Use WP Customizer Objects
  • How to add Featured images Support in custom WordPress theme
  • What are the WordPress Template Files? - Explained in Detail
  • WordPress theme Conditional tags: Where and How to use
  • WordPress theme Custom widgets: How to add?
  • Add a simple navigation menu feature in a WordPress theme?
  • WordPress theme Custom logo: Display & Add Custom logo…

Posted in: WP Themes

Primary Sidebar

Recent Articles

  • PHP Inheritance: Concept, Override method, Modify & Final keyword
  • PHP Access Modifiers: Types of Specifiers, How to Use with Examples
  • PHP Constructor and Destructor: How to Create in PHP With Examples
  • PHP Classes & Objects: How to Create Classes and Objects in PHP
  • PHP OOP: What is OOP in PHP, Why use, PHP Classes and Objects
  • Evolution of Computers: History, Timeline, Ancient & Modern Computing devices
  • Introduction to Computer: Definition, Need & Functions of Computer

Copyright © 2022 by Rahul Bodana