{"id":5708,"date":"2020-03-24T15:00:19","date_gmt":"2020-03-24T14:00:19","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=5708"},"modified":"2020-10-15T10:21:54","modified_gmt":"2020-10-15T08:21:54","slug":"add-custom-javascript-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-custom-javascript-to-wordpress\/","title":{"rendered":"How to Add Custom JavaScript to Your WordPress Website"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]JavaScript code can be added to your WordPress website for various purposes, usually to improve a feature or add functionality. Regardless of the reason you\u2019re adding JavaScript (JS) to your website, it is important to properly create, place and keep up this code. Incorrect code placement can hurt the site\u2019s performance or even break it. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In this article, we will show you several ways to add the JavaScript code. Let\u2019s begin![\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How To Add JavaScript To WordPress – Theme Options<\/h2>\n

[\/vc_column_text][vc_column_text]Some WordPress themes incorporate a field for including JS code. To see if that\u2019s the case with your website theme, review its available options. If the option exists, insert the JS code in the designated place, if it exists.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For example, all WordPress themes created by Qode Interactive<\/a> allow you to insert JS code in the theme settings. You can access them by navigating to Theme_name Options > General. Scroll down to the section called Custom Code and insert your JS code in the Custom JS field.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Theme <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Using Plugins<\/h2>\n

[\/vc_column_text][vc_column_text]One of the many benefits of WordPress is a wide array of available plugins for just about any functionality you can think of. Therefore, adding JS code to your WordPress site can be as simple as finding the plugin that best suits your needs.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]JavaScript plugins can be free, premium, or even come bundled with the themes. In this article, we will cover several examples of these plugins, but if they don\u2019t seem like the right fit, you are free to explore beyond this list.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Plugin Shortcodes<\/h3>\n

[\/vc_column_text][vc_column_text]Some plugins, like WPBakery Page Builder, have shortcodes for adding JS to individual pages and posts. In WPBakery, this shortcode is called Raw JS.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you don\u2019t have this plugin, first you have to install it and activate it. Then, go to the backend of a page or a post, and click on \u201cAdd Element\u201d.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Search for \u201cRaw JS\u201d and click to add the shortcode.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Raw <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The only thing left to do is add the code within the shortcode. By creating the shortcode, you also create a dummy JS code. Add your code between the opening <script><\/code> tag and closing <\/script><\/code> tag.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you delete the dummy JS code, you have to make sure that the code you insert has both the opening <script><\/code> and the closing <\/script><\/code> tag.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Raw <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Raw <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you are using this method to add JavaScript to your website, it is strongly recommended that you add JS code that is smaller in size. Otherwise, the page loading speed could decrease. If you want to include larger JS code, consider using a different method.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How To Add JavaScript To WordPress – Plugin Options<\/h3>\n

[\/vc_column_text][vc_column_text]Most plugins offer options for including JS code. Depending on the plugin, this code can be applied site-wide, or be page-specific. In this section, we will describe the Insert Headers and Footers plugin<\/a>, as it is a widely recommended solution.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This plugin is used to implement site-wide JS code, although the code can be adjusted for specific pages or posts only. For the purposes of this guide, we will focus on the site-wide code, since the intricacies of additional code adjustments warrant a separate article. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]One example of popular site-wide code is the Google Analytics code. To install the plugin, navigate to Plugins, click on \u201cAdd New\u201d and type a keyword (\u201cHeaders\u201d, for example) in the search bar. Click on the result, install it, and don\u2019t forget to activate it – the installed plugin won\u2019t work unless it is activated.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Headers <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To use the plugin, go to Settings, click on Headers and Footers, and insert your code either in the Scripts in the Header or Scripts in the Footer section.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Headers <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Headers <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Here\u2019s another tip: inside the Scripts in the Header field, include the code that is a part of the <head><\/code> section and applied site-wide. This includes Google Analytics code, stylesheets or code concerning <meta><\/code> tags, for example. The rest should be placed in the \u201cScripts in Footer\u201d section, especially if the JS code is adjusted to be page-specific.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, if the code isn\u2019t working when you add it to the first section, try to remove it and add it to the second section.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Another way to add JS code is to add it directly to the appropriate section.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Adding <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you have larger JS scripts, you can create a stylesheet (a file with a .js extension), upload it to the dedicated JS folder inside your theme and include its path. The path will most likely be one of the following two:[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]wp-content\/themes\/theme_name\/js[\/vc_column_text][vc_column_text]Or[\/vc_column_text][vc_column_text]wp-content\/themes\/theme_name\/assets\/js [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Add the line of code with the path to the uploaded file. Depending on the path, the src attribute will vary. Here are two possible examples: [\/vc_column_text][vc_empty_space height=”50px”][vc_column_text]<\/p>\n
<script src=\"your_website_url\/wp-content\/themes\/theme_name>\/js\/filename.js\"><\/script><\/pre>\n
[\/vc_column_text][vc_empty_space height=”18px”][vc_column_text]Or[\/vc_column_text][vc_empty_space height=”50px”][vc_column_text]<\/p>\n
<script src=\"your_website_url\/wp-content\/themes\/theme_name>\/assets\/js\/filename.js\"><\/script><\/pre>\n
[\/vc_column_text][vc_empty_space height=”18px”][vc_column_text]When you use this line, the entire code from the uploaded file will be loaded when the script is run.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Adding                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Make sure the code you add has both the opening <script><\/code> and the closing <\/script><\/code> tag.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Always check your site thoroughly after adding the JS code. Although JavaScript code can improve the functionality of certain pages, it can harm others by overlooking the outlying cases.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you don\u2019t think this plugin is the right fit for you, we encourage you to explore the WordPress.org plugins page<\/a> or tell us about your experiences with JS inclusion plugins in the comments.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now let\u2019s move onto more coding-focused solutions. These will require a somewhat deeper understanding of WordPress, so they are a good choice for developers. If you want to give them a try despite not being WordPress savvy, try doing some additional research to prepare. [\/vc_column_text][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”top-picks-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
More Advanced Methods<\/h2>\n
[\/vc_column_text][vc_column_text]Before we show you coding solutions for JavaScript, we will address some bad coding practices and habits you should avoid. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]One bad practice you should avoid at all costs is directly adding JS code inside your theme\u2019s header.php and footer.php files. This also extends to the file path inclusion of a certain uploaded JS file, both inside header.php, and footer.php.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Why is this such a bad idea? Whenever your theme is updated, your code will be lost during the all-encompassing override of the theme files. There are ways to avoid this by copying header.php and footer.php files inside a child theme. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, it can still lead to conflicts with the plugin-loaded JS scripts, which is precisely why this method is not recommended. Now let\u2019s look into the right ways to add JavaScript to your WordPress website.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Using wp_head and wp_footer Hooks<\/h3>\n
[\/vc_column_text][vc_column_text]A method that is less encouraged, but still better than directly including the code, is adding the code using the wp_head and wp_footer hooks<\/a>. Hooks are a way of changing the default behavior of themes, plugins, and WordPress, without changing its template files.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You can add the code both inside the theme and plugins, created specifically for your site. We recommend you use the functions.php of your child theme, so you can preserve the changes after theme updates. Another suggestion – add smaller JS code scripts. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Why is this method not encouraged? While it may seem effective at first, adding too much code can easily become hard to keep up with. Furthermore, it can cause certain scripts to load multiple times, decreasing the speed of your website. So, this method will serve you well only with careful and limited use. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you are sure you want to add JavaScript this way, simply insert one of these 2 blocks of code inside your functions.php (or functions.php of your child theme), depending on whether you want to hook onto wp_head or wp_footer.[\/vc_column_text][vc_empty_space height=”50px”][vc_column_text]<\/p>\n
function my_javascript_code() {\r\n?>\r\n<script>\r\n\/\/ your javascript code goes here\r\n<\/script>\r\n<?php\r\n}\r\nadd_action('wp_head', 'my_javascript_code');<\/pre>\n
[\/vc_column_text][vc_empty_space height=”39px”]
\n    
\n                                    \"Javascript                        <\/div>\n<\/div>[vc_empty_space height=”60px”][vc_column_text]<\/p>\n
function my_footer_javascript_code() {\r\n?>\r\n<script>\r\n\/\/ your javascript code goes here\r\n<\/script>\r\n<?php\r\n}\r\nadd_action('wp_footer', 'my_footer_javascript_code');<\/pre>\n
[\/vc_column_text][vc_empty_space height=”39px”]
\n    
\n                                    \"Javascript                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]It is also possible to apply the JS code selectively, using WordPress conditional tags<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]We will include two possible examples:[\/vc_column_text][vc_empty_space height=”23px”]