Skip Navigation

Adding Custom JavaScript to Views, Templates and Archives in WordPress

By using JavaScript, you can add great visual effects and interactivity to your Views, templates, or archives.

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.
Adding custom JavaScript to a View

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.
Adding custom JavaScript to a Content Template

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.
Adding custom JavaScript to a WordPress Archive

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

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:

Updated
April 14, 2021