Adding Custom JavaScript to WordPress

1. Introduction

This tutorial aims to guide you on how to add custom JavaScript to your WordPress site. By doing so, you will be able to enhance your site's interactivity, making it more dynamic and engaging for your users.

You will learn:
- The basics of adding custom JavaScript to WordPress
- How to use the WordPress functions.php file
- How to enqueue scripts in WordPress

Prerequisites:
- Basic knowledge of WordPress
- Basic knowledge of JavaScript

2. Step-by-Step Guide

We'll be adding custom JavaScript using two methods: directly into your theme's functions.php file and by enqueuing the script.

Directly into functions.php

• Find the functions.php file in your theme directory and open it.
• Add your JavaScript code inside the script tags.

Enqueuing the script

• Create a .js file in your theme directory.
• Write your JavaScript code in this file and save it.
• Use the wp_enqueue_script function to enqueue your script in the functions.php file.

Best Practices
* Always enqueue scripts to avoid conflicts with other scripts and plugins.
* Use no-conflict mode when writing jQuery to avoid conflicts with other libraries.

3. Code Examples

Adding custom JavaScript directly into functions.php

<?php
function add_custom_script() {
echo "<script>
// Your JavaScript code here
</script>";
}
add_action('wp_footer', 'add_custom_script');
?>

Enqueueing the script in functions.php

Assuming the JavaScript file is named 'custom.js' and located in a folder named 'js' in your theme directory.

<?php
function add_custom_script() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_custom_script' );
?>

4. Summary

You've learned how to add custom JavaScript to your WordPress site directly into your theme's functions.php file and by enqueueing the script. You've learned how to use the wp_enqueue_script function and you've understood the importance of using no-conflict mode with jQuery.

Next steps for learning would be exploring more WordPress built-in functions and learning more about jQuery.

5. Practice Exercises

1. Add a simple alert to your website using both methods. The alert should display a message when the website loads.
2. Create a script that changes the background color of your website every time the page loads.

Solutions

1. Directly into functions.php

<?php
function add_custom_script() {
echo "<script>
alert('Website loaded');
</script>";
}
add_action('wp_footer', 'add_custom_script');
?>

Enqueueing the script

alert('Website loaded');

1. Directly into functions.php

<?php
function add_custom_script() {
echo "<script>
document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
</script>";
}
add_action('wp_footer', 'add_custom_script');
?>

Enqueueing the script

document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);

Tips for further practice: Try adding more complex scripts to your website, like a slideshow or a contact form validation script.