How to Add Styles and Scripts in WordPress

WebTechRiser.com > WordPress > How to Add Styles and Scripts in WordPress

Adding assets to a WordPress website is dubbed as “enqueue style” and “enqueue script”. When files are “enqueued”, it actually loads some files. In practice, generally both WordPress theme and plugin need to load assets such as, Cascading Style Sheet (CSS) and JavaScript (JS). Generally, we need to load assets in two cases:

  • In Front-end (in website)
  • In Back-end (in admin panel)

Enqueue Assets for Front-end

WordPress loads both types of assets on site using the “wp_enqueue_scripts” action hook.

The callback function of this hook hosts two separate function, “wp_enqueue_style” for loading CSS and “wp_enqueue_script” for loading JS.

Of course, we put these hooks and codes in functions.php. In WordPress, we write the code for wp_enqueue_scripts as follows:

function mytextdomain_assets() {
    wp_enqueue_style( 'main-css', get_template_directory_uri() . '/assets/style.css', array(), '1.0', 'all' );
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/main.js', array('jquery'), '1.5', true );
}
add_action( 'wp_enqueue_scripts', 'mytextdomain_assets' );

Loading CSS files using wp_enqueue_style

Let’s explain a bit about how the wp_enqueue_style function works. If you want to load a file named theme.css from your theme’s “assets/css” folder, you should write:

wp_enqueue_style(
  'main-css',
  get_template_directory_uri() . '/assets/style.css',
  array(),
  '1.0',
  'all'
);

It turns out that the wp_enqueue_style function uses 5 parameters. The functions of these parameters are:

1. $handle = 'main-css': The value of the 1st parameter, $handle, can be any “string”.

2. Using the 2nd parameter, you provide the function a relative location of your CSS file. get_template_directory_uri() function returns the location like, “https://mywebsite/working/” and let us concatenate the rest of the path with it. So, “get_template_directory_uri() . '/assets/style.css'” return the path as “https://mywebsite/working/assets/style.css“.

3. Dependency. If the ‘main-css’ file specified in your $handle depends on some other CSS framework, then with this third parameter we can tell the function about it. But, generally, CSS files do not depend on other CSS framework.

4. The version of the file. The version number of the asset must be specified as a string. When we enqueue a bootstrap file, the version number can be fetched easily looking into the vendor’s file.

5. Media. Generally, CSS files are loaded for ‘All‘ media. So, it’s another “string” input. “print” is the string that we use to specify the media when we plan to load it for print style.

By the way, CSS assets can be loaded from CDN too. Take extra caution not to include the protocol of the assets, that is, do not include “https” or “http“.

wp_enqueue_style(
  'bootstrap',
  '//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
  array(),
  '4.0.0',
  'all'
);

Loading CSS files using wp_enqueue_script

For registering and enqueueing JavaScript file, WordPress provided wp_enqueue_script function for the developers. According to the WP document, the method is written as below:

wp_enqueue_script(
  'main-js',
  get_template_directory_uri() . '/assets/main.js',
  array('jquery'),
  '1.5',
  true
);

The parameter parameter of the method shows that it has 5 parameters, the first four of which function as wp_enqueue_style. The fifth parameter is a “boolean” value whose value is true or false. By specifying the value of the last parameter “true“, we can tell the wp_enqueue_script function that we want to load our script file at the end of the page, that is, the script file will be loaded before the tag. And, if “false“, the script file will load in the <head> section of the page.

Loading a script file at the end of a page is a standard practice of web standards.

Loading assets in a plugin

When we load assets in a plugin, we’ll use plugins_url() in lieu of get_template_directory_uri().

wp_enqueue_script(
  'main-js',
  plugins_url( '/assets/style.css', __FILE__ ),
  array('jquery'),
  '1.5',
  true
);

Enqueue Assets for Back-end

Loading assets for backend (i.e., in the admin panel), the process is straight forward. We shall use admin_enqueue_scripts.

function textdomain_admin_load_scripts() {
  wp_register_script('admin-nav', get_stylesheet_directory_uri()  . '/js/admin-nav.js',array(), null, true);
  wp_enqueue_script('admin-nav');
}
add_action('admin_enqueue_scripts', textdomain_admin_load_scripts');

More Read

Category WordPress

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.