{"id":50982,"date":"2022-12-22T12:01:09","date_gmt":"2022-12-22T04:01:09","guid":{"rendered":"https:\/\/www.crazydomains.com\/learn\/?p=50931"},"modified":"2022-12-22T12:27:58","modified_gmt":"2022-12-22T04:27:58","slug":"add-javascript-to-wordpress-websites","status":"publish","type":"post","link":"https:\/\/www.crazydomains.com.au\/learn\/add-javascript-to-wordpress-websites\/","title":{"rendered":"How to Insert JavaScript in WordPress Websites"},"content":{"rendered":"

JavaScript is utilised in a wide range of applications, including game development, web application development, and more. It is also a well-established front-end language that continues to grow and provide flexibility to website functions \u2013 especially WordPress. If you have a plugin for a slider, social media links, or responsive navigation menu on your website, someone has to add\u00a0JavaScript to WordPress website plugins to create those effects.<\/span>\u00a0<\/span><\/p>\n

If you are a WordPress developer accustomed to working with PHP, you may have second thoughts about how to add\u00a0JavaScript to a WordPress website. However, the good news is that JavaScript and PHP share many similarities. They work in various ways and various settings, yet the code you compose isn’t all that different all the time.<\/span>\u00a0<\/span><\/p>\n

In this article, we\u2019ll teach you how to simply add JavaScript to a WordPress website. <\/span>\u00a0<\/span><\/p>\n

3 Ways to Add JavaScript to WordPress Websites<\/span><\/b>\u00a0<\/span><\/h2>\n

1. Enqueueing Scripts for Themes and Plugins<\/span><\/b><\/h3>\n

The recommended method for adding scripts to a WordPress theme is to queue your scripts and stylesheets because it does not only make it simple to access the list of pre-registered scripts, but it also helps prevent conflict between plugins and themes. If you use a plugin that also uses jQuery and adds jQuery to the head of your document with a script tag, you might end up loading jQuery twice, which is not ideal. That can’t happen if your scripts are queued.<\/span>\u00a0<\/span><\/p>\n

Enqueuing scripts in WordPress makes it simple to include dependencies from the list of pre-registered scripts, which is one of the best features. The WordPress function reference contains a comprehensive list of scripts. The only thing left to do is to include the handle of the dependency in the arguments of wp_enqueue_script. That’s it!<\/span>\u00a0<\/span><\/p>\n

To give you an idea of how it would look like, refer to the following script:<\/span>\u00a0<\/span><\/p>\n

function my_add_theme_scripts() {<\/i>\u00a0<\/span>
\n \/\/ stylesheets<\/i>\u00a0<\/span>
\n wp_enqueue_style( ‘jquery-structure-css’, get_template_directory_uri() . ‘\/jquery-ui.structure.css’ );<\/i>\u00a0<\/span>
\n wp_enqueue_style( ‘style’, get_stylesheet_uri() );<\/i>\u00a0<\/span>
\n\u00a0<\/span>
\n \/\/ scripts<\/i>\u00a0<\/span>
\n wp_register_script( ‘custom.js’, get_template_directory_uri() . ‘\/js\/custom.js’, array(‘jquery’, ‘jquery-ui-selectmenu’), ‘1.0.0’, true );<\/i>\u00a0<\/span>
\n wp_enqueue_script(‘custom.js’);<\/i>\u00a0<\/span>
\n}<\/i>\u00a0<\/span>
\nadd_action( ‘wp_enqueue_scripts’, ‘my_add_theme_scripts’ );<\/i><\/span><\/p>\n

2. Adding JavaScript Anywhere on Your WordPress Site withthe Plugin WPCode<\/span><\/b><\/h3>\n

In some cases, for a plugin or tool to function properly, you will need to copy and paste a snippet of JavaScript code into your website. These scripts typically reside in the WordPress blog’s header or footer, loading the code with each page view.<\/span>\u00a0<\/span><\/p>\n

For instance, in order for Google Analytics to keep track of visitors on your website, you need to manually insert a code to run on each and every page of your website. You can manually add the code to your header.php and footer.php files, but when you update or change your theme, these changes will be overwritten. Because of this, we recommend adding JavaScript to your entire WordPress website with the help of <\/span>WPCode.<\/span><\/a>\u00a0<\/span><\/p>\n

It\u2019s a powerful WordPress plugin that simplifies adding custom code to any area of your website. Best part: it\u2019s free!<\/span><\/p>\n

3. Adding JavaScript to HTML<\/span><\/b><\/h3>\n

There are two methods for integrating JavaScript into HTML. One\u00a0is by adding it directly to the file and the other is through a separate file. <\/span>\u00a0<\/span><\/p>\n

Adding JavaScript Directly to a File<\/span><\/b>\u00a0<\/span><\/h4>\n

Direct addition of JavaScript to HTML is the first option. You can accomplish this by employing the <\/span><script> <\/script><\/span><\/i> tag, which ought to cover all of your JS code. You can add JS code between the <\/span><head><\/span><\/i> and <\/span><body><\/span><\/i> tags. <\/span>\u00a0<\/span><\/p>\n

The loading will differ depending on where you add the JavaScript code to your HTML file. It is best to place it in the <\/span><head><\/span><\/i> section so that it remains distinct from the HTML file’s actual content. However, if you put it in the <\/span><body><\/span><\/i>,<\/span> the actual website content will load faster and the JavaScript will only be parsed after that.<\/span>\u00a0<\/span><\/p>\n

Let\u2019s say you want to\u00a0add a JavaScript that\u2019s supposed to show the current time, here\u2019s how it will look like:<\/span>\u00a0<\/span><\/p>\n

<!DOCTYPE html><\/i>\u00a0<\/span><\/p>\n

<html lang=”en-US”><\/i>\u00a0<\/span><\/p>\n

<head><\/i>\u00a0<\/span><\/p>\n

<meta charset=”UTF-8″><\/i>\u00a0<\/span><\/p>\n

<meta name=”viewport” content=”width=device-width, initial-scale=1″><\/i>\u00a0<\/span><\/p>\n

<script>JAVASCRIPT IS USUALLY PLACED HERE<\/script><\/i>\u00a0<\/span><\/p>\n

<title>Time right now is: <\/title><\/i>\u00a0<\/span><\/p>\n

<\/head><\/i>\u00a0<\/span><\/p>\n

<body><\/i>\u00a0<\/span><\/p>\n

<script>JAVASCRIPT CAN ALSO GO HERE<\/script><\/i>\u00a0<\/span><\/p>\n

<\/body><\/i>\u00a0<\/span><\/p>\n

<\/html><\/i>\u00a0<\/span><\/p>\n

Adding JavaScript on a Separate File<\/span><\/b>\u00a0<\/span><\/h4>\n

Sometimes it doesn’t seem like the best way to directly add JavaScript to HTML. Most of the time, it’s best to keep JavaScript code in separate files because some JS scripts need to be used on multiple pages. Because of this, external file importing is another way of adding JavaScript to HTML. Here are a few advantages of putting JS code on separate files:<\/span>\u00a0<\/span><\/p>\n