Loads more than one CSS and JS file in WordPress

user_15165995 0
Viewed 71

I'm pretty new in WordPress.

How can I can include CSS and JS files in a page ?

This is my code:

function load_files() {
        
    // CSS
    wp_enqueue_style('styles', get_template_directory_uri() . '/css/plugins.css');
    wp_enqueue_style('styles', get_template_directory_uri() . '/css/style.css');

    // JS
    wp_enqueue_script('scripts', get_template_directory_uri() . '/js/jquery.js', array(), '', true);
    wp_enqueue_script('scripts', get_template_directory_uri() . '/js/plugins.js', array(), '', true);
    wp_enqueue_script('scripts', get_template_directory_uri() . '/plugins/youtube-player/jquery.mb.YTPlayer.min.js', array(), '', true);
}
add_action('wp_enqueue_scripts', 'load_files');

Problem is this code loads only the first CSS and JS files but not the other one.

Let me know.

Thanks.

wordpress
1 Answers

The first arg must be unique

function load_files() {
        
    // CSS
    wp_enqueue_style('plugins', get_template_directory_uri() . '/css/plugins.css');
    wp_enqueue_style('style', get_template_directory_uri() . '/css/style.css');

    // JS
    wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.js', array(), '', true);
    wp_enqueue_script('plugins', get_template_directory_uri() . '/js/plugins.js', array(), '', true);
    wp_enqueue_script('YTPlayer', get_template_directory_uri() . '/plugins/youtube-player/jquery.mb.YTPlayer.min.js', array(), '', true);
}
add_action('wp_enqueue_scripts', 'load_files');

Enqueue a CSS stylesheet.

Usage

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

Parameters

$handle

(string) (Required) Name of the stylesheet. Should be unique.

$src

(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.

Default value: ''

$deps

(string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on.

Default value: array()

$ver

(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$media

(string) (Optional) The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.

Default value: 'all'

Enqueue a script.

Usage

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

Parameters

$handle

(string) (Required) Name of the script. Should be unique.

$src

(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.

Default value: ''

$deps

(string[]) (Optional) An array of registered script handles this script depends on.

Default value: array()

$ver

(string|bool|null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$in_footer

(bool) (Optional) Whether to enqueue the script before instead of in the . Default 'false'.

Default value: false

user_119617280
Related