How to enqueue javascript in my theme in wordpress that i created?

Question

I converted a html,css,js template to a wordpress theme. To enqueue my css it worked correctly, i just add the function in functions.php but to enqueue javascript it doesn't work i tryed a lot of modifications but nothing works Here is my function.php

<?php


function load_stylesheets()
{
 
 wp_register_style('normal',get_template_directory_uri() . '/css/normalize.css',  array(), 1, 'all');
 wp_enqueue_style('normal');
 
 
 
 wp_register_style('demonstration',get_template_directory_uri() . '/css/demo.css',  array(), 1, 'all');
 wp_enqueue_style('demonstration');

}
add_action('wp_enqueue_scripts','load_stylesheets');





function addjs()
{
  
 
 wp_register_script('anime', get_template_directory_uri() . '/js/anime.min.js', array(), 1,1, 1);
 wp_enqueue_script('anime');
 
 
 wp_register_script('imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(), 1,1, 1);
 wp_enqueue_script('imagesload');
 
 
 wp_register_script('main', get_template_directory_uri() . '/js/main.js', array(), 1,1, 1);
 wp_enqueue_script('main');
 

  
}

You need to `add_action('wp_enqueue_scripts', 'addjs');` too — Vinay, Jan 17 '20 at 01:54
I already do it but it changed nothing, and in many cases i saw in other posts that they don't do it. — Driss Elk, Jan 17 '20 at 01:57

score 1 · Answer 1 · answered Jan 17 '20 at 05:28

Please Try this

add_action('wp_footer','addjs');

function addjs() {

    wp_register_script('anime', get_template_directory_uri() . '/js/anime.min.js', array ('jquery'),'',true);

    wp_register_script('imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array ('jquery'),'',true);


    wp_register_script('main', get_template_directory_uri() . '/js/main.js', array ('jquery'),'',true);

}

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

The short-and-sweet of it is that you're not calling your addjs function anywhere. If you added:

add_action( 'wp_enqueue_scripts', 'addjs' );

Then it should work. (Note: anyone that the above doesn't work for, look at the edit below)

However, there's a couple things you should note:

Make sure your indenting/spacing is consistent, and you don't have extraneous whitespace after lines. Clean code is key!
You don't need to add JS and CSS files separately, they can both be handled in the same add_action function callback.
Unless you're doing some really fancy stuff (enqueueing only while a shortcode is found on a page, etc.), wp_enqueue_{script/style} will take care of the wp_register_{script/style} function for you. In most cases you can use enqueue them instead of registering and then enqueueing them.
Take a look at the documentation and make sure your arguments are the same as the ones the function accepts. It will prevent warnings and errors in more extreme cases.

Here's a cleaned up example for you:

add_action( 'wp_enqueue_scripts', 'enqueue_theme_assets' );
function enqueue_theme_assets(){
    // Styles
    wp_enqueue_style( 'normal', get_template_directory_uri() . '/css/normalize.css', array(), '1.0' );
    wp_enqueue_style( 'demonstration', get_template_directory_uri() . '/css/demo.css', array(), '1.0');

    // Scripts
    wp_enqueue_script( 'anime', get_template_directory_uri() . '/js/anime.min.js', array(), '1.0', true );
    wp_enqueue_script( 'imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(),'1.0', true );
    wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}

EDIT:

I just saw your comment that add_action( 'wp_enqueue_scripts', 'addjs' ); wasn't working. Take a look at the wp_enqueue_script() docs. You'll note in the #Usage section, that it properly enqueuing scripts on the wp_enqueue_scripts hook relies on the wp_footer() and wp_head() functions being utilized in your theme, so **make sure you have wp_footer(); called in your theme, especially since you have the $in_footer argument set to true.

Thank u for the organized code, i will try this and take a look to this documentation. — Driss Elk, Jan 17 '20 at 02:05

score 0 · Answer 3 · answered Jan 17 '20 at 15:13

wp_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.

So You have to add scripts and styles inside one function or you can add one more wordpress action with your existing code.

add_action( 'wp_enqueue_scripts', 'addjs' );

How to enqueue javascript in my theme in wordpress that i created?

3 Answers3

EDIT: