1. Home
  2. Inserting Custom JavaScript Codes

Inserting Custom JavaScript Codes

Updated on July 4, 2018

Sometimes you find yourself needing to add custom JavaScript to add or override a functionality or visualization. There are several locations where you can add custom JavaScript in the Jupiter theme.

 

In this article, we’ll explain how to add custom JavaScript to different locations using two examples changing the “Read More” button text in the blog and opening external links in a new tab from the image gallery shortcode.

Writing JS code

For the purpose of this article, we’ll write some custom JavaScript codes that change the “Read More” button text in the blog and open external links in new tabs from image gallery shortcode.

 First Example:

To change the “Read More” button text in the blog:

1Open your site and go to the blog page.
2Inspect the “Read More” button to find the correct class name.

custom javascript

3Write the appropriate JS code.

(function($){
var a = function(){
var b = $('.mk-readmore').html();
b = b.replace('Read More', 'Your text');
$('.mk-readmore').html(b);
};
$(document).ready(a);
a();
})(jQuery);

5Take note of these codes and add them to the theme as explained in the next section.

Second Example:

To open external links in new tabs from the image gallery shortcode:

1Open the page editor where you added the image gallery shortcode.
2Open image gallery shortcode settings.

custom javascript

3Add custom links separating them with commas.
4Write the JS code.

jQuery( document ).ready(function() {
 jQuery(".mk-gallery-item .item-holder .full-cover-link").attr("target","_blank");
});

5Take note of these codes and add them to the theme as explained in the next section.

Inserting the JS Code

After writing the JS codes, it’s time to insert them into Jupiter theme. There are several locations where you can add the custom JS.

Theme Options

To add the custom JS into Theme Options:

1From the WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom JS.

custom javascript

2Paste the codes you wrote in the Custom JS field.

custom javascript

3Click on Save Settings.

In a Raw Javascript Shortcode Inside a Page

You can add the JS fix individually to each page using Visual Composer.

1Open the page editor where you wish to make changes.
2Click on Add New Element in the Visual Composer editor.

custom javascript

3Look for the Raw JS shortcode and add it to the page.
4Add your custom JS code to the JavaScript Code section.

Common Issues

To  avoid common JS problems, we recommend that you read the articles in the links below:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Howto

If you can’t find a solution to your issue, please create a ticket and our support staff will help you.

Did this answer your question?