A Beginner’s Guide to WP Enqueue

WP Enqueue : A Beginner's Guide

There are a lot of features in WordPress which works together to make WordPress most efficient content management system. If you are creating a WordPress theme or plugin, you can enhance the performance of the site by properly utilizing WP Enqueue function.

In this article, you will learn exactly what is WP Enqueue, and how it can be used to improve WordPress projects.

You can use WordPress’s WP Enqueue function to add styles and scripts to your theme or plugins. Usually when we create a WordPress theme, firstly we have to write HTML markup.

While adding the styles and scripts to make your HTML markup interactive, we use a lot of CSS and JS in our code.

Sometimes even we use inline styling and scripting, which is not a good practice and will make your WordPress website slow (learn how to speed up WordPress website).

Using the WP Enqueue function, WordPress take care of adding scripts and style files at the proper places. It’s not as simple as we usually work, copying and pasting script and style tags in HTML’s head section. It’s also not the best way of adding styles and scripts according to WordPress developer’s guidelines.

So Why to use WP Enqueue?

The primary reason for using WP Enqueue is to make the site running quickly and smoothly. According to SEO best practice, Page Speed is important and it’s not good to use the same script of style again and again all over the places. This practice will make your site slow and reduce the performance of your WordPress site.

Using WP Enqueue you write a single file of CSS or JS and use wp_enqueue to call it. WordPress automatically add the CSS or JS file in the right place of <HEAD> section.

How wp_enqueue works?

The wp_enqueue is a hook which then hooks itself into wp_head or wp_footer as needed. Here is the whole workflow, how it works.

  1. 1. You write a function which registers your script using wp_enqueue_script.
  2. 2. Then you hook your function into the wp_enqueue_scripts or wp_enqueue_style hook.
  3. 3. These all hooks work together, so when wp_head or wp_footer is called your script is found and will be loaded at the right place.

Loading Javascript using WP Enqueue

You can easily load Javascript into a WordPress theme or plugin using wp_enqueue_script.

You need to know only a few parameters when using wp_enqueue_script.

The Codex gives this as a base enqueue code.

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

We can break this into parameters.

  • wp_enqueue_script() : is the function which will inject all code in the page’s head section.
  • $handle: is the unique name for the script itself.
  • $src: is the string which will point to your Javascript file.
  • $deps: It’s an array of dependencies if your script file depends on Jquery or other registered scripts.
  • $ver: You can specify an optional script version in string format if you want to keep track of script version for caching purpose.
  • $in_footer: This is optional boolean value if its true then the script will be loaded into footer if false it will load into the head.

To register your scripts within WordPress, you will define a custom function and use wp_enqueue_script to load each one individually. For example, if you have a file called custom.js, you can define your custom function in your theme like below.

function webwhistles_enqueue_javascript() {
wp_enqueue_script('custom-name', get_template_directory_uri() . '/path/to/custom.js');
}

Once you have defined above function, you need to use the wp_enqueue_scripts action hook to register your function. Just below your above function, you can use add_action() function to connect with wp_enqueue_scripts.

add_action('wp_enqueue_scripts', 'webwhistles_enqueue_javascript');

In the above example, the first one is the hook name and the second one is your custom function name. Make sure you enter the correct function name.

Loading CSS Stylesheets using WP Enqueue

Loading CSS files are fairly simple, but you will use a slightly different function within your script’s loading functions. The Codex gives this as a base enqueue code to add stylesheets.

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

As above wp_enqueue_style also take five parameters.

  • wp_enqueue_style() : is the function which will inject all code in the page’s head section.
  • $handle: is the unique name for the CSS file itself.
  • $src is the string which will point to your Stylesheet file.
  • $deps: It’s an array of dependencies if your stylesheet file depends on other registered stylesheets.
  • $ver: You can specify an optional stylesheet version in string format if you want to keep track of stylesheet version for caching purpose.
  • $media: This is an optional string value to specify stylesheet types like all, print or screen.

To register your stylesheets within WordPress, you can define a new function or you can use the above function we created earlier. Here we will create a new function to register our styles. For example, if you have files called main.cssand,custom.css you can define your custom function in your theme like below.

function webwhistles_enqueue_stylesheets() {
    wp_enqueue_style( 'main-css', get_template_directory_uri() . '/path/to/main.css' );
    wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/path/to/custom.css' );
}

Once you have defined above function, you need to use the wp_enqueue_scripts action hook same as for Javascript to register your function. Just below your above function, you can use add_action() function to connect with wp_enqueue_scripts.

add_action('wp_enqueue_scripts', 'webwhistles_enqueue_stylesheets');

Pay attention to the above function we just changed the second parameter, the first one stays the same.

That’s really all about adding Javascript and stylesheets to WordPress themes or plugins. WordPress comes with so many developer’s friendly features, if we don’t learn how to use effectively we end up with a messy and unreliable WordPress project.

You May Also Like

About the Author: WebWhistles

Leave a Reply

Your email address will not be published.