{"id":51703,"date":"2015-08-10T01:48:03","date_gmt":"2015-08-10T05:48:03","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=51703"},"modified":"2017-08-16T06:43:22","modified_gmt":"2017-08-16T10:43:22","slug":"wordpress-cherry-3-x-how-to-include-custom-js-file","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-cherry-3-x-how-to-include-custom-js-file.html","title":{"rendered":"WordPress Cherry 3.x. How to include custom JS file"},"content":{"rendered":"<p>\r\n<p>In this tutorial you will learn the way to include a custom JS file to Cherry Framework 3 based theme.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=c8idKCyZ7G4?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress Cherry 3.x. How to include custom JS file<\/a><\/p>\r\n<p>If you need to add a custom JS script to your template, you should not edit Cherry Framework 3 JS files, because your changes will be overwritten after the Cherry Framework 3 update.<\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<p>Some Cherry Framework 3 based templates include my_script.js or custom.js files in the <strong>js<\/strong> folder of the child theme. If your template does not have such files, you can include a custom JS file manually. To do it, perform the following steps:<\/p>\r\n<ol>\r\n<li>\r\n<p>Connect to your FTP or open File Manager in the Hosting Control Panel. Open <strong>custom-function.php<\/strong> file from <strong>wp-content\/themes\/themeXXXXX\/includes<\/strong> directory, where XXXX is the number of your theme. And add the following script to this file after the opening tag <strong>&lt;?php<\/strong>:<\/p>\r\n<pre class=\"brush:php\">\r\nwp_enqueue_script( &#39;custom-scripts&#39;, get_stylesheet_directory_uri().&#39;\/js\/custom.js&#39;, array(&#39;jquery&#39;), &#39;1.0&#39; );\r\n<\/pre>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/custom_js_file.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/custom_js_file-300x68.jpg\" alt=\"custom_js_file\" width=\"300\" height=\"68\" class=\"aligncenter size-medium wp-image-51705\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/custom_js_file-300x68.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/custom_js_file-150x34.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/custom_js_file.jpg 984w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>Save the changes in the file.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Then upload a new <strong>my_script.js<\/strong> file to <strong>wp-content\/themes\/themeXXXXX\/js<\/strong> directory on your server (you should create <strong>js<\/strong> folder in the child theme directory, if you don&#8217;t have it).<\/p>\r\n<p>New JS file can be created via File Manager in the Hosting Control Panel (see the screenshot below) or with any code editor or via Hosting Control Panel. This <a href=\"https:\/\/www.youtube.com\/watch?v=RavrwmxfgF0\">video tutorial<\/a> will show you how to create a new JS file with Notepad:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/custom_js_file2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/custom_js_file2-300x169.jpg\" alt=\"custom_js_file2\" width=\"300\" height=\"169\" class=\"aligncenter size-medium wp-image-51704\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/custom_js_file2-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/custom_js_file2-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/custom_js_file2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<\/ol>\r\n<p>Now you can add your custom JS script to <strong>my_script.js<\/strong> file. Don&#8217;t forget to save the changes after editing the file.<\/p>\r\n<p>This is the end of the tutorial. Now you know how to include a custom JS file to Cherry Framework 3 based theme. <\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=c8idKCyZ7G4?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress Cherry 3.x. How to include custom JS file<\/a><br \/>\r\n<\/p>","protected":false},"excerpt":{"rendered":"<p>In this tutorial you will learn the way to include a custom JS file to Cherry Framework 3  based theme.<\/p>\n","protected":false},"author":53,"featured_media":51804,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1419,789,918,1086,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51703"}],"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\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=51703"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51703\/revisions"}],"predecessor-version":[{"id":82719,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51703\/revisions\/82719"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/51804"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=51703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=51703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=51703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}