{"id":1997123,"date":"2021-03-23T08:21:05","date_gmt":"2021-03-23T08:21:05","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1997123"},"modified":"2021-04-14T09:34:42","modified_gmt":"2021-04-14T09:34:42","slug":"adding-custom-javascript-to-views-templates-and-archives","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/adding-custom-javascript-to-views-templates-and-archives\/","title":{"rendered":"Adding Custom JavaScript to Views, Templates and Archives"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

This way, you don’t have to add or edit any files in your theme.<\/p>\n\n\n\n

Steps for adding JavaScript to a View<\/strong><\/h2>\n\n\n\n
  1. Edit the page or a template with the View you want to add JavaScript to.<\/li>
  2. Select the View<\/strong> in block navigation. <\/li>
  3. In the right sidebar expand the Custom JS and CSS <\/strong>section and paste the code into the Custom JS<\/strong> text area.<\/li><\/ol>\n\n\n
    \n
    \"\"<\/a>
    Adding custom JavaScript to a View<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

    Click the pencil<\/strong> icon to open a pop-up dialog for more convenient pasting and editing of your custom code.<\/p>\n\n\n\n

    Steps for adding JavaScript to a template<\/strong><\/h2>\n\n\n\n
    1. Go to Toolset \u2192 Content Templates<\/strong> and click the Content Template you wish to edit.<\/li>
    2. In the right sidebar, scroll to the JS editor<\/strong> section with a text area for entering your code.<\/li><\/ol>\n\n\n
      \n
      \"\"<\/a>
      Adding custom JavaScript to a Content Template<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

      Steps for adding JavaScript to an archive<\/strong><\/h2>\n\n\n\n
      1. Go to Toolset \u2192 WordPress Archives <\/strong>and click the archive you want to edit.<\/li>
      2. In the right sidebar, make sure you’re on the WordPress Archive <\/strong>tab.<\/li>
      3. Expand the Custom CSS and JS<\/strong> section and paste the code into the Custom JS<\/strong> text area.<\/li><\/ol>\n\n\n
        \n
        \"\"<\/a>
        Adding custom JavaScript to a WordPress Archive<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

        Click the pencil <\/strong>icon to open a pop-up dialog for more convenient pasting and editing of your custom code.<\/p>\n\n\n\n

        Achieving great results with little coding by using jQuery<\/strong><\/h2>\n\n\n\n

        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.<\/p>\n\n\n\n

        The following example uses jQuery to toggle the display of the \u201cmy-contents\u201d section on a page whenever a link or a button (labeled \u201cshow\u201d) is clicked:<\/p>\n\n\n\n

        \n jQuery-show-hide-example<\/a>\n
        \n 
        jQuery( document ).on( "click", "#show", function() {\r\n  jQuery( "#my-contents" ).slideToggle( "slow", function() {\r\n  });\r\n});<\/pre>\n