Sometimes you find yourself needing to add custom JavaScript to add or override a functionality or visualization.
Magic: Have your custom WordPress project done by Artbees experts for a competitive price.
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 Posts element.
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.
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.
3. Write the appropriate JS code.
jQuery(".raven-post-button-text").text(function () {
return jQuery(this).text().replace("Read More","Check it out!");
});
Note: Replace the class .raven-post-button-text with the one you found when inspecting the button.
4. 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 X theme.
1. You can use Custom Header Footer Scripts for Customizer plugin to add Custom JS script in Customizer. Once installed, go to Appearance > Customizer > Custom Scripts from the WordPress left menu.
2. Paste the code you wrote in the Header Script or Footer Script section.
Note: Your code should not be wrapped in <script>....</script> tags.
3. Click the Publish button to save the changes.
Or you can add it to your child theme in jupiterx-child/assets/js/script.js file. How to create a child theme, refer to this article.
Adding custom JS code in Page Settings in Elementor
1. Open a page to which you want to add custom JS code (it will be applied only to that page).
2. Click on Edit with Elementor button.
3. On the left side click on a gear icon to open Page Settings and go to Advanced tab.
4. Open Custom CSS/JS section and add your code into Custom JS box.
Note: When you add a JS code in Page Settings, you’ll see the result on frontend only, on backend it’s not visible.
