How to Enqueue Styles and Script in WordPress

Enqueue Styles in WordPress

This function provides a systematic way of loading Stylesheets. By using wp_enqueue_script function, you tell WordPress when to load a stylesheets, where to load it, and what are it’s dependencies.

Usage of Enqueue Script Funtion

Loading the scripts properly in WordPress is very easy. Below is the code that you would paste in your plugins file or in your theme’s functions.php file to properly load scripts in WordPress.

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

Explanation:

This function accepts 5 parameters:

$handle – Handle is the unique name of your stylesheet ( Its a required string parameter ).
Default : None

$src – src is the location of your stylesheet ( Its an optional string/boolean parameter ).
Default : false

$deps – deps is for dependency ( Its an optional array parameter ).
Default : array()

$ver – This is the version number of your stylesheet ( Its an optional string parameter ).
Default : false

$media –  This parameter specify the media for which the stylesheet has been defined  ( Its an optional string/boolean parameter ).
Examples: 'all', 'screen', 'handheld', 'print'.
 Default : all

Return Values:

This function does not return a value.

Enqueue Script in WordPress

This function provides a systematic way of loading JavaScripts. By using wp_enqueue_script function, you tell WordPress when to load a script, where to load it, and what are it’s dependencies.

Usage of Enqueue Script Funtion

Loading the scripts properly in WordPress is very easy. Below is the code that you would paste in your plugins file or in your theme’s functions.php file to properly load scripts in WordPress.

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Explanation:

This function accepts 5 parameters:

$handle – Handle is the unique name of your script ( Its a required string parameter ).
Default : None

$src – src is the location of your script ( Its an optional string parameter ).
Default : false

$deps – deps is for dependency ( Its an optional array parameter ).
Default : array()

$ver – This is the version number of your script ( Its an optional string parameter ).
Default value : false

$in_footer – We want to load your script in the footer ( Its an optional boolean parameter ).
Default : false

Return Values:

This function does not return a value.

Example:

Using Hook

Scripts and styles from a single action hook

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . 

    '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );