Tried and failed to add .js script / library

[bongobong]

Hi there,
I’m trying to get some scripts to load;
I’ve added them to john-child/js/ and I’ve added a plugin called “Add to header” and put this code in there:

<link rel=”stylesheet” type=”text/css” href=”http://the-escalator.com/wp-content/themes/joyn-child/monocle/style.scss&#8221; />
<link rel=”stylesheet” type=”text/css” href=”http://the-escalator.com/wp-content/themes/joyn-child/monocle/iscroll-style.css&#8221; />
<script type=”text/javascript” src=”http://the-escalator.com/wp-content/themes/joyn-child/js/script.js”></script&gt;
<script type=”text/javascript” src=”http://the-escalator.com/wp-content/themes/joyn-child/js/iscroll-probe.js”></script&gt;

And then I’ve added css to the theme options and html here:

http://the-escalator.com/2015/10/18/scroller-post-test-2-0/

But it’s still not working.

Any ideas what I’m doing wrong?

[Rui Guerreiro – SUPPORT]

Hi,

This is the correct way to add some scripts in the child theme.

function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_stylesheet_directory_uri() . '/js/script.js',
		array( 'jquery' )
	);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Give it a try.

Also check this article.
http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

-Rui

[bongobong]

Thanks so much Rui.
Would this work?

function my_scripts_method() {
wp_enqueue_script(
‘jscroll-probe.js’,
get_stylesheet_directory_uri() . ‘/js/jscroll-probe.js’,
array( ‘jquery’ )
);
}
 
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
 

[David Martin – Support]

You can conifrm if the script is loading by viewing the source code and search for your script name.

Here are the full WP docs on how to include JS libaries: https://codex.wordpress.org/Function_Reference/wp_enqueue_script.

Please use the child theme example function: https://codex.wordpress.org/Function_Reference/wp_enqueue_script#Load_a_Script_from_a_Child_Theme_without_Dependencies.

– David.

[bongobong]

Thanks folks.

So I’ve read all the materials. Here is what I have in my functions.php file in my child theme. But it doesn’t seem like the libraries are being loaded:
I’ve put the js into
join-child/js/
and the css into
join-child/css/

/* LOAD PARENT THEME STYLES
================================================== */
function joyn_child_enqueue_styles() {
wp_enqueue_style( ‘joyn-parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘joyn-parent-style’, SF_LOCAL_PATH . ‘/css/style.css’ );
wp_enqueue_style( ‘joyn-parent-style’, SF_LOCAL_PATH . ‘/css/style.scss’ );
}

function sf_enqueue_scripts() {
wp_register_script(‘jscroll-probe.js’, SF_LOCAL_PATH . ‘/js/iscroll-probe.js’, ‘jquery’, NULL, TRUE);
wp_register_script(‘script.js’, SF_LOCAL_PATH . ‘/js/script.js’, ‘jquery’, NULL, TRUE);
}
add_action( ‘wp_enqueue_scripts’, ‘joyn_child_enqueue_styles’ );

[Rui Guerreiro – SUPPORT]

the parent resources are loaded by default you don’t have to load them.

When loading resources that are inside the child theme you should use get_stylesheet_directory_uri() to get the child theme path.

-Rui

[bongobong]

Thanks so much.
Learning loads.

But still not working; this is what I have

/* LOAD PARENT THEME STYLES
================================================== */
function joyn_child_enqueue_styles() {
wp_enqueue_style( ‘joyn-parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘style.css’, get_stylesheet_directory_uri() . ‘/css/style.css’ );
wp_enqueue_style( ‘style.scss’, get_stylesheet_directory_uri() . ‘/css/style.scss’ );
}

function sf_enqueue_scripts() {
wp_register_script(‘jscroll-probe.js’, get_stylesheet_directory_uri(). ‘/js/iscroll-probe.js’, ‘jquery’, NULL, TRUE);
wp_register_script(‘script.js’, get_stylesheet_directory_uri() . ‘/js/script.js’, ‘jquery’, NULL, TRUE);
}
add_action( ‘wp_enqueue_scripts’, ‘joyn_child_enqueue_styles’ );

[David Martin – Support]

Looks like you also need to enqueue your JS file? By adding this to the function sf_enqueue_scripts()

wp_enqueue_script('jscroll-probe.js');

Please also check your spelling of the file? iscroll-probe.js vs jscroll-probe.js in your above post.

– David.

[bongobong]

Hi guys,
Well, making progress. But I still believe i’m making errors in the code;
getting an error:
Fatal error: Cannot redeclare sf_admin_scripts() (previously declared in /home3/james948/public_html/the-escalator.com/wp-content/themes/joyn-child/functions.php:308) in /home3/james948/public_html/the-escalator.com/wp-content/themes/joyn/functions.php on line 310

Here is what I have in my child functions.php so far.

function joyn_child_enqueue_styles() {
wp_enqueue_style( ‘joyn-parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘style.css’, get_stylesheet_directory_uri() . ‘/css/style.css’ );
wp_enqueue_style( ‘style.scss’, get_stylesheet_directory_uri() . ‘/css/style.scss’ );
}

function sf_enqueue_scripts() {
wp_register_script(‘jscroll-probe.js’, get_stylesheet_directory_uri(). ‘/js/iscroll-probe.js’, ‘jquery’, NULL, TRUE);
wp_register_script(‘script.js’, get_stylesheet_directory_uri() . ‘/js/script.js’, ‘jquery’, NULL, TRUE);
}
wp_enqueue_script(‘jscroll-probe.js’);
wp_enqueue_script(‘script.js’);

add_action( ‘wp_enqueue_scripts’, ‘joyn_child_enqueue_styles’ );

[Mohammad – SUPPORT]

Hi,
Please change the name of this sf_enqueue_scripts to any other name just like sf_enqueue_scripts_new

Thanks
Mohammad

[bongobong]

Ok. I’ve done that.
Now I have this but it’s still not being loaded.

/* LOAD PARENT THEME STYLES
================================================== */

function joyn_child_enqueue_styles() {
wp_enqueue_style( ‘joyn-parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘style.css’, get_stylesheet_directory_uri() . ‘/css/style.css’ );
wp_enqueue_style( ‘style.scss’, get_stylesheet_directory_uri() . ‘/css/style.scss’ );
}

function sf_enqueue_scripts_dm() {
wp_register_script(‘jscroll-probe.js’, get_stylesheet_directory_uri(). ‘/js/iscroll-probe.js’, ‘jquery’, NULL, TRUE);
wp_register_script(‘script.js’, get_stylesheet_directory_uri() . ‘/js/script.js’, ‘jquery’, NULL, TRUE);
}
wp_enqueue_script(‘jscroll-probe.js’);
wp_enqueue_script(‘script.js’);

add_action( ‘wp_enqueue_scripts’, ‘joyn_child_enqueue_styles’ );

[Mohammad – SUPPORT]

Hi,
Please remove your code and use this code:-

function joyn_child_enqueue_styles() {
wp_enqueue_style( 'joyn-parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'style.css', get_stylesheet_directory_uri() . '/css/style.css' );
wp_enqueue_style( 'style.css', get_stylesheet_directory_uri() . '/css/style.css' );
wp_register_script('jscroll-probe-js', get_stylesheet_directory_uri(). '/js/iscroll-probe.js', 'jquery', NULL, TRUE);
wp_register_script('script-new-js', get_stylesheet_directory_uri() . '/js/script.js', 'jquery', NULL, TRUE);
wp_enqueue_script('jscroll-probe-js');
wp_enqueue_script('script-new-js');
}
add_action( 'wp_enqueue_scripts', 'joyn_child_enqueue_styles' 121 );

Thanks
Mohammad

[bongobong]

Now I’m getting

Parse error: syntax error, unexpected ‘121’ (T_LNUMBER) in /home3/james948/public_html/the-escalator.com/wp-content/themes/joyn-child/functions.php on line 25

which means this line;

“add_action( ‘wp_enqueue_scripts’, ‘joyn_child_enqueue_styles’ 121 );

[bongobong]

Presume it was the 121. Took it out and now seems to be loading!
Was it the 121?

[Rui Guerreiro – SUPPORT]

It’s missing a comma before the 121

Try this one
add_action( 'wp_enqueue_scripts', 'joyn_child_enqueue_styles', 121 );

It’s the priority parameter so when several actions are hooked in the same hook they can be loaded by a sequence defined by the priority.

-Rui