The correct way to include JavaScript and CSS in WordPress is through the wp_enqueue_scripts hook. This prevents duplication and ensures compatibility with themes and plugins.
Why Use Enqueuing Instead of Hardcoding?
Using proper WordPress functions to load assets ensures:
- No Script Clashes: Avoids loading the same file more than once.
- Correct Load Order: WordPress automatically manages dependencies.
- Optimized Delivery: Assets are loaded where and when needed.
With wp_enqueue_script() and wp_enqueue_style(), your files are added cleanly to the frontend.
How to Add Scripts and Styles
Insert this in functions.php to load your CSS and JS:
function theme_assets_loader() {
wp_enqueue_script('theme-main-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true);
wp_enqueue_style('theme-main-css', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'theme_assets_loader');
Code Breakdown
- Script: Depends on jQuery and loads in the footer.
- Style: Loads the stylesheet with no dependencies.
Make sure your theme has the proper folder structure. Correct enqueuing helps prevent plugin clashes and improves page speed.
Final Thoughts
Use wp_enqueue_scripts for all frontend asset loading in WordPress. This is the recommended method for a robust, performance-friendly site.
See the official docs to explore more.
