{"id":5697,"date":"2018-02-06T19:40:12","date_gmt":"2018-02-06T10:40:12","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=5697"},"modified":"2023-01-25T12:42:27","modified_gmt":"2023-01-25T12:42:27","slug":"add-custom-js-or-php-script","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/","title":{"rendered":"Add Custom JS or PHP Script"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-36l7hd-70781cbba3391a2d8b91410901ff0ffe\">\n#top .av-special-heading.av-36l7hd-70781cbba3391a2d8b91410901ff0ffe{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-36l7hd-70781cbba3391a2d8b91410901ff0ffe .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-36l7hd-70781cbba3391a2d8b91410901ff0ffe .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-36l7hd-70781cbba3391a2d8b91410901ff0ffe av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >How to add Custom JS or PHP Script?<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-17myh6p-297551b6a57eccb0a31d156507a27ca4 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-16puzo1-8ac8e55a90df3358333db22764d6f3d3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1445krl-b16ee1cf819a935555745adacffff6e4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>jQuery is a powerful tool when it comes to adding custom modifications to your theme.\u00a0 There are a few ways to add your custom js to your WordPress theme.<\/p>\n<\/div><\/section>\n<div  class='hr av-3y2shd-8f73f7d68caf5713a2746003ae0cbd2e hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-10vhwht-d0335699229c36f4a0cd03da60f5bafc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Google Analytics Tracking Code<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3me9ld-5cbb949170b4508d7739aa20a777a563 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you have a quick function or a script to add, the <strong>Google Analytics Tracking Code <\/strong>section\u00a0can be used. We recommend using this section for Google\u00a0tracking code, even though it can handle\u00a0other scripts. It can be accessed from Enfold &gt; Google Services &gt;\u00a0Google Analytics Tracking Code<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7352\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Tracking.png\" alt=\"\" width=\"1030\" height=\"580\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Tracking.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Tracking-300x169.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Tracking-768x432.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Tracking-705x397.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Tracking-450x253.png 450w\" sizes=\"auto, (max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-y3mnhd-b473cbc5f283f1a6a8f3a69c2221e3a5 hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wvifk1-6f38a693ab60ebc6606a62b2ef068ac0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Using functions.php<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-300kyp-3dc81d9c8339974a611ea43efdac0594 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Functions.php is where we will add most of the js script. We recommend installing the child theme and use the functions.php to add your custom script.<\/p>\n<ol>\n<li>Login to WP dashboard and select\u00a0<strong>Appearance &gt; Editor<\/strong>.<\/li>\n<li>Select the correct theme or child theme from the select theme option on top.<\/li>\n<li>After selecting the correct theme, you may notice a lot more files depending on the theme you have.\u00a0 Browse the file &#8220;Theme Functions&#8221; or &#8220;functions.php&#8221;. ( You\u00a0can also use\u00a0an FTP client and navigate to wp-content\\themes\\enfold-child\\functions.php )<\/li>\n<li>Add the code to the bottom of the functions.php file as shown in the below example.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9096\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area.png\" alt=\"\" width=\"1164\" height=\"711\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area.png 1164w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-300x183.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-768x469.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-1030x629.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-705x431.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/05\/Create-widget-area-600x366.png 600w\" sizes=\"auto, (max-width: 1164px) 100vw, 1164px\" \/><\/p>\n<p>It is always recommended that you test your script on a local host or a staging server and then upload to a live site. If you\u00a0upload a script which has a bug or that already share the same name as the other scripts your site may crash and you may not have access to the website. There is nothing to worry if that happens simply access <strong>functions.php<\/strong> file via FTP client in\u00a0<strong>wp-content &gt;\u00a0themes &gt; enfold-child &gt; functions.php<\/strong>\u00a0 and remove the code that was added previously to fix the crash \ud83d\ude42<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-tr6skh-250980ab87e7bb91bcb07fa8f1caa87a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>NOTE<\/strong>:<\/p>\n<ul>\n<li>Each function should have a unique name.<\/li>\n<li>While adding custom jQuery functions to WordPress do not use the $ sign instead use the word jQuery.<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-rk4ffl-5de9b889f751752c965a938c400aedfd hr-default  avia-builder-el-11  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-p5gsc1-47d33ccd1534e4d713bcb8fa367ba2af '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to add a custom function?<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-p5gsc1-47d33ccd1534e4d713bcb8fa367ba2af '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The below function can be used to add a simple jQuery script to your child theme function.php file.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-rk4ffl-5de9b889f751752c965a938c400aedfd hr-default  avia-builder-el-15  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-p5gsc1-aa1bcb54e8d70cdb95f3443a56206056 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add a script to head section<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-ofdsbl-d0d2c6055235afc333f3cf2a74f45ab5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You can choose to add the custom script in the head section by adding the <strong>wp_head<\/strong> as the required action.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-l3fl2p-cec9d59e25805dc28afc9ed4d3f5061d hr-default  avia-builder-el-19  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-javzdt-aac1e34c06f1347790b642c83efc3222 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add a script to footer section<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-hnzcsh-5fcf7f5a06941b8be110450899b8271b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>We can also add a custom\u00a0script to the footer section by adding <strong>wp_footer<\/strong> as the required action.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-defg5t-fa25726c0b5d7921dc6fdc8554fa1b9f hr-default  avia-builder-el-23  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-cpf8r5-4f91d8c02c37a9a46808f57ef9823942 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to add a custom js files<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-avwhmp-cf3fbea5aa45b3d590f99983cedfbbe9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you would like to create a my_custom.js file and add it to your theme the js files, it should be enqueued. In this tutorial, we will take a look at creating and adding a my_custom.js file to the child theme, the proper way.<\/p>\n<p>Creating the\u00a0<strong>my_custom.js <\/strong>file which includes all the custom scripts, but it will not work on the frontend unless your custom functions are used in jQuery strict mode. Below is an example\u00a0of how my_custom.js should look:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-ti5f5-ed3a6f152a37aa01724b1f96c9c718fd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Before adding\u00a0our <strong>my_custom.js<\/strong> file to the child theme let&#8217;s add a simple function in\u00a0<strong>my_custom.js<\/strong> to hide all paragraphs:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-4b9btd-1cf835b24947a672ece022335c0c0abe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Once you test your function and are happy with the results, please go ahead and save the my_custom.js file in the &#8220;js&#8221; folder inside the child theme. The path to my_custom.js file should look &#8220;wp-content\/themes\/enfold-child\/js\/my_custom.js&#8221;.<\/p>\n<p>Finally, to enqueue the my_custom.js file we will add the code below in the child theme functions.php\u00a0file.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-defg5t-fa25726c0b5d7921dc6fdc8554fa1b9f hr-default  avia-builder-el-31  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-cpf8r5-5a2820143ab7d3ab1047f7166d4f70e2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Load shortcode.js from child theme folder<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4b9btd-1cf835b24947a672ece022335c0c0abe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Some modifications compel you to edit the\u00a0shortcodes.js file. In such cases it is best to\u00a0load the shortcodes.js file from child theme folder to avoid losing the modification made to the shortcodes.js file in the main theme folder in wp-content\/themes\/enfold during the theme updates.<\/p>\n<p>To load the shortcodes.js file from child theme folder, copy the shortcodes.js file from wp-content\/themes\/enfold\/js\/shortcodes.js to\u00a0wp-content\/themes\/enfold-child\/js\/shortcodes.js and add the below code to functions.php\u00a0file to dequeue the main theme shortcode.js and enqueue\u00a0the child theme shortcode.js file.<\/p>\n<\/div><\/section>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,12],"tags":[],"class_list":["post-5697","post","type-post","status-publish","format-standard","hentry","category-documentation","category-explore","documentation","explore"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=5697"}],"version-history":[{"count":15,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5697\/revisions"}],"predecessor-version":[{"id":13519,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5697\/revisions\/13519"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=5697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=5697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=5697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}