wordpress hook add javascript

How to Add Javascript to WordPress Using Hooks#

If you want to add custom JavaScript to your WordPress site, you can use hooks to insert the code onto the page. Here are a few different ways to do it:

1. Add Inline Javascript#

The simplest option is to add inline JavaScript directly into the header or footer of your WordPress theme. However, this method is not recommended because it can be difficult to manage and can cause conflicts with other scripts.

function add_custom_js() {
    echo '<script>alert("Hello World!")</script>';
}
add_action( 'wp_head', 'add_custom_js' );

2. Enqueue Javascript File#

To properly enqueue a JavaScript file, you need to create a new file with your custom JavaScript code and save it in your theme or child theme's directory. Then, you can use the wp_enqueue_script() function to add the script to your site.

// Enqueue custom JS file
function custom_js_enqueue() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_js_enqueue' );

3. Use Plugin to Insert Javascript#

Another option is to use a plugin that allows you to insert custom JavaScript onto your site. One popular plugin is called "Insert Headers and Footers" which allows you to add code to the header or footer of your site without editing your theme files.

• Install and activate "Insert Headers and Footers" plugin
• Go to Settings → Insert Headers and Footers and add your custom JavaScript code into the "Scripts in Header" or "Scripts in Footer" section

These are just a few ways to add custom JavaScript to your WordPress site using hooks. Depending on your needs, one option may be better than another. Be sure to test your code thoroughly and make backups before making any changes to your site.