I have an interactive tool that I want to add to my site. This tool requires a javascript file (example.js) which have already added to the theme via FTP. What do I need to do in order to make that functional? I’ve read some documentation that talks about “enqueuing” but I have no idea what that is or if it’s even relevant in my case. I’ve also attempted to use some plugins to “activate” the .js, to no avail. What do you recommend? I do not have a URL to post because I only have a test page that hasn’t been published, and it doesn’t work anyway, since the .js file isn’t doing anything.
Ideas?
Hi Chris
\you can use a plugin like this to add your script
https://wordpress.org/plugins/header-and-footer-scripts/
Just be sure that the script is inserted to the correct place on the page. This would be the header by default but some scripts require that they be placed in the footer. If that does not work then you would need to enque the script through the functions.php of your child theme.
eg.
/** * Add my scripts to the front end */ function add_my_scripts() { wp_register_script( 'script-name', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.0.0', true ); wp_enqueue_script('script-name'); } add_action( 'wp_enqueue_scripts', 'add_my_scripts' );The last parameter at the end of the wp_register_script line designates where the script is inserted into the page. ‘true’ places it in the footer, ‘false’ places it in the header.
The script would then have to be placed in the js directory of your child theme. This is the best way of avoiding issues caused by updates to wordpress or your theme.
If you do not have a child theme here is the default child-theme for vantage
https://siteorigin.com/wp-content/uploads/2015/01/vantage-child-vanilla-enqueue.zip
It already has an enqueue in the functions.php. Just upload the vantage-child directory to your templates directory and activate it through appearance->themes. You will have to re-add menu positions and some widgets once done.
Hope this helps
Magus
Magus,
Thank you for the response. I do have a child theme that Andrew created for me a few months ago to accomplish a very specific task. The rest of the functions are inherited from the parent functions.php file. Can I modify the child functions.php to add just enqueue, without affecting anything else? Also, I already have the plugin that you recommended and had already tried adding the js there without success. I think it’s going to come down to enqueuing. I really appreciate your help with this.
Hi Chris
Yes, you can just add the enqueue to the functions.php that you have using the built in editor under Appearance.
Just remember that you have to place the script file inside a js directory in your child theme folder.
Magus
Magus,
One final question (hopefully)… the two versions of the enqueue code look vastly different (i.e., 1) the version that you included in the code snippet within your first reply above and then there is 2) the version contained in the zipped child-theme file). I’m not sure which version I should use. The code you provided seems much more explicit, wherein the name of the .js file can be specified; the code in the zipped file seems more generic (perhaps it enqueues all javascript?). I hope this question makes sense (I think I’m running on fumes after a 20 hour day and still going at 4 am CDT). Anyway, I really appreciate your help.
Hi Chris
The enqueue in the zipped file is for enqueueing style sheets and should be left as they are. They are the new way that wordpress prefers to attach them rather than using the @import method.
You should be fine using the functions.php from the child-theme you are already using, just add the code I supplied to it, changing options where required and it should all work.
Magus
Thanks Magus that’s a fantastic reply.
Chris, please let us know if we can help out further.