This is something I just can’t figure out. I know I can add the javascript directly into the head, which I’ve done with some small scripts. For longer scripts, I’ve tried adding .js directly onto the server via FTP/cpanel, but it doesn’t work in the same way it did when I was running a simple html site. I know that is to be expected because of the enqueue stuff, but I don’t understand it. Can you give me some suggestions/guidance? I would be very appreciative. I don’t have any specific pages to show or any examples. I will have a lot of javascript to add in order to create the tools that I need to create for my website. Do I upload the script files into a .js folder and enqueue them from the functions.php?
Thanks in advance. :)
Hi Chris
Thanks for reaching out.
Please remember that the “vantage” theme folder gets overwritten theme updates so it’s not update safe to edit any theme files, including header.php, outside of a child theme.
https://codex.wordpress.org/Child_Themes
Easy Way
A really simple way of including scripts in your head would be to use the following plugin:
https://wordpress.org/plugins/header-and-footer-scripts/
Add a “js” folder to your WordPress root and add your scripts there. Use Header and Footer scripts to add your script links to the head.
Harder Way
Here is a vanilla Vantage child theme to start with:
https://siteorigin.com/wp-content/uploads/2015/03/vantage-child-starter.zip
And here is how to enqueue a script:
https://codex.wordpress.org/Function_Reference/wp_enqueue_script
Scripts stored and enqueued from the child theme are upgrade safe.
Hope that helps.
Hi Chris
You are correct in your assumptions. Upload the .js files to a folder on your host.
Use the following in your child-theme functions.php so it does not get overwritten during any updates.
/** * enqueue my custom scripts */function my_custom_scripts() { wp_enqueue_script( 'script-name', 'path_to_script', array(), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Just replace path_to_script with the full path to your script inside inverted comma’s. You can repeat this line within the same function for each of your scripts.
Let us know how you get on
Magus
thank you! I already use the header/footer scripts plugin, all of this should be pretty straight forward.
Quick question RE: the child theme functions. php. Does it matter where I add the enqueue function relative to others in functions.php?
Glad to hear you’re making progress Chris. No, it shouldn’t matter where in your child theme functions file you enqueue your scripts.
Hi Chris
It does not really make any difference, although for neatness I always tend to group them at the top of the functions file.
Hope this helps
Magus