Add Javascript?

LOL! At least no more than anyone else :)!

One more quick question. Should I put these files in my child theme folder or the original theme folder? Or should I overwrite the functions.php file, with the added code, in the original them folder and add a js/clientlogin.js folder and file to that folder as well?

Probably going to continue in the morning, so no rush tonight. Again, thanks so much. You guys have been GREAT!

Child theme, if u update the theme them it will get overwritten but the child theme wont

Okay, so I’ve run into a problem.

I made a Javascript file and uploaded it into a js folder in my child theme folder. It consisted of this:

<script Language=”JavaScript”>

function validateemail(sEmailAdd){

if (sEmailAdd == “”)

{

alert(“Please enter your email address and try again.”);

document.frmLogin.txtusername.focus();

return false;

}

else

{

return true;

//var sFeatures = “top=” + ((screen.height / 2) – 300) + “,left=” + ((screen.width / 2) – 400) + “,height=550,width=750,status=yes,toolbar=yes,location=yes,resizable=yes,directories=no,scrollbars=yes”;

//window.open(“https://www.integra-group.com/timetrax/content/fmeTimeTrax.asp?Email=&#8221; + sEmailAdd,””,sFeatures);

}

}

function CheckFields(frm) {

if (frm.txtusername.value == “”) {

alert(“Please enter your email address and try again.”);

return false;

}

return true;

}

</script>

Here’s what I added to the functions.php file at the very bottom and uploaded to my child theme folder:

//Register Scripts
function theme_global_script() {
wp_enqueue_script(“global-script”, get_template_directory_uri().”/js/clientlogin.js”, array(‘jquery’), false);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_global_script’ );

Then I checked the site and got this message:

Fatal error: Cannot redeclare twentyten_page_menu_args() (previously declared in /home/content/s/w/i/swiz5716/html/wptest/wp-content/themes/twentyten-child/functions.php:248) in /home/content/s/w/i/swiz5716/html/wptest/wp-content/themes/twentyten/functions.php on line 252

Here’s a link to the original code on the website, if it helps:

view-source:https://www.integra-group.com/login.aspx

I know I’m doing something wrong, but what I do not know.

Oh, and the Javascript file is call clientlogin.js.

Here’s that link to the source code again as an actual link, I hope:

view-source:https://www.integra-group.com/login.aspx

And I tried bot true and false in the functions.php code.

There’s a couple issues here.

I’m not saying this in a negative way, but I think you’ll have to learn some basic JavaScript if you want to get this working yourself. JavaScript 101: Hello World! may be a good place to start. You may also want to check out The Best Way to Learn JavaScript, or JavaScript 101. Unfortunately that’s beyond the scope of this forum.

The first problem is that you don’t put <script> tags in an external js file – that’s only for scripts that are in html documents. I also doubt that just transferring the JavaScript from the other site is going to work as is – you probably have to do some rewriting.

So let’s just deal with getting WordPress to load an external JavaScript file. Using jQuery, we’ll create a script that alerts you when the script has loaded to see that it’s working. Put this in your clientlogin.js file:

/wp-content/themes/your-childtheme-name/js/clientlogin.js

jQuery(document).ready(function(){
  alert( "clientlogin script loaded!" );
});

The second issue is that your redeclaring a php function that has already been declared. I suspect this is because you made a copy of your parent theme’s functions.php file and put it in your child theme. What you want to do instead is create a brand-new functions.php file in your child theme and put your hook in there:

/wp-content/themes/your-childtheme-name/functions.php

<?php

/**
 * Proper way to enqueue scripts and styles
 */
function your_childtheme_name_scripts() {
	wp_enqueue_script( 'clientlogin', get_stylesheet_directory_uri() . '/js/clientlogin.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'your_childtheme_name_scripts' );

So try that and see if you can get your JavaScript file to load and alert you, and then if you’re up for it, go learn a bit of JavaScript to make the script do want you want! ??

Thanks Brian. No offense taken at all about the places to learn Javascript. I have just never needed to learn it until now, and I am grateful for your suggestions.

But first, I’m going to try what you said now. Just so I’m clear, I should remove the <script> tags from the clientlogin.js file and add your new code after my existing code, correct? (and, according to you, I may need to rewrite some things in it later for it to work correctly.)

Also, yes, I copied the functions.php from my regular theme to my child theme and added the code to the end of it. I had a feeling I should start fresh, like a new css file. So I will do that. I noticed you changed a few more areas to ‘clientlogin’. I had a hunch that was wrong on my end. Should I also change the “your_childtheme_name_scripts” to “twentyten-child_scripts” since that is the name of my child theme folder?

Thanks so much. Maybe I should have mentioned that this was going to be a “Javascript/Wordpress for Dummies” question.

What I’m suggesting is that you completely remove all of your existing JavaScript code and replace it with this:

jQuery(document).ready(function(){
  alert( "clientlogin script loaded!" );
});

The only thing it will accomplish is a popup alert to let you know that clientlogin.js script is loading correctly. Once you know it loads, you can remove the code and start writing your own. ??

There’s only one important thing that I changed in your php function: get_template_directory_uri() is changed to get_stylesheet_directory_uri(). The later will
“Retrieve stylesheet directory URI for the current theme/child theme.”
as opposed to the parent theme.

As for the function name in my example – your_childtheme_name_scripts – you can call it anything you want, but try to name it something that describes what it does, and follow the WordPress naming conventions. Then, when you add your action hook, be sure to use the same function name so that it adds your function.

By golly, that did it! ?? Now I just have to get with the client, who wrote the original Javascript code, and see what they want to do about that. It has been working so far for them on their original site for some time, so I don’t know why it wouldn’t work now. But we’ll see.

Thanks a ton for all of your efforts. I will also now go to your links and learn more about Javascript.

You’re welcome, good luck with the JavaScript!

One last thing. Should I close the php code with ?> or leave it the way it is?

I would say don’t close it – a space character following the final closing ?> can cause problems such as “Warning: Cannot modify header information – headers already sent”. See Should You Close Your PHP Code Tags?

In a case of a page template where you’re mixing php with html, you close it before continuing with your html:

<section id="<?php $content->slug(); ?>" class="contact">
	<div class="row">some content</div>
</section>

Awesome. Thanks a lot for your help. A friend of mine had questioned that part of the code. You have been a life saver.

By the way, I asked the owner to try out the login form and he said it worked perfectly.