How to Add JavaScript in WordPress Page and Post?

Last Updated : 13 Sep, 2024

WordPress doesn’t allow you to directly add JavaScript code to your site, you can achieve this by using plugins or manual methods. JavaScript is a popular programming language that allows you to add interactive features to your website.

Learning how to add JavaScript to your WordPress site can help you customize specific sections, enhancing the overall user experience. In this guide, we'll explore different ways to add JavaScript to your WordPress pages and posts using plugins, functions, hooks, or by editing your theme's files.

What is JavaScript?

JavaScript is a scripting language that makes web pages interactive. Whenever a website does more than just display static information—like showing live content updates, interactive maps, animations, or videos—JavaScript is likely involved. It works alongside HTML, which structures content, and CSS, which styles it.

Adding JavaScript Using Plugin

To add custom JavaScript code to your WordPress website, you can use plugins, edit your theme files, or use WordPress hooks. Below, we’ll focus on using a plugin for simplicity, especially for beginners.

Adding JavaScript Using WPCode Plugin

The WPCode plugin makes it easy for beginners to add JavaScript code to their WordPress sites without breaking the website. Follow these steps to add JavaScript using the WPCode plugin:

Step 1: First login to your WordPress website using the user id and password of your WordPress website.

Step 2: Once logged in, hover over the “Plugins” menu on the left, then click on “Add New.” In the search box, type “WPCode” and hit enter. Click the “Install Now” button next to the WPCode plugin, then click “Activate” once it’s installed.

Step 3: After activation, you’ll see “Code Snippets” in your WordPress dashboard menu. Click on “Code Snippets,” then click on “+ Add Snippet” to create a new code snippet.

Search "WP Code" and click on "Install Now"

Step 4: In the WPCode window that appears, click on “Your Custom Code” to create a new custom code snippet. Select “JavaScript Snippet” as the code type.

Now the "WP Code" gets appearing in the WordPress website as "Code Snippets" on your WordPress website.

Step 5: For adding the code to your website, Now click on the "Code Snippets" and then click on "+Add Snippet" to add the JavaScript code to your WordPress website.

Step 6: Now the WP Code window appears on your screen, Click on the Your Custom Code" to add the custom code to your WordPress website.

Step 7: After choosing the Your Custom Code". Now choose the "JavaScript Snippet" in code the type to add the custom code to your WordPress website.

Change code type to "JavaScript Snippet"

Step 8: Now after adding the JavaScript custom code to your website, then click on the "Save Snippet" button to save the custom code to your WordPress website. We use simple JavaScript Code.

console.log('Hello World');
alert("Hello GFG");

Simple JavaScript code to Display "Hello GFG"

After saving the code snippet also activate the using the "Activate" toggle.

Step 9: Finally click on the "Update" button to save the code snippet and it will start working on your WordPress website.

This is how you can add custom JavaScript code to your WordPress website.

Conclusion

Adding JavaScript to your WordPress site opens up a world of possibilities for making your website more interactive and engaging. Whether you're adding analytics, enhancing user interaction, or implementing custom functionalities, integrating JavaScript allows you to tailor your site to better serve your visitors.