Inserting Custom JavaScript Codes

Last Updated on

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.

In this article


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.

x
Note: It’s assumed that you are already familiar with using the developer tool in browsers to inspect elements. To learn more about it, read the Inspecting elements article.

 First Example:

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

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

custom javascript

3
Write 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);

x
Note: Replace the class .mk-readmore with the one you found when inspecting the button.
5
Take 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:

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

custom javascript

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

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

5
Take 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:

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

custom javascript

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

custom javascript

3
Click on Save Settings.

In a Raw Javascript Shortcode Inside a Page

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

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

custom javascript

3
Look for the Raw JS shortcode and add it to the page.
4
Add 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket