How to Add JavaScript in WordPress Page and Post?

WordPress is a popular open-source Content Management System (CMS) used to create dynamic websites. While 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.

By learning how to use it on your WordPress site, you can use the code more effectively, especially in specific sections. There are several ways to add JavaScript to your WordPress pages and posts. You can use a plugin, functions and hooks, or edit your theme’s files to get the customization you want.

What is JavaScript?

JavaScript is a scripting or programming language that allows you to implement complex features on web pages. Whenever a web page does more than just display static information, such as showing timely content updates, interactive maps, animated 2D/3D graphics, or scrolling video jukeboxes, JavaScript is likely involved. It is the third layer of standard web technologies, building upon HTML and CSS. HTML structures and gives meaning to web content, while CSS applies styling. JavaScript, on the other hand, enables dynamically updating content, multimedia control, image animation, and much more.

For example, consider a button on a web page. We can use HTML to give it structure, CSS to style it, and JavaScript to add dynamic behavior, like changing the label when clicked¹1. JavaScript is widely used not only for web pages but also in non-browser environments like Node.js, Apache CouchDB, and Adobe Acrobat³3. It’s a versatile language that empowers developers to create interactive and engaging web experiences. 

In this article, we are going to see how we can add custom JavaScript code to your WordPress website.

JavaScript Code snippet:

Javascript

<script type="text/javascript"> 
 
    // Some JavaScript code
 
</script> 

Adding JavaScript Using Plugin

For adding the JavaScript Code to your WordPress website first you have to install the WP Code plugin to your WordPress website.

The plugin helps beginners to the JavaScript code easily to their website and decreases the risk of website breakage.

For adding the code to your WordPress website follow these simple steps.

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

Step 2: After login into your WordPress website, Now hover over the “Plugins” section and then click on the “Add New” button to add the “WP Code” plugin to your WordPress website.

Step 3: Now search for the “WP Code” in the search box and then click on the “Install Now” button to install the plugin.

Step 4: After installing the plugin click on the “Activate” button to activate the plugin.

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.

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");

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.