Enqueue Scripts and Styles in WordPress

Enqueue Scripts and Styles in WordPress — a practical guide to Enqueue Scripts and Styles in WordPress themes tutorial with clear examples you can reuse in real projects.

WordPress provides the wp_enqueue_style() and wp_enqueue_script() functions to properly load CSS and JavaScript files. Using the enqueue system ensures that assets are loaded in the correct order, prevents conflicts with plugins and themes, and follows WordPress coding standards.

In the following example, multiple CSS and JavaScript files are enqueued, including the theme stylesheet, Slick Slider, Font Awesome, AOS (Animate On Scroll), Masonry, and custom theme scripts. The example also demonstrates how to use wp_localize_script() to pass PHP variables, such as the AJAX URL, template path, home URL, and current post ID, to JavaScript. Additionally, the comment-reply script is conditionally loaded for threaded comments on singular posts.

<?php 

/**
 * Enqueue scripts and styles.
 */
function qrs_scripts() {
	wp_enqueue_style( 'qrs-style', get_stylesheet_uri(), array(), _S_VERSION );
	wp_style_add_data( 'qrs-style', 'rtl', 'replace' );
	wp_enqueue_style( 'qrs-slick', get_template_directory_uri() . '/css/slick.css');
	wp_enqueue_style( 'qrs-all-min', get_template_directory_uri() . '/css/all.min.css');
	wp_enqueue_style( 'qrs-aos', get_template_directory_uri() . '/css/aos.css');
    wp_enqueue_style( 'qrs-responsive', get_template_directory_uri() . '/css/responsive.css');

    wp_enqueue_script('jquery');
	wp_enqueue_script( 'qrs-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'qrs-slick', get_template_directory_uri() . '/js/slick.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'qrs-masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'qrs-masonry-image', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'qrs-aos', get_template_directory_uri() . '/js/aos.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'qrs-custom', get_template_directory_uri() . '/js/custom.js', array(), _S_VERSION, true );

	wp_localize_script( 'qrs-custom', 'admin_ajax_url', btheme_admin_URL());
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'qrs_scripts' );

//Admin-ajax
function btheme_admin_URL() { 
	$MyTemplatepath = get_template_directory_uri(); 
	$MyHomepath = esc_url( home_url( '/' ) ); 
	$admin_URL = admin_url( 'admin-ajax.php' ); // Your File Path
    return array(
        'admin_URL' =>  $admin_URL,
        'MyTemplatepath' =>  $MyTemplatepath,
        'MyHomepath' =>  $MyHomepath,
        'post_id' => get_the_ID()
    );
}