{"id":52860,"date":"2015-08-28T02:29:30","date_gmt":"2015-08-28T06:29:30","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=52860"},"modified":"2017-08-16T06:42:31","modified_gmt":"2017-08-16T10:42:31","slug":"cherryframework-4-how-to-include-custom-js-file","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-include-custom-js-file.html","title":{"rendered":"CherryFramework 4. How to include custom JS file"},"content":{"rendered":"

\r\n

This tutorial shows how to include custom JS file in CherryFramework 4 templates.<\/p>\r\n

CherryFramework 4. How to include custom JS file<\/a><\/p>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n

The best practice to insert custom JS files is to register and enqueue them. Once the file is created and you’re ready to proceed, perform the following steps:<\/p>\r\n

    \r\n
  1. \r\n

    Open your WordPress admin panel and navigate to Appearance> Editor> theme####> Theme Functions (function.php)<\/strong> file. Add new PHP line right below opening <?php <\/strong>tag on top:<\/p>\r\n

    \/\/include custom JS file\r\nwp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri().'\/js\/my_custom_script.js', array('jquery'), '1.0' );<\/pre>\r\n
    Using "\/\/" <\/strong>commenting tag is optional, you can add it to place some description text for the php code (if needed). Update the file once finished editing.<\/p>\r\n
    Note:  <\/strong>provided script contains the reference to the actual JS file included. Make  sure that ‘my_custom_script.js’ <\/strong>title in the code is replaced with your actual JS file name:<\/p>\r\n
    \"CherryFramework-4_How_to_include_custom_JS_file_1\"<\/a>\r\n  <\/li>\r\n
  2. \r\n
    The script placed to functions.php<\/strong> specifies the directory for the included JS file. So, you should upload it to the server. Open server files using either FTP client or hosting File Manager. Navigate to the ‘wp-content\/themes\/theme####\/’<\/strong> directory (where theme##### is your actual child theme).<\/p>\r\n<\/li>\r\n
  3. \r\n
    In case there is no ‘js’ <\/strong>folder by default, you should create it manually.<\/p>\r\n
    Note: <\/strong>make sure the folder title is ‘js’ specifically (case sensitive)<\/strong>.<\/p>\r\n<\/li>\r\n
  4. \r\n
    Now open the new ‘js’ <\/strong>folder and upload your custom JS file<\/strong> inside.<\/p>\r\n
    Note: <\/strong>double check the title of the actual file and the way it is written in the functions.php. They should to be identical:<\/p>\r\n
    \"CherryFramework-4_How_to_include_custom_JS_file_2\"<\/a>\r\n  <\/li>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    CherryFramework 4. How to include custom JS file<\/a><\/p>\r\n
    <\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial  shows you how to include custom JS file in CherryFramework 4.<\/p>\n","protected":false},"author":66,"featured_media":52865,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2012,789,918,1086],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52860"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=52860"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52860\/revisions"}],"predecessor-version":[{"id":82718,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52860\/revisions\/82718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/52865"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=52860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=52860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=52860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}