How to Add Styles and Scripts in WordPress with Code Example

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

Adding assets to a WordPress website is dubbed “enqueue style” and “enqueue script”. When files are “enqueued”, it loads some files. In practice, generally, both WordPress themes and plugins 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 (on the website)
  • In Back-end (in the 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 with a relative location of your CSS file. The get_template_directory_uri() WordPress function returns the location as, “https://mywebsite/working/“. 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“.

Also read:  Move WordPress Site from Localhost to Live Server: Step-by-step Tutorial with Screenshots

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 frameworks.

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 by 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 files, WordPress provided the 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 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.

Also read:  Increase Memory Limit in WordPress: 5 Easy Ways

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 the backend (i.e., in the admin panel), the process is straightforward. 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 Your Comment

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