Blog, WordPress, WordPress Development

How to Include Properly CSS and JS Files in WordPress

WordPress like every website needs style and scripts to display content in a beautiful way. Including properly CSS and JS files in WordPress is a subject that every WordPress developer should know.

When you’re creating your theme or plugin, you may want to create additional stylesheets or JavaScript files. It’s important that theme and plugins load scripts and stylesheets using the standard WordPress method.

Adding scripts and styles to WordPress is a fairly simple process. Essentially, you will create a function that will enqueue all of your scripts and styles.

Do Not List in Including CSS and JS Files in WordPress

  • Do not include CSS or JS files manually with link and script tag.
  • Do not use the wp_head function to load their scripts and stylesheets.
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
    echo 'jQuery goes here';
}

What Is Enqueueing?

Enqueueing is a CMS-friendly way of adding scripts and styles to WordPress websites. By enqueueing scripts, you are telling WordPress about the assets you want to add and it will take care of actually linking to them in the header and footer.

Luckily enough WordPress has a hook created for adding scripts and styles called: wp_enqueue_scripts. This hook takes care of including CSS and JS files to the page.

How to Properly Enqueue External CSS Files in WordPress?

Your CSS stylesheets are used to customize the presentation of your theme. A stylesheet is also the file where information about your theme is stored. For this reason, the style.css file is required in every theme.

In order to load your main stylesheet, you can enqueue it in functions.php.

function hs_adding_styles() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'hs_adding_styles' );

The basic function for enqueuing a style is:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
  • $handle is simply the name of the stylesheet.
  • $src is where it is located. The rest of the parameters are optional.
  • $deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
  • $ver sets the version number.
  • $media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

How to Add Style After Specific Style?

Sometimes you need to add your custom style after a specific style. For example, you have a custom style that your style must include after the origin style. To do this, you have to set the $deps parameter.

function hs_adding_styles() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), null);
    wp_enqueue_style('font-awesome', get_template_directory_uri() . '/fonts/font-awesome.css', array('bootstrap'), null);
}
add_action( 'wp_enqueue_scripts', 'hs_adding_styles' );

As you see in this code, font awesome CSS added after bootstrap but to be sure $deps parameter set to array(‘bootstrap’). Bolded words in code (bootstrap) must be exactly the same.

How to Add Style to Editor in WordPress?

In WordPress with enqueuing styles, will add CSS codes to the front end. But what about the editor in the back end?

It is better to add style to the editor to display items like as front end. To do this add the following codes in the functions.php file.

function hs_enqueue_editor_style()
{
    // Add support for editor styles.
    add_theme_support('editor-styles');

    // Enqueue editor styles.
    add_editor_style('assets/css/editor-style.css');
}
add_action('after_setup_theme', 'hs_enqueue_editor_style');

Add Style to Compatible With IE and Edge

Internet Explorer (IE) and Edge, doesn’t support some CSS codes like CSS variable or Flex. To add compatibility to your theme, you can add extra CSS codes to achieve compatibility.

Insert your CSS styles to a file and add theme with following code.

function hs_enqueue_ie_style()
{
    global $is_IE;
    if ($is_IE || preg_match('/Edge/i',$_SERVER['HTTP_USER_AGENT'])) {
        wp_enqueue_style('hs-ie-style', get_template_directory_uri() . '/assets/css/ie.css', array(), null);
    }
}
add_action('wp_enqueue_scripts', 'hs_enqueue_ie_style');

$is_IE is a global variable that defined in WordPress to detect when user browser is Internet Explorer. But it can’t detect Edge browser. To detect Edge we use code below

preg_match('/Edge/i',$_SERVER['HTTP_USER_AGENT'])

How to Properly Enqueue JS Files in WordPress?

Any additional JavaScript files required by a theme should be loaded using wp_enqueue_script.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
  • $handle is the name for the script.
  • $src defines where the script is located.
  • $deps is an array that can handle any script that your new script depends on, such as jQuery.
  • $ver lets you list a version number.
  • $in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather than in the header so that it does not delay the loading of the DOM tree.

Loading scripts properly in WordPress is very easy. Below is an example code that you would paste in your plugins file or in your theme’s functions.php file to properly load scripts in WordPress.

function hs_adding_styles() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'hs_adding_styles' );

How to Add Script After Specific Script?

In the above example, as you see, the script will include after jquery. Jquery file name included in $deps parameter. Like CSS, this sure your script file will include after jquery file.

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

Include in Theme or Plugin

The difference between including CSS and JS files with the plugin is the URL of your code.

Use get_template_directory_uri or get_stylesheet_directory_uri when you are developing theme and use plugins_url(‘my-stylesheet.css’, __FILE__) when you are developing plugin.