Wordpress - How to correctly add Javascript in functions.php
Your $scr
in your wp_register_script()
function is wrong. Given that your functions.php is inside your plugin, and your removeArrows.js is in the root of your plugin, your $scr
should look like this
plugins_url( '/removeArrows.js' , __FILE__ )
Another point of note, it is always good practice to load your scripts and styles last. This will ensure that it will not get overriden by other scripts and styles. To do this, just add a very low priority (very high number) to your priority parameter ($priority
) of add_action
.
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 );
And always load/enqueue scripts and styles via the wp_enqueue_scripts
action hook, as this is the proper hook to use. Do not load scripts and styles directly to wp_head
or wp_footer
EDIT
For themes, as you've indicated that you now moved everything to your theme, your $scr
would change to this
get_template_directory_uri() . '/removeArrows.js'
for parent themes and this
get_stylesheet_directory_uri() . '/removeArrows.js'
for child themes. Your complete code should look like this
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 );
I would not add another external js file, its just an extra and unnecessary resource to fetch and that is something we want to cut down on in terms of page loading times.
I would add this jQuery snippet in your websites head using the wp_head
hook. You would paste the following in your theme or plugins functions file. I have also made sure jQuery is in no-conflict mode as you can see below.
add_action('wp_head','woocommerce_js');
function woocommerce_js()
{ // break out of php ?>
jQuery(document).ready(function($) {
$(".woocommerce-cart").html(function(i, val) {
return val.replace(" →", "");
});
$(".woocommerce-cart").html(function(i, val) {
return val.replace("← ", "");
});
});
<?php } // break back into php
Once you have done this and refreshed your page, check the page source to make sure this jQuery snippet is in fact being loaded into your page. If it is then it should work unless their is something off in the actual jQuery snippet you are using.
As the answer is accepted already so, I just want to say there's another way to enqueue javascript code in footer which I have done many times.
in functions.php file:
function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
$(".woocommerce-cart").html(function(i, val) {
return val.replace(" →", "");
});
$(".woocommerce-cart").html(function(i, val) {
return val.replace("← ", "");
});
});
</script>
<?php
}
add_action( 'wp_footer', 'load_script_to_remove_arrow' );
you can load this script to particular page template only by using condition
if( is_page_template( 'page-template.php' ) ):
//put above code (or just add_action part) inside this condition to load file only if the condition is true
endif;
if the page-template.php is in directory ( say templates directory in your theme's root dir ) you can write like:
is_page_template( 'templates/page-template.php' );