Enqueue CSS and JS Scripts in WordPress for Better Performance

WordPress is open-source software – users can install, modify, and distribute it however they want. Since the source code is accessible to everyone, millions of WordPress experts and developers can create tools and extensions and share them with the public.

Let’s see how to enqueue CSS and JS files into your wordpress project.

Most of the fresher developer do like,

Inside “header.php”

<head>
    <title><?php echo get_bloginfo(); ?></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/custom.css" rel="stylesheet" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</head>

Inside “footer.php”

<footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</footer>

But, this is not the proper way to enqueue CSS and JS files inside your wordpress project. For docking that, first go to your “functions.php” file and enqueue files like this way. Let’s see the sigma trick….

Step 1: functions.php

function my_theme_enqueue_styles_scripts() {
    // Enqueue CSS files
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css');
    wp_enqueue_style('aos-css', 'https://unpkg.com/aos@2.3.1/dist/aos.css');
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/custom.css');

    // Enqueue default Jquery in wordpress.
    wp_enqueue_script('jquery');

    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), null, true);
    wp_enqueue_script('font-awesome-js', get_template_directory_uri() . '/assets/js/font-awesome-all.min.js', array(), null, true);
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles_scripts');

Note: Wordpress provides an uncompressed version of jquery. So we can simply use that jquery inside the js files which are required! For that you simply pass the array('jquery') parameter inside “wp_eneueue_script” . One thing to remember is that JQuery has 2 major versions: uncompressed and compressed. Inside the uncompressed version, AJAX will not work properly.

Step 2: Now inside “header.php”
Now, we need to use wp_head(); function under

tags.

<head>
    <title><?php echo get_bloginfo(); ?></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>

Step 3: Now inside “footer.php”
Now, we need to use wp_footer(); under the tag.

<?php wp_footer(); ?>
</body>

Including wp_head() and wp_footer() in your WordPress theme is crucial. These functions automatically insert essential scripts, styles, and metadata required by WordPress, themes, and plugins, ensuring proper functionality, compatibility, and performance. wp_head() adds necessary elements within the section for SEO, while wp_footer() includes scripts at the end to defer non-critical JavaScript, improving page load speed. These functions are vital for plugin integration and dynamic theme customizations, as well as the correct placement of analytics and tracking codes.

Blog

Enqueue CSS and JS Scripts in WordPress for Better Performance

Shimanta Das

Join Our Newsletter. No Spam, Only the good stuff.

Related