Skip to content
Sri Lanka · Colombo · GlobalMon–Fri, 09:00–18:00 IST
+94 77 385 2227 [email protected] Client Login ↗
Request proposal Start a project →
Home
eCommerce Development SEO Services Mobile App Development Social Media Marketing AI Solutions Website Maintenance
eCommerce Education Financial Services Healthcare Legal & Professional Logistics & Shipping Manufacturing Non-profit & Government Real Estate Tourism & Hospitality
Our Work Blog About Contact
Request proposal Start a project →
WordPress 4 min read

How to Include / Add Custom JavaScript into your WordPress Site

You might need to insert custom Javascript code to WordPress header of Footer when developing your own plugin.There are couple of ways to do this. Adding custom JavaScript to your WordPress site allows you to extend its functionality, whether you're adding a tracking pixel, creating a custom slider,...

A
Written by
Admin
25 views
Share:

You might need to insert custom Javascript code to WordPress header of Footer when developing your own plugin.

There are couple of ways to do this.

Adding custom JavaScript to your WordPress site allows you to extend its functionality, whether you're adding a tracking pixel, creating a custom slider, or building interactive UI elements. However, WordPress has a specific way of handling scripts to ensure compatibility between themes and plugins.

Here is a guide on the three most common ways to add custom JavaScript safely.

The "WordPress way" to add scripts is by using the built-in wp_enqueue_script() function. This method prevents script conflicts and ensures that dependencies (like jQuery) are loaded before your custom code.

Step-by-Step Implementation:

  1. Create your JS file: Save your code as custom-script.js inside your theme's /js/ folder.

  2. Edit functions.php: Open your theme’s functions.php file and add the following code:

PHP

 
function my_theme_enqueue_scripts() {
    wp_enqueue_script(
        'my-custom-js', // Unique handle
        get_template_directory_uri() . '/js/custom-script.js', // Path to file
        array('jquery'), // Dependencies (e.g., if you use jQuery)
        '1.0.0', // Version number
        true // Load in footer (true) or header (false)
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

Pro Tip: Always set the final parameter to true. Loading scripts in the footer improves site speed and prevents "render-blocking" issues.

 

2. Using a Plugin (Easiest Method)

If you are not comfortable editing theme files, or if you want your JavaScript to remain active even if you change themes, using a plugin is the best choice.

  • WPCode (formerly Insert Headers and Footers): A lightweight interface to paste code into the <head> or before the </body> tag.

  • Simple Custom CSS and JS: Provides a full code editor with syntax highlighting.

  • Code Snippets: Allows you to manage JS, CSS, and PHP snippets from a single dashboard.

When to use this:

  • Adding Google Analytics or Facebook Pixel code.

  • Quickly testing a small script.

  • When you don't want to create a child theme.

3. Adding Script to a Specific Page via Shortcode

Sometimes you only need a script to run on a single landing page rather than across the entire site. You can create a custom shortcode in your functions.php to wrap your script.

PHP

 
function my_page_specific_script() {
    ?>
    <script type="text/javascript">
        console.log("This only runs where the shortcode is placed!");
        // Your custom JS here
    </script>
    <?php
}
add_shortcode('custom_js', 'my_page_specific_script');

After adding this code, simply type [custom_js] into the WordPress editor (Gutenberg or Classic) on the specific page you want the script to execute.

Summary Comparison Table

Method Best For Technical Level Risk
Enqueue Script Theme development & performance Intermediate Low (Safest)
Plugins Quick fixes & tracking pixels Beginner Low
Shortcodes Page-specific functionality Intermediate Medium
Hardcoding in Header.php Never Recommended Beginner High (Conflicts)

Important Best Practices

  • Use a Child Theme: If you edit functions.php in a parent theme, your changes will be erased when the theme updates. Always use a child theme.

  • Check for jQuery "No-Conflict" Mode: WordPress runs jQuery in no-conflict mode. Instead of using the $ sign, use jQuery or wrap your code in a wrapper:

    JavaScript

     
    jQuery(document).ready(function($) {
    // Now you can use $ safely inside here
    $('body').hide().fadeIn();
});

  • Clear Cache: If you don't see your changes immediately, clear your WordPress caching plugin (WP Rocket, LiteSpeed, etc.) and your browser cache.

Would you like me to help you write a specific JavaScript function for your WordPress site, such as a popup or a form validator?

Share:

Related Articles

Comments (0)

Log in or sign up to leave a comment.

No comments yet. Be the first to share your thoughts!