How can I link a JS script to my header file?

Question

I want to add a JS script with jQuery to the header file in Wordpress. It's function is to darken the background of an element representing a page everytime someone clicks on it.

I've tried adding it with plugins and via functions.php file. Neither way worked. I inserted a code into functions.php on my child theme which caused my page to not work at all, even after removing the code, so I had to recover the site with a backup. After that I added a fuction with wp_enqueue_script which didn't work either. Luckily after removing the code my site worked again. I didn't add it via header.php file itself because I read that it might cause problems for the website.

So my question is: Is there any way to link a JS script to header.php? Maybe without using functions.php?

Edit: Added the code used for functions.php

function my_theme_scripts_function() {

wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/js/myscript.js');

}

add_action('wp_enqueue_scripts','my_theme_scripts_function');

I replaced get_template_directory_uri() with get_stylesheet_directory_uri() since I'm adding this to a child theme. I got it from this tutorial: https://www.collectiveray.com/wp/tips/add-javascript-to-wordpress

You are suppose to do it in functions.php. Thats the wordpress standard way of doing it. — Deckerz
– Deckerz, Commented Jun 12, 2019 at 7:53
Using functions.php is the correct way. You'd have a more useful response to this question if you showed us the PHP code you tried to use that didn't work so that we can help you debug it. — Rory McCrossan
– Rory McCrossan, Commented Jun 12, 2019 at 7:55
will the added code not disappear after an update if writing it directly in functions.php like other changes to a parent theme? — Rin
– Rin, Commented Jun 12, 2019 at 7:56
its better you look into wordpress enqueue codex before posting the query. — charan kumar
– charan kumar, Commented Jun 12, 2019 at 10:32

hellheim · Accepted Answer · 2019-06-12 08:53:25Z

1

You should use functions.php file of your child theme to prevent an update overwriting your changes.

Answering your question, wp_enqueue_script - look at the 5th argument $in_footer, it must be set to true, thus your script will be loaded in header.

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

answered Jun 12, 2019 at 8:53

hellheim

713 bronze badges

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

6 Comments

Rin Over a year ago

I added and set it to true, but I got the same "The site is experiencing technical difficulties." error like I'm getting when inserting other code into functions.php. Thank you though

hellheim Over a year ago

Please check your website configuration, wp-config.php file and /or contact hosting support, because I think there is something else involved here.

Rin Over a year ago

I have no host, this is a test website I made. What should I check wp-config.php for?

hellheim Over a year ago

Could you try and disable plugins one by one and check if the error still persist? What version of wordpress are you using? What parent theme are you using?

Rin Over a year ago

The only plugin installed is classic editor. The error is still there. I also have the latest version (5.2.1) and the parent theme is twenty twelve.

|

Collectives™ on Stack Overflow

How can I link a JS script to my header file?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related