CODEWITHSUNDEEP
wordpress
DDulla
DDulla

Reputation: 679

Including vendor CSS and JS in wordpress?

In converting a static HTML/CSS site to a wordpress template (for one specific site), how should vendor specific CSS/JS be included in the theme package?

functions.php method:

    function add_theme_scripts() {
     wp_enqueue_style( 'font-awesome', get_template_directory_uri() . 
    '/asset/vendor/font-awesome/css/fontawesome.min.css', array(), '5.9.0', 'all');

    wp_enqueue_script( 'font-awesome', get_template_directory_uri() . 
     '/asset/vendor/font-awesome/js/fontawesome.min.js', array ( 'jquery' ), 5.9.0, true);
     }
     add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

header.php method:

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/asset/vendor/font-awesome/css/fontawesome.min.css">

Some of the wordpress documentation points towards the first (functions.php) method as being preferred method to load resources, but there is no explanation as to why?

Upvotes: 2

Views: 671

Answers (1)

red
red

Reputation: 1619

The 1st method is preferred because give you more control about where to include and the resources dependencies, see this example:

if(is_page($page_selected)){
    add_action('wp_enqueue_scripts', 'page_scripts');
}

As you see you can include the scripts only in the page, or you can target only post, or also you can have different scripts for different user role and so on...

Another thing that supports the use of the 1st method is the separation, separate markup, style, scripts give you a better code to work

Upvotes: 1

Related Questions