How to add JavaScript file to WordPress Website

Question

I was developing a web form that will be used to collect data. I needed to attach it to my WordPress website. I have been successful attaching the HTML and CSS files, so that they can blend with the theme of the website, however, I have been unsuccessful trying to add the JavaScript file. I have followed several guides on how to but I have not been successful. I tried the enqueue_script approach but it didn't work. Here is samples of my code from the functions.php file

<?php
/**
 * Income School functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Income_School
 */

 
add_action( 'wp_enqueue_scripts', 'form_enqueue_style' );

function form_enqueue_script() {
    wp_enqueue_script( 'form-js', get_template_directory_uri() . '/js/form.js',  array(), false, true);
}
 
add_action( 'wp_enqueue_scripts', 'form_enqueue_script' );

In my theme folder where the above functions.php can be found, i also created js folder inside my theme folder where i placed my javascript file. However when I try to load my site, the above script cannot come into the footer. While as for the CSS, I just added it simply while I was adding the HTML code in the block, through the Scripts n Styles plugin. Kindly assist me so I can be able to ensure my JS is working well.

Does this answer your question? Add external javascript file in wordpress — Nico Haase
– Nico Haase, Commented Jan 22, 2021 at 15:47
If that does not help, please share more details, like your debugging attempts. "It didn't work" is pretty broad — Nico Haase
– Nico Haase, Commented Jan 22, 2021 at 15:48
No I have tried it but still the JS file is not being used or imported — Steel8
– Steel8, Commented Jan 22, 2021 at 16:22
I tried to create a child theme that borrows from the parent theme, when I activated it i received the error 'ACF not installed or unavailable. There has been a critical error on the website', so i decoded to just go with the parent theme. And that is how I added the enqueue scripts to the php file, even though the file itself consists of more code that the one I just posted. — Steel8
– Steel8, Commented Jan 22, 2021 at 16:28

Ryan · Accepted Answer · 2021-01-22 23:54:43Z

0

function my_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'my_theme_name_scripts' );

Also make sure the file is under the correct path in your theme.

answered Jan 22, 2021 at 23:54

Ryan

6524 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucas Matheus Santos Cardoso · Accepted Answer · 2021-01-22 16:48:40Z

-1

I have an old PHP app here, that imports js file with an HTML script tag. After this import, I'm able to use the js functions inside other HTML components such as input. It's a simple solution you already tried?

<script language="javascript" type="text/javascript" src="lib/ajax_search.js"></script>

The function searchOrcSuggest() is inside my js file imported with html.

<input name="descricao[<?php echo $row1['codigo']?>]" id="descricao<?php echo $row1['codigo']?>" value="<?php echo $row1['descricao']?>" type="text" class="forms" size="45"
                onkeyup="searchOrcSuggest(this, 'codigoprocedimento<?php echo $row1['codigo']?>', 'particular<?php echo $row1['codigo']?>', 'convenio<?php echo $row1['codigo']?>', 'search<?php echo $row1['codigo']?>', <?php echo $codigo_convenio?>);"
                autocomplete="off" />

Also this app have other manner to pass js functions by an js file named script.js.php, don't ask me why!

And the import of this archive made like:

<script language="javascript" type="text/javascript" src="lib/script.js"></script>

Here is the file if you want to see it link to file

edited Jan 22, 2021 at 16:48

answered Jan 22, 2021 at 16:23

Lucas Matheus Santos Cardoso

393 bronze badges

2 Comments

Nico Haase Over a year ago

That won't work, as the OP is using Wordpress

Steel8 Over a year ago

I have not tried it, The form is entirely HTML tags and no php

Collectives™ on Stack Overflow

How to add JavaScript file to WordPress Website

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related