Adding custom JavaScript Without Plugin is a smart way to keep your WordPress site clean and lightweight. In this snippet, you’ll learn how to do it manually using your child theme.
Step 1: Add Your Custom JS File
Upload your custom.js file to your child theme folder, e.g., /wp-content/themes/your-child-theme/js/custom.js
Step 2: Enqueue the JS in functions.php
Add this snippet to your child theme’s functions.php:
function qdt_add_custom_js() {
wp_enqueue_script( ‘qdt-custom-js’, get_stylesheet_directory_uri() . ‘/js/custom.js’, array(), null, true );
}
add_action( ‘wp_enqueue_scripts’, ‘qdt_add_custom_js’ );
Why This Matters
Adding custom JS manually keeps your site fast and avoids unnecessary plugin bloat.
Common Mistake
Always enqueue your JS properly to prevent conflicts. Don’t hardcode it directly into header.php.
Pro Tip
Use get_stylesheet_directory_uri() to make sure the path works with child themes.
Related Snippet
If you like this, check out my guide on adding Google Fonts Without Plugin in WordPress.