Adding Custom JavaScript to Views, Templates and Archives in WordPress

Toolset allows you to add custom JavaScript code directly to your Views, Content Templates, and WordPress Archives. Like everything else in Toolset, you do this from the Block Editor itself.

This way, you don’t have to add or edit any files in your theme.

Steps for adding JavaScript to a View

1. Edit the page or a template with the View you want to add JavaScript to.
2. Select the View in block navigation. 
3. In the right sidebar expand the Custom JS and CSS section and paste the code into the Custom JS text area.

Click the pencil icon to open a pop-up dialog for more convenient pasting and editing of your custom code.

Steps for adding JavaScript to a template

1. Go to Toolset → Content Templates and click the Content Template you wish to edit.
2. In the right sidebar, scroll to the JS editor section with a text area for entering your code.

Steps for adding JavaScript to an archive

1. Go to Toolset → WordPress Archives and click the archive you want to edit.
2. In the right sidebar, make sure you’re on the WordPress Archive tab.
3. Expand the Custom CSS and JS section and paste the code into the Custom JS text area.

Click the pencil icon to open a pop-up dialog for more convenient pasting and editing of your custom code.

Achieving great results with little coding by using jQuery

jQuery is a JavaScript library that allows you to achieve impressive results with little effort. jQuery allows you to produce many visual effects, including show, hide, scroll, and fade, by using only a few lines of code.

The following example uses jQuery to toggle the display of the “my-contents” section on a page whenever a link or a button (labeled “show”) is clicked:

jQuery-show-hide-example

?

1 2 3 4

jQuery( document ).on( "click", "#show", function() {   jQuery( "#my-contents" ).slideToggle( "slow", function() {   }); });

Notice the syntax of this code. Even without full knowledge of jQuery or JavaScript, we can determine what this code does. Based on this example, we can tell that the toggle will happen slowly.

jQuery ships with WordPress and loads automatically. You need to understand only a few of its features and functions before you can begin using it.

Tip for advanced jQuery users: to avoid conflicts, use the standard namespace instead of the “$” symbol in your scripts.

Further reading

If you are using JavaScript and jQuery for the first time, or you want to expand your knowledge of this scripting language, many great learning resources are available online. The following are exceptional training aids that we recommend:

• interactive online JavaScript tutorial
• comprehensive JavaScript study guide
• jQuery learning center

Need other JavaScript libraries?

You can obtain access to additional libraries through your theme’s functions.php file. To learn how to do this, please refer to the following:

• WordPress official reference page for the wp_enqueue_script function.
• A Beginner’s Guide to Enqueuing jQuery tutorial, available on the Tutsplus website.