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:
(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);
Second Example:
To open external links in new tabs from the image gallery shortcode:
jQuery( document ).ready(function() {
jQuery(".mk-gallery-item .item-holder .full-cover-link").attr("target","_blank");
});
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:
In a Raw Javascript Shortcode Inside a Page
You can add the JS fix individually to each page using Visual Composer.
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.