How to add JavaScript code to WordPress, with and without plugins

If you work with WordPress and you need to add a few lines of code JavaScript to your website in this article by CourseWpress.com we tell you how.

What is JavaScript?

JavaScript it is a very powerful programming language.

For all those people who work in Web pages, read:

• Bloggers
• Webmasters
• Web designers.
• SEO specialists.
• Online marketers.
• And a long etc.

The JavaScript language is an excellent tool, as it enables us, among other things, to improve the interactivity of our websites.

Why add JavaScript code to WordPress?

At some point we need to add some lines of JavaScript code to our WordPress installations, because "Java" allows us to give life to items such as:

• Sliders, carousels, and other designs, very typical of the headers of our websites.
• Photo galleries and portfolios.
• Buttons with interactive response.

At the same time, it is through the JavaScript code that our WordPress-based websites interact with the APIs from other content generators, such as Google or Facebook.

But at the same time it is very possible that you already know all that, and that all you want at this point is to take action.

If that's your case, then we get let's do it.

Adding JavaScript to WordPress

There are many possibilities to add JavaScript code to your website WordPress.Org, although you must be careful, because, depending on what cases you could get into trouble.

And if you are thinking that:

"It is a difficult matter to put a few lines of JavaScript code to any WordPress installation."

You're wrong.

It is rather easy, only you have to do things well so as not to get confused.

And don't worry, in this article we share with you some tips that will help you complete the task smoothly.

How to add JavaScript code to WordPress without plugins?

We were telling you, there are many options when it comes to adding JavaScript code to a website running in WordPress.Org no need to use plugins nor external tools, but you must know that each of the options will work better in specific cases.

Here we go with the first case.

Warning:

By way of disclaimer.

In the following lines you will find instructions that will guide you step by step, in the process of adding lines of JavaScript code to the files of your website.

Hence, before from Modify any file or archive of your website, especially if it is an online and working site, you must create a back.

You can create backups by following this tutorial:

How to Create a Backup in WordPress

At the same time we recommend, before making any changes to your active website, try making changes to a clone of your page.

Here we tell you all about clone testing sites.

How to use XAMPP to install WordPress locally

         Adding JavaScript to the Footer or Header of our website

On many occasions we need to add a code to the .PHP files of our theme active, and in several cases it is JS code.

It occurs when we need to customize the characteristics of certain suites or tools that work with their own API.

All we have to do is, in our WordPress dashboard, follow the following route:

            Appearance> Editor

There we will find many files, but in this circumstance the one we need is the file:

            footer.php

We open it.

We will add our code just after this tag:

And before that:

           

            We save the changes and that's it.

            We have added JS code to WP.

         Adding JavaScript to a blog post

Now, if what we want is to add some lines of JavaScript code to one of our inputs. all we have to do is:

1. Add the code, or Java script, to a JavaScript file, or create a JS file.
2. The WordPress people, in the section wordpress.org/Using_Javascript They explain that: all scripts must be defined using their function name:

function updatepage () {var m = »Page updated« + document.lastMo …….}

3. Open mode HTML of your editor, to make the JavaScript work within our blog article we have to combine the call to the script, with the call to the JavaScript:

          

How to add JavaScript code to WordPress with plugins?

Now at the same time we can add JavaScript to our site using plugins and one of the best for this is:

         Scripts n Styles

Scripts n Styles is a plugin from the people of unFocus Projects that allows us to add CSS code and JavaScript to our website in a simple way.

All we have to do is search for it in the plugin repository or download it through the following link:

            https://wordpress.org/plugins/scripts-n-styles/

Now we can add CSS code and functionalities of JavaScript anywhere on our site, either: Pages and articles.

How to use Scripts n Styles?

The operation of this plugin could not be easier, all you have to do is:

Open your WordPress editor, either in a Article or on a page.

You will see how a tab appears that allows you to add code JavaScript.

Other details to consider when working with JS in WP

         Protect your WordPress installation and your custom codes

As we have always told you, never work directly on the files of your WordPress installation.

Why?

Because on the one hand you are putting the health of your site at risk.

And on the other hand, you risk losing the customizations that you add, whether they are lines of CSS code or JavaScript functions.

As an example, if you add additional code directly on the files of your website as in the header or in the footer, the chances that you will lose the add-ons with an update to your theme are quite high.

That is why a good option is to work on a child theme or child theme, which allows you to add code and modify the theme however you like, without the risk of losing your job.

Did you like the article?

And this is just the beginning, there is much more to learn, if you want to know more sign up for the best online WordPress course in Spanish.