Home > Help Center > Applications > WordPress > WordPress Еnqueue System

WordPress Еnqueue System

WordPress is a flexible platform that allows developers to use many different plugins in their themes.

For these themes and plugins to work properly, they need to load additional CSS (stylesheets) and JavaScript (scripts) files and this can be done by adding a <link> and <script> tag to the <head> section of the HTML document.

But how effective this is?

If the authors of plugins and themes add the necessary stylesheets and scripts directly to the HEAD section of the HTML document, it would cause possible conflicts, same resources could be loaded multiple times, and the files could be sorted in the wrong order.

WordPress creators have found a solution to the problem by having developed their own way of adding stylesheets and scripts, known as WordPress Enqueue System.

In this article, we’ll show you the proper way to add Java Scripts and CSS files in WordPress. This information will be useful for those who are just starting to learn WordPress theme and plugin development.

Enqueuing Scripts and Styles

The proper way to add scripts and styles to your theme is to enqueue them in the functions.php file.

The style.css file is required in all themes, but it may be necessary to add other files to extend the functionality of your theme.

To enqueue the script or style we are using two built in WordPress functions: wp_enqueue_script() and wp_enqueue_style().

Stylesheets

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. That is why the style.css file is required in every WordPress theme.

Rather than loading the stylesheet in your header.php file, you should load it in functions.php using wp_enqueue_style() function.

To enqueue style.css:

wp_enqueue_style( 'style', get_stylesheet_uri() );

This will look for a stylesheet named style and load it.

wpenqueuestyle function registers the style if source provided (does NOT overwrite) and enqueues.

The basic function for enqueuing a style is:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

You can include these parameters:

  • $handle - Name of the stylesheet. Should be unique.
  • $src – Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.

The rest of the parameters are optional.

  • $deps - An array of registered stylesheet handles this stylesheet depends on. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
  • $ver - sets the version number. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
  • $media - The media for which this stylesheet has been defined, such as all, screen, print or media queries.

So if you wanted to load a stylesheet named gallery.css in a folder named CSS in you theme’s root directory, you would use:

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

Scripts

Any additional JavaScript files required by a theme should be loaded using wp_enqueue_script. This ensures proper loading and caching, and allows the use conditional tags to target specific pages. These are optional.

wpenqueuescript uses a similar syntax to wpenqueuestyle.

wpenqueuescript function registers the script if $src provided (does NOT overwrite) and enqueues it.

The basic function for enqueuing a script is:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

The first four parameters are an exact copy of *wpenqueuestyle*:

  • $handle - the script name;
  • $src - script source;
  • $deps - script dependancy;
  • $ver - script version;
  • $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.

Your enqueue function may look like this:

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

Conditional Loading of Stylesheets and Scripts

If your WordPress website needs a particular stylesheet or JavaScript file only in one specific page or just under a limited number of conditions, there is no need to load those files everywhere on your website.

For example the comment reply script should load only if these conditions are met:

  • Load the script only on single post pages
  • If Enable threaded comments option is selected by the user

The function will look like:

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

Combining Enqueue Functions

It is best to combine all enqueued scripts and styles into a single function, and then call them using the wpenqueuescripts action:

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
  wp_enqueue_style( 'gallery', get_template_directory_uri() . '/css/gallery.css', array(), '1.1', 'all');
  wp_enqueue_script(‘jsscript’, get_template_directory_uri() . '/js/jsscript.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' );

Enqueuing Web Resources

You can use the enqueue system to load web resources like google fonts, font awesome icon library, google recaptcha and so on:

function web_rsc() {
wp_enqueue_style( 'roboto', 'https://fonts.googleapis.com/css?family=Roboto', false );
wp_enqueue_style ( 'fa-web', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js' );
}
add_action( 'wp_enqueue_scripts', 'web_rsc' );

Let’s load our WordPress site to check if the WordPress enqueuer system actually work (copied from view source):

<link rel='stylesheet' id='roboto-css'  href='https://fonts.googleapis.com/css?family=Roboto&#038;ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='fa-web-css'  href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=4.8' type='text/css' media='all' />
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?ver=4.8'></script>

Summary

WordPress Еnqueue System is the standard WordPress method for themes and plugins to load the scripts and stylesheets they need.

#wordpres #settings

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support