Adding scripts.php and .js files to X Child theme

Support
#1

Hello,

I have a template for a page at http://memorializeme.flywheelsites.com/memorials/

This pulls information from a secure webapp to populate the page. In addition to the template-memorials.php page, the script.php page has been modified to call the two .js files that populate the page.

    if(is_page_template ('template-memorials.php')) {
   wp_register_script( 'x-custom-script', X_TEMPLATE_URL . '/framework/js/dist/site/customscript.js', array( 'jquery' ), X_VERSION, true );
  wp_enqueue_script( 'x-custom-script' );
    wp_register_script( 'x-customscroll-script', X_TEMPLATE_URL . '/framework/js/dist/site/jquery.mCustomScrollbar.js', array( 'jquery' ), X_VERSION, true );
  wp_enqueue_script( 'x-customscroll-script' );
}

They are located:
/framework/functions/global/enqueue/scripts.php
/framework/js/dist/site/customscript.js
/framework/js/dist/site/jquery.mCustomScrollbar.js

I put those files in the same directory structure in the child theme but it doesn’t work and the memorials template page is blank.

Is it possible to have those files work in a child theme or do I need to load the .js files a different way?

Thanks for your help,
Don

#2

Hi @zenzino,

Thanks for writing in.

You could follow this thread below on how to add custom script in your setup.

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hi @nico,

Thanks for the reply.

I saw that thread but my goal seemed pretty different. Rather than calling an external script for a sitewide chat, I have two internal scripts I want loaded for a specific template page.

I’m not sure where to put those .js files. Can I use the code from the ‘scripts.php’ file in the ‘functions.php’ file instead?

Thanks,
Don

#4

Hi Don,

Please put this code under functions.php file locates in your child theme:

add_action( 'wp_enqueue_scripts', 'x_add_custom_js' );
function x_add_custom_js(){
	if(is_page_template ('template-memorials.php')) {
		wp_register_script( 'x-customscroll-script', get_stylesheet_directory_uri() . '/js/jquery.mCustomScrollbar.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'x-customscroll-script' );
		wp_register_script( 'x-custom-script', get_stylesheet_directory_uri() . '/js/customscript.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'x-custom-script' );
	}	
}

Also copy the Javascript file under this directory as well: x-child/js/.

Let us know how it goes!

1 Like
#5

Hey @thai,

That worked perfectly. You guys are the best!

The support and solutions I consistently get from you all is the main reason X and Pro are the only themes I use anymore for all my website projects.

Thanks,
Don

#6

You’re most welcome! Glad we could always help :wink:

#7

Hey @thai,

On a related issue, I realized that there is also a custom css file that needs to be called up when the template-memorials.php page is used. Basing on the solution you provided for the scripts, I put the css file in x-child/css/ and then added this code to the functions.php:

add_action( 'wp_enqueue_styles', 'x_enqueue_site_styles' );
function x_enqueue_site_styles() {
	if(is_page_template ('template-memorials.php')) {
  	    wp_enqueue_style( 'mCustomScrollbar', X_TEMPLATE_URL . '/css/jquery.mCustomScrollbar.css', NULL, X_VERSION, 'all' );
  	}
}

It didn’t work.

What am I missing?

Thanks,
Don

#8

Hi Don,

wp_enqueue_scripts is the proper hook to use when enqueuing items that are meant to appear on the front end including css and js files and not wp_enqueue_styles.

So if you need to load a CSS file, you can update the previous code to:

add_action( 'wp_enqueue_scripts', 'x_add_custom_js' );

function x_add_custom_js() {
	if(is_page_template ('template-memorials.php')) {
		wp_register_script( 'x-customscroll-script', get_stylesheet_directory_uri() . '/js/jquery.mCustomScrollbar.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'x-customscroll-script' );
		wp_register_script( 'x-custom-script', get_stylesheet_directory_uri() . '/js/customscript.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'x-custom-script' );

		wp_enqueue_style( 'mCustomScrollbar', X_TEMPLATE_URL . '/css/jquery.mCustomScrollbar.css', NULL, X_VERSION, 'all' );
	}	
}

But please note that the following line: X_TEMPLATE_URL . '/css/jquery.mCustomScrollbar.css' points to http://yourdomain.com/wp-content/themes/x/css/jquery.mCustomScrollbar.css so if your file is in the child theme’s css directory, then you should use:

wp_enqueue_style( 'mCustomScrollbar', get_stylesheet_directory_uri() . '/css/jquery.mCustomScrollbar.css', NULL, X_VERSION, 'all' );

Hope this helps.

#9

@Jade

Thank you so much for the correction. It worked perfectly.

You all ROCK!

1 Like
#10