Copy/paste the code below into your child theme’s functions.php file. Then copy and paste your Javascript code between the script tags. Then save the functions.php file. If you want more details and step-by-step guidance, watch the video above.
This specific code block has wp_head as the WordPress hook. That means the Javascript code in this code block will be inserted into the <head> section of your WordPress site.
add_action( 'wp_head', 'my_javascript_code' );
function my_javascript_code() {
// YOUR JAVASCRIPT CODE GOES BELOW
?>
<script type="text/javascript">.....</script>
<?php
}The code block below is almost exactly the same as the one above. The only difference is wp_footer in the add_action. This causes the Javascript to be added right before the closing </body> tag.
add_action( 'wp_footer', 'my_javascript_code' );
function my_javascript_code() {
// YOUR JAVASCRIPT CODE GOES BELOW
?>
<script type="text/javascript">.....</script>
<?php
}There are other WordPress hooks besides wp_head and wp_footer. Learn more here.
Here’s another variation. This one allows you to put the code in specific page or pages by defining the ID of those pages.
All you do is replace the ID with the page ID of the page you want to include the script on.
add_action( 'wp_head', 'my_javascript_code' );
function my_javascript_code() {
if( is_page( ID ) ) {
// YOUR JAVASCRIPT CODE GOES BELOW
?>
<script type="text/javascript">.....</script>
<?php
}
}You can add multiple page IDs by separating them with two ‘pipe’ characters. Each time you want to add a new page ID just add || first and then follow it with the page ID.
add_action( 'wp_footer', 'my_javascript_code' );
function my_javascript_code() {
if( is_page( ID1 || ID2 || ID3 ) ) {
// YOUR JAVASCRIPT CODE GOES BELOW
?>
<script type="text/javascript">.....</script>
<?php
}
}You can select pages in other ways besides IDs. Here’s a detailed help page on how to do that.
You can also use other conditional tags besides is_page. You can use is_home to insert the code only on the homepage. You can use is_admin to insert the code only on admin pages. There are lots of options explained in this post.
Lastly, you can add a link to a Javascript in your code instead of script itself. This is useful for when you want to add lots of different Javascript and you want to keep your functions file clean and organized. Or if the Javascript your adding is very large.
add_action('wp_enqueue_scripts', 'load_js_assets');
function load_js_assets() {
if( is_page( ID ) ) {
wp_enqueue_script('my-js', 'PATH TO JS FILE', array('jquery'), '', false);
}
}You will have to replace PATH TO JS FILE with the relative or absolute URL to your Javascript or jQuery file.
The false in the wp_enqueue_script function means that the script will be included in the header of the site. If you want the script added to the footer change the false to true.
Responses