Topic: How to insert and load custom JS

Tagged: x

Author

Posts
March 14, 2017 at 7:35 am #1406304

Johanschack
Participant

Hi!

I was wondering if you can help me with inserting some javascript 🙂

I recieved a file with an index.html file and 2 javascript files the index html says:
<head>
<title>Lån penge</title>
<meta charset=”utf-8″>
<meta http-equiv=’X-UA-Compatible’ content=’IE=edge,chrome=1′>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />
</head>
<body>
<script src=”js/jquery-latest.min.js”></script>
<script src=”js/calculation.js”></script>
</body>

And the the names of the files are:
jquery-latest.min.js
calculation.js

My assumption would be, that i could insert this into a text box:
<script src=”wp-includes/js/jquery-latest.min.js”></script>
<script src=”wp-includes/js/calculation.js”></script>

And insert the two javascript files into the js file in wp-includes file. But nothing appears on the page when i reload.

What am i doing wrong?

Thanks in advance 🙂

March 14, 2017 at 9:04 am #1406407
Rahul
Moderator
Hi there,

Because this requires a template change, I’d advise that you setup a child themehttps://community.theme.co/kb/how-to-setup-child-themes/.

This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.https://community.theme.co/kb/customization-best-practices/

Create a JavaScript file for your custom JS code and then follow the code below, add it into your Child Theme’s functions.php file.
```
function custom_external_js() {
	wp_enqueue_script('your-own-js', get_stylesheet_directory_uri() . '/custom_external.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'add_my_script');
```
make sure to replace this /custom_external.js with the correct path/file-name.

Hope that’s clear.
Author

Posts