WordPress templates and ready-made plugins do not leave much room for website owners to add their own touch to their sites. There are always limited options and settings, and therefore the scope for creativity in designing and preparing the site is very narrow.
If you want to break out of the stereotype and add your personal touch and modify your WordPress site in a professional way, the best option for you is to use the Java language to modify the site. In this article, we will review a comprehensive guide on how to use JavaScript in WordPress and obtain professional results in every sense of the word.
Of course, you must have complete knowledge and sufficient experience in using and dealing with code within a WordPress site. The software changes you make on the site will have major impacts and can cause significant damage to the site if you are not familiar enough with programming matters.
In this article, we will explain the ways to add JavaScript codes to a WordPress site and use them to make many modifications within your site and add many options that ready-made templates and plugins do not provide you by default.
Why do you need to add JavaScript codes inside your site?
There are many advantages that you will get from adding and using JavaScript codes within your WordPress site, and this strategy constitutes the ideal solution for site owners when they want to add formats or make certain modifications within the site that are not available within the limited options provided by the template. Here are some cases where you need to add JavaScript code correctly:
- Sometimes it is necessary to add JavaScript code from external sources to a site, for example when you want to link your Google analytics account to your WordPress site, you will need to add JavaScript code to do the linking process correctly.
- The JavaScript language allows making modifications to a site that cannot be made using other languages such as HTML or CSS. For example, you can show a box or a pop-up window in front of the visitor when he performs an activity within the site, such as a pop-up window with additional information or offers appearing when the visitor clicks On a specific icon within the site. JavaScript can be used to perform this step easily.
- The JavaScript language does not consume a lot of hosting resources or your site’s hosting space, because it runs directly from the visitor’s browser, meaning that its source will be the visitor and not the server. This preserves hosting space on your site’s server.
- JavaScript codes can be used to collect data and information about visitors to your site, because they run from the visitor’s web browser, so you can customize them to collect some valuable legal information about users.
- JavaScript can be used to add many useful elements within website content, such as an audio player, video player, and other elements.
The difference between adding JavaScript codes and adding CSS and HTML codes
CSS and HTML codes are used to create and configure the basic rules of the page, such as inserting text, images, color schemes, backgrounds, and simple animations into the site.
While JavaScript goes beyond these functions to perform many additional tasks that add some distinction to the site, as it can be used to customize software functions to interact with the behavior of visitors. For example, you can program an autoresponder that interacts with the visitor and responds to common questions within your site, in addition to the ability to program The site to perform certain actions when the visitor performs certain actions within the site.
You can add HTML and CSS codes to a site easily within the editing page of the article or page, or through the “ Customize ” option, which is available in all WordPress templates, but JavaScript codes cannot be added in the same way.
There are two ways to add JavaScript codes within the site, either through one of the specialized plugins or by directly modifying the FUNCTIONS.PHP file.
How to write JavaScript codes
JavaScript, like any other programming language, has a fixed syntax that is used to write codes within it and execute related commands.
The following formula is the formula for writing JavaScript codes within the site:
As you can see, it starts with the tag <script> and ends with the same tag </script>.
All required JavaScript codes are added instead of the sentence “Here the JavaScript codes are written.”
There is another formula, but it is used if the JavaScript codes are located in an external file and are imported to be activated within your site, and that formula is as follows:
As you can see, the formula is similar to the first formula, but here the JavaScript codes are not written directly, but are imported from an external file, and a link to the JavaScript file that contains the codes to be executed within the site is placed instead of the phrase “ file link .”
Ways to add JavaScript codes to your WordPress site
As we explained before, there are two basic methods for adding JavaScript codes to your WordPress site, and in the following paragraphs we will detail both methods in a simplified and practical manner so that you will be able to add JavaScript codes and apply them to some pages of your site or even to your entire site without any problems occurring.
1. Add JavaScript codes using plugins
The first way to add JavaScript codes to your site, and it is definitely the easiest way, is through WordPress plugins. The first step is to install a plugin that automatically attaches codes into the source code of the WordPress template. One of the most famous and simplest of these add-ons is the insert header and footer add-on .
To use the add-on, you must download it first, then activate it from within the WordPress control panel, from the “ Plugins ” option, then “ Add New ,” then type the name of the add-on in the search for add-ons box so that the add-on you download and activate appears in front of you:
After successfully installing and activating the add-on on your site, we will go to the add-on settings page, through which you can add JavaScript codes.
To access this, we will go through the WordPress control panel to “ Settings ” and you will find the plugin page tab, as in the picture:
In the add-on page settings, you will find three large boxes for adding codes, which are as follows:
- Scripts in header
- Scripts in footer
- Scripts in body
When you add the code into the scripts in header box, those codes will be added into the header.php file on your site.
If you add the codes in the Scripts in body box, the codes will be added inside the index.php file.
When you write the codes in the Scripts in footer box, the codes will be added to the footer.php file on your site.
Note : It is best to add JavaScript codes into the footer of your site so that they load at the end of the page, so that they do not affect the loading and appearance of the basic virtual elements at the top of the site.
Now let’s try a practical example of adding JavaScript code. We will add code that displays a “welcome box” or what is called “alert” directly as soon as the visitor enters the site. The detailed steps are as follows:
You also notice that the previous code was written in the same format as the general JavaScript code that we explained at the beginning of the article.
Now we will move to the add-on page and put this code inside the Footer box as follows:
Now, after pasting the code, we will click on the save button, after which we will open the site directly to see the new change. You will notice that an alert box containing the phrase “Welcome to our website” will appear immediately upon entering the site, as in the picture:
You can search online for JavaScript codes that perform various activities within the site, then copy these codes and paste them into the box on the add-on page and press the save button as in the previous steps for the code to be applied and executed on your site properly and without any problems.
Thus, we have learned how to use the insert header and footer plugin to add JavaScript codes to your site. It is worth saying here that the codes that we worked to add in the add-on will be applied to all pages and sections of the site without exception.
Here the following question may come to your mind : What if I want to add JavaScript codes within only one page or on specific pages and not on other pages of the site?
Well, in this case, we will need to use another plugin. The task of this plugin will be to run JavaScript codes on specific pages or links within the site and not on others.
In this case, we advise you to use the Code embed add-on , which is one of the best add-ons that is used to run and execute JavaScript codes on specific sites within the pages of your site without them being executed on other sites or other pages on the site.
After installing and activating the add-on on your site, you can insert JavaScript codes on any page you want and within any site on the same page.
Suppose you want to insert the previous JavaScript code to show a welcome box to the visitor within a specific page on the site, so that this welcome box appears when the visitor enters this page rather than on other pages of the site.
To accomplish this task, we will first begin by moving to the editing window of the page in which we want to insert the code. Within the editing page, you will find at the top of the screen 3 dots next to the settings button. Click on them to reveal this box shown in the image. Then we will click on the “ Preferences ” option, as In the following picture:
Then, from the window at the top, go to the “ Panels ” tab, then click on the “Activate Custom Fields ” button and reload the page.
Now you will notice that a box titled “ Additional Properties ” appears, which contains the “ Name ” field and the “ Value ” field.
As you can see in the image above, to execute the JavaScript code, you must first write any name that expresses the code that you want to include in the “Name” field, and the name must begin with the word CODE. For example, we will write the name CODEalert.
As for the “ Value ” field, we will write the JavaScript code that we want to insert and execute on the current page that we are editing. In our article, we pasted code that displays a welcome box containing the sentence “Demo JavaScript code,” as follows:
Now, after entering the name and value in those fields, we will click on the “ Save ” icon, and then we will open the link to the current page in any browser to see the new change. You will notice that a welcome box appears immediately upon entering the page containing the phrase “JavaScript welcome code” as in the image below. This box will not appear on any other page as we mentioned.
By the same mechanism, you can add more complex JavaScript codes within any of your site pages. Thus, we have learned how to add JavaScript codes to entire site pages, and also add them within a specific page of the site and not others.
2. Add JavaScript codes manually
In the previous paragraphs, we explained how to add JavaScript codes to the site without opening any of the programming files for the WordPress template that we use, and now we will highlight how to manually modify the site’s code without the need to install external plugins to accomplish this task.
We must emphasize once again that modifying the code of a WordPress template is a serious matter and should not be done unless you have sufficient experience and knowledge to deal with the code and the mechanism of adding it to WordPress templates correctly.
We will continue with the example that we explained previously, which is the JavaScript code responsible for showing a welcome box to the visitor as soon as he opens the site or one of its internal pages, but this time we will add this code manually without installing any of the auxiliary plugins.
Now we want to add the following JavaScript code within the site’s code to show visitors a welcome box containing the sentence “Manual JavaScript code,” as follows:
The first step is to open the functions.php file, and we can do this from within the site’s file manager or through the WordPress control panel. Then we will go to the “Appearance” option, then “Edit Template” and open the functions.php page and add the code at the end of the file, as is Shown in the picture:
In the previous image, we have added the JavaScript code that displays the welcome sentence to visitors when entering the site, just as in the method of external additions. What is different about this method is that additional codes must be written for the final version, which are as follows:
This code that we added is necessary for the JavaScript code to be activated, and for the file to be saved. This code is essential for adding JavaScript codes specifically to the functions.ph file.
In this code we created a function called “mynewfuncalert”, you can call it any other name you want, and we used the wp_head function to tell the template to add this code inside the header.php file.
If we want the template to add JavaScript codes inside the footer.php file, we can replace the wp_head function with the wp_footer function.
Now, after adding the code in this modified form as in the previous image, we will move on to browsing the site to preview the new changes. We will find the same welcome message that we wrote and it already contains the sentence “Manual JavaScript code,” as in the image:
In the same way, you can add any other JavaScript code that performs any function within your site, regardless of the limited options that the current WordPress theme provides you.
Thus, we can say that modifying JavaScript codes on your site is not a complicated matter. You can add them to all pages and sections of your site, or you can add them to specific pages, either through specialized external add-ons that add the codes automatically or manually, with some simple modifications that we detailed in our article. .
The examples that we discussed in the article are very simple, and there are versions of the JavaScript language that contain tens and perhaps thousands of functions and codes that add wonderful modifications to your site.
You can learn more about JavaScript codes and apply them within your WordPress site in the ways that we mentioned in our article. Always remember, do not begin any modification to JavaScript codes if you are not knowledgeable and well-versed in all programming matters related to the JavaScript language
