How to Include Properly CSS and JS Files in WordPress

/ Blog, WordPress, WordPress Development /

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

Enqueuing CSS and JS files in WordPress is an important part of developing successful themes and plugins. It is important to ensure that all of the necessary files are included in the correct order and that all of the code is properly formatted and optimized.

When you’re creating your theme or plugin, you may want to create additional stylesheets or JavaScript files. It’s important that themes 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 CSS and JS Files in WordPress

  • Do not include CSS or JS files manually with link and script tags.
  • 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 on 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.

The first step to properly including CSS and JavaScript files in WordPress is to create a functions.php file in the theme directory. This file is used to register the necessary scripts and stylesheets and to enqueue them when the page is loaded.

Once the functions.php file is created, the next step is to register the necessary scripts and stylesheets. This can be done by using the wp_register_script() and wp_register_style() functions. These functions require the name of the script or stylesheet, the URL of the file, and an array of any additional dependencies.

After the scripts and stylesheets are registered, they must be enqueued. This is done by using the wp_enqueue_script() and wp_enqueue_style() functions. These functions require the name of the script or stylesheet, and the name of the handle used when it was registered.

function hs_adding_styles() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'hs_adding_styles' );
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?

It is important to ensure that all of the necessary files are included in the correct order. This can be done by using the wp_enqueue_script() and wp_enqueue_style() functions with the appropriate parameters.

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 original 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 was added after bootstrap but to be sure $deps parameter is 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, don’t support some CSS codes like CSS variables or Flex in older versions. To add compatibility to your theme, you can add extra CSS codes to achieve compatibility.

Insert your CSS styles into a file and add a theme with the 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 is defined in WordPress to detect when the user browser is Internet Explorer. But it can’t detect the Edge browser. To detect Edge we use the 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 of 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 jquery. Jquery file name included in $deps parameter. Like CSS, this sure your script file will include after the 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 a theme and use plugins_url('my-stylesheet.css', __FILE__) when you are developing a plugin.

Related Posts

Shopping Cart