Home >Backend Development >PHP Tutorial >Enqueue CSS and JS Scripts in WordPress for Better Performance

Enqueue CSS and JS Scripts in WordPress for Better Performance

WBOYOriginal: 2024-08-22 06:34:39328browse

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.

The above is the detailed content of Enqueue CSS and JS Scripts in WordPress for Better Performance. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript jquery css ajax Array for while public JS function this WordPress SEO

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Pass Data From Route to Controller and View in Laravel 11Next article：How to Pass Data From Route to Controller and View in Laravel 11

See more

Enqueue CSS and JS Scripts in WordPress for Better Performance

Related articles