The 3 Methods For Adding Javascript To Elementor Sites

Besides of the many features you can implement to your site, there are an increasing amount of platforms requiring you to insert Javascript code for them to work with your site, Google Analytics, Hotjar and the Facebook Pixel for ads just to name a few.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

Have you ever noticed how some pages or posts that you visit have elements that interact with your actions? Whether that’s clicking or hovering over an element and triggering an action somewhere else, or scrolling down to a certain point and having an element displayed out of nowhere, these types of elements are on all corners of the internet and all of them are the works of a web development language called Javascript.

 

Javascript is according to Mozilla:

A scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies.

 

Besides of the many features you can implement to your site, there are an increasing amount of platforms requiring you to insert Javascript code for them to work with your site, Google Analytics, Hotjar and the Facebook Pixel for ads just to name a few. So, learning how to place these codes in your website is non-negotiable these days, and this is exactly what you will learn today, because in this post I will be teaching you some of the beginner methods for adding javascript to elementor.

 

1. There are plugins for that

Like I mentioned before, there are third-party tools that ask you to copy and paste their code in a part of your website for them to work. Most of the times, these codes go in the header or footer of your website. The Google tools, like Analytics or the Tag Manager are two examples of these platforms. Analytics in particular, in order for it to track every person who visits your website, needs to be in the head section.

 

One of the good things about WordPress is that because it has such a large global community, there are pretty much plugins for every little thing you need, such as adding javascript codes to your site. In the WordPress repository of plugins, you can search for either of the plugins Insert Headers and Footers or Code Snippets. Both will do the work.

 

If you’re working with Insert Headers and Footers, all you need to do is go to the Settings » Insert Headers and Footers page, where you will find yourself with two boxes, one for all the codes that need to be implemented in the header and one for all the codes that need to be implemented in the footer.

 

adding javascript to elementor

 

And, to continue with what I’ve mentioned here, if it’s Google Analytics that you’re installing, all you need to do next is paste your code in the Header box, click save and that’s it.

 

2. Is it that easy adding javascript to Elementor?

While adding a javascript code snippet with one of the plugins listed above, sometimes it is easier adding it with Elementor. There are times where you need to create just a simple function like implementing a slider on a page.

 

On Elementor, all you need to do for adding a javascript code snippet is to drop the HTML widget in the page or post you want and copy and paste the code there.

 

 

For instance, in the tutorial I previously wrote for creating basic sliders without Elementor Pro, in the widget, you add the following:

 

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});\
</script>

 

One thing that needs to be noted is that adding javascript to Elementor will only work on the single page or post you need that specific functionality. So, if it’s something that needs to be present throughout the site or if, in the example of the slider, you’re planning to create several on different pages, then it’s best to follow method 1.

 

3. Code. The most complicated method

The third and final method requires a bit of knowledge of adding code to WordPress files. To beginner users, it is the most daunting one, for sure, because messing up these files by just the slightest can give you site errors and leave your site useless.

 

For this method, the first thing you need to do is make sure you have a child theme installed. The reason for this is that WordPress themes are updated constantly and if you edit the WordPress files of your theme and then an update comes, your edits will be lost with the update. WPBeginner has an amazing tutorial on how to create child themes.

 

Once you’re sure you have a child theme, you need to go to the functions.php file of your theme and add the code with the following structure:

 

function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
This code will add the javascript snippet in the head section of your website (notice the part in the code that says ‘wp_head’). If you want it to be in the footer, change the add_action part to add_action( 'wp_footer' , 'wpb_hook_javascript');

 

By following this structure, the snippet will also be added everywhere throughout the site. There are ways, however, to add it to specific pages or posts. For pages, you need an if statement after the function declaration. If that last part sounded like gibberish to you, don’t worry because this is how you will paste the function:

 

function wpb_hook_javascript() {
if (is_page ('14')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Notice that the number in the code is referring to the ID of the page. You can check that on the URL bar of your browser when you’re editing the post. If it’s on a specific post from the blog, you have to change a bit on the code structure to this:
function wpb_hook_javascript() {
if (is_single ('16')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Here, the line “is_single” targets WordPress posts from the blog not pages. And again, the number refers to the ID of the post.

Final Words

This is it. There are a few other methods, but those are more complicated in terms of the knowledge required. My hope is that with these three methods, you don’t have to worry about adding javascript to Elementor anymore. Let me know in the comments if you have any doubts or questions!

Join the templace newsletter

Every week, you will be receiving the greatest tips, design inspiration and all the goodies related to Elementor.

Previous and next POSTS

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

  • Blog
  • Project Application
  • Agency Plans
Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!
Are you looking to build a new website for your business? One that will stand out amongst the competition? Click the button and start your project now!
Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want