[John MParticipant]

Greetings,

I have some code for an HTML form that I would like to display on its own page (integrity lite child theme), and I have a sprinkling of java I would like to incorporate that toggles visibility of some fields depending on what is selected.

My question is, where is the best place to put the .js file on my site, and what is the best way to call it for just that page? Or, is this even possible? I wasn’t able to find a similar issue in the forums, and have pretty much exhausted my limited knowledge on this matter.

Also, I apologize in advance, but I’m at work and can’t link up access to the back end until I get home in a few hours. I was hoping this may be a simple problem to solve (something like, why didn’t you just read this KB article dummy!?) and wouldn’t need to give access to the site. However, as mentioned I will get these credentials in order hopefully by the time someone replies.

Thanks in advance!

[John MParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Create a JavaScript file for your custom JS code and then follow the code below, add it into your Child Theme’s functions.php file.

function custom_external_js() {
	wp_enqueue_script('your-own-js', get_stylesheet_directory_uri() . '/custom_external.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'add_my_script');

make sure to replace this /custom_external.js with the correct path/file-name.

Hope that’s clear.

[John MParticipant]

Hello,

Thanks for the info. I already have a child them installed and a .js file uploaded and now added this bit of code to the child themes functions.php. Now all that’s left is to figure out how to call it on the page I want. Was that part omitted in your response, or am I just blind?

Regards…

[ZeshanMember]

Hi John,

It depends upon the page you want to insert the JS script on, you could use a unique body CSS class or WordPress conditional tags in the above provided PHP script to insert the script to a specific page.

Review this article to find the post ID: https://theme.co/x/member/kb/how-to-locate-post-ids/ (the same process is to find a page ID, simply go to Pages > All Pages instead).

For example, if you want to show a script to your custom page that is having an ID of 123, you can use following PHP code in your child theme’s functions.php file:

add_action( 'wp_footer', 'custom_page_script', 10 );

function custom_page_script(){
   if ( is_page(123) ) {
      echo 'add your script here';
   }
}

You can use different conditional tag instead of is_page() depends upon the page you want to target. You can also use the page ID body CSS class .page-id-123 to target the specific page in your JS script, e.g.,

jQuery(document).ready(function($) {
   $('.page-id-123 .your-element').yourFunction();
});

You can review the reference articles on finding the page ID and the conditional tags. If you require more in depth details, you may wish to consult a developer to assist you with this.

Thanks!

[John MParticipant]

Hello,

Thanks for the details, and sorry to be a bother. The only thing I’m caught up on here is the echo line in your first example.

echo 'add your script here';

I currently have my script located with the other theme scripts in wp-includes/js and I’m not quite sure how much of this path is needed for the ‘add you script here’ portion. Or does this just reference the file name alone? Also, do the ‘custom_page_script’ references need changed to whatever file I’m using, or is this just the function name? Sorry for being a PHP tard!

My .js file is named form-scripts.js and the full path to it is: root/wp-includes/js/form-scripts.js

Thanks in advance for your patience…

[ZeshanMember]

Hi John,

Thank you for posting in!

While the support for 3rd party plugins or scripts is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Basically, you need to use the WordPress conditional tags (http://codex.wordpress.org/Conditional_Tags) to add the script on a specific page/category/tag/archive or blog/frontpage.

All you need to replace is_page(123) from the provided code with a specific conditional tag, if you want to target a custom page (Pages > All Pages), all you need is to change 123 with the page’s ID. If you want to target your blog page, you can use is_home() instead.

Regarding the add your script here, this is the place you need to add your own JS script, for example, replace it with <script src="yourscript.js"></script>. So in your case, it will be something similar to this:

<script src="http://www.your-website-url.com/wp-includes/js/form-scripts.js"></script>

You need to replace www.your-website-url.com with your website’s URL.

So the final code could be something like:

add_action( 'wp_footer', 'custom_page_script', 10 );

function custom_page_script(){
   if ( is_page(123) ) {
      echo '<script src="http://www.your-website-url.com/wp-includes/js/form-scripts.js">';
   }
}

Hope this helps. 🙂

Thank you.

[John MParticipant]

Mr./Mrs. Support,

Thank you! I was completely unaware there was a <script> tag required for the echo, nor the src attribute inside of it. Pretty basic stuff that went about 10,000 ft over my head.

My form is now benefiting from the sprinkling of java meant for it, and only it, and all is well. Again thanks for the patience and, I can’t say thanks enough for the awesome support provided here. Much appreciated! 🙂

[Paul RModerator]

You’re welcome! John

Happy Holidays! 🙂

[GoldenSharksParticipant]

My question was according to answer from a link You have provided already (it was explanation link from previous one).
Anyways I did it without instaling Ethos plugin. I found page-id selector in body tag, made conditions to enqueuing the file and it’s all fine now.

Thanks for help 🙂

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts