Divi theme including javascript

Question

I have tested the html and the css and the js independently of wordpress and all works fine. So trying to integrate it into wordpress. I have added the html code as a code module. I have created a folder in the main theme dir (not the child) called 'js' and have included the following into the functions.php

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' ); 

function my_enqueue_assets() { 

    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); 
    wp_register_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', '', null,''  );
    wp_register_script( 'index', get_template_directory_uri() . '/js/index.js', '', null,''  );
    wp_register_script( 'config', get_template_directory_uri() . '/js/config.js', '', null,''  );

    wp_register_script( 'jquery.colorbox-min', get_template_directory_uri() . '/js/jquery.colorbox-min.js', '', null,''  );
    wp_enqueue_script( 'jquery.colorbox-min' );
    wp_enqueue_script( 'portfolio' );
    wp_enqueue_script( 'index' );
    wp_enqueue_script( 'config' );
}

I am not sure if this code is correct but hope that someone can give me some advice on why it doesn't work.

Answer 1

You might have to use get_stylesheet_directory_uri() instead of get_template_directory_uri() when you're referencing files in a child theme.

On a fresh install, I created and activated a child theme of twentyfifteen called child and run the following codes:

echo get_stylesheet_directory_uri(); 
# Output: http://localhost/test1/wp-content/themes/child

echo get_template_directory_uri(); 
# Output: http://localhost/test1/wp-content/themes/twentyfifteen

Also, If you have tested the JS independently of WordPress, you should know that WordPress loads jQuery in the no conflict mode, that is, you should use jQuery instead of $.

So:

$(document).ready(function(){
    // JS code
});

Becomes:

jQuery(document).ready(function($){
    // JS code
});