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.
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');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');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');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!
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.
