1. Home
  2. Docs
  3. WordPress Developer
  4. WordPress Theme Development
  5. Including CSS & JavaScript

Including CSS & JavaScript

When you’re creating your theme, you may want to create additional stylesheets or JavaScript files.

You will create a function that will enqueue all of your scripts and styles. When enqueuing a script or stylesheet, WordPress creates a handle and path to find your file and any dependencies it may have (like jQuery) and then you will use a hook that will insert your scripts and stylesheets.

The proper way to add scripts and styles to your theme is to enqueue them in the functions.php files. 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.

Enqueue the script or style using wp_enqueue_script() or wp_enqueue_style()

Rather then loading the stylesheet in your header.php file, you should load it in using wp_enqueue_style. In order to load your main stylesheet, you can enqueue it in functions.php

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

  • $handle is simply the name of the stylesheet.unique name for all handels.
  • $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.’

To enqueue style.css

wp_enqueue_style( ‘style’, get_stylesheet_uri() );

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

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 for 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 then in the header, so that it does not delay the loading of the DOM tree.
Was this article helpful to you? Yes No

How can we help?