{"id":426,"date":"2017-12-13T10:45:21","date_gmt":"2017-12-13T10:45:21","guid":{"rendered":"http:\/\/rifetheme.com\/docs\/docs\/installation-updating\/installing-the-child-theme\/overwriting-javascript-files\/"},"modified":"2018-01-30T15:48:38","modified_gmt":"2018-01-30T15:48:38","slug":"overwriting-javascript-files","status":"publish","type":"docs","link":"https:\/\/rifetheme.com\/apollo13-framework\/docs\/modifications-of-theme\/overwriting-javascript-files\/","title":{"rendered":"Overwriting JavaScript Files"},"content":{"rendered":"<p>If you are using\u00a0<a href=\"http:\/\/rifetheme.com\/apollo13-framework\/docs\/installation-updating\/installing-child-theme\/\">child theme<\/a>, and you find yourself in need to overwrite some JavaScript files from parent theme, then you will soon find out that it is not as easy, as with other .php templates, as child themes automatic use of files added to its directory\u00a0<strong>only concerns .php templates<\/strong>.<\/p>\n<p>However I will now show you the way how you can do it pretty easily without breaking, dependencies or localization of these files.<\/p>\n<p>So lets say you want to change file\u00a0<code>script.js<\/code>\u00a0and make sure your changed version will be loaded independent what changes will occur in theme updates.<\/p>\n<p>Lets start with coping this file (<code>script.js<\/code>) from main theme to child theme Best would be to put in same location as in main theme so lets put in under <code>js\/script.js<\/code>. So after this operation you should have <code>themename-child-theme\\js\\script.js<\/code><br \/>\nNow it is time you make your changes in these new file, or do it later, just be sure to now operate on this file.<\/p>\n<p>Now we have to rewrite path to original file in parent theme. To do it copy below code to\u00a0<strong>functions.php<\/strong>\u00a0in child theme<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">function child_theme_enqueue_scripts() {\r\n    global $wp_scripts;\r\n    $wp_scripts-&gt;registered[ 'apollo13framework-script' ]-&gt;src = get_stylesheet_directory_uri() . '\/js\/script.js';\r\n}\r\n\/\/register this after parent theme files, that is why we have priority set to 27\r\nadd_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts', 27 );<\/code><\/pre>\n<p>In above code you want to change two things(if you wish to overwrite different files). These are:<\/p>\n<ul>\n<li><code>apollo13framework-script<\/code>\u00a0&#8211; it is handle for original file in parent theme<\/li>\n<li><code>\/js\/script.js<\/code>\u00a0&#8211; it is path to your new file in child theme<\/li>\n<\/ul>\n<p>Handles for JavaScript files can be found in main theme in\u00a0<code>advance\\head_scripts_styles.php<\/code>\u00a0in function\u00a0<code>a13_theme_scripts()<\/code>. They are listed as first argument for calls of\u00a0<code>wp_enqueue_script()<\/code>\u00a0and\u00a0<code>wp_register_script()<\/code>\u00a0like in below example.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">wp_enqueue_script('apollo13framework-scripts', A13_TPL_JS . '\/script.js', $script_depends, A13_THEME_VER, true );<\/code><\/pre>\n<p>Anyway, now your changed JavaScript file should be loaded instead of original one. Nice one \ud83d\ude42<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8354,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_tag":[],"class_list":["post-426","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/comments?post=426"}],"version-history":[{"count":2,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/426\/revisions"}],"predecessor-version":[{"id":8913,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/426\/revisions\/8913"}],"up":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8354"}],"prev":[{"title":"Changing Theme Functions","link":"https:\/\/rifetheme.com\/apollo13-framework\/docs\/modifications-of-theme\/changing-theme-functions\/","href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/425"}],"wp:attachment":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/media?parent=426"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/doc_tag?post=426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}