Using JavaScript and JQuery in Page

Question

so, I am making progress on a button that disappears after a certain amount of time after being clicked like so: https://codepen.io/mso122591/pen/qVZYNN

The problem is that this approach uses jquery, which I can't seem to get to work in wordpress.

Here are some resources to get jquery to work in wordpress (I noticed you have to replace the initial $ to Jquery and might need a wp_enqueue_script thing) but I find it kinda confusing.

1.https://codex.wordpress.org/Using_Javascript#JavaScript_in_Posts 2.https://stackoverflow.com/questions/11159860/how-do-i-add-a-simple-jquery-script-to-wordpress 3.https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/ 4.https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

I have been able to make javascript work in wordpress, so I tried to get the same result using JS,

so I tried to get the same result with JS code: https://codepen.io/mso122591/pen/rYWXJQ

But it also doesn't work in wordpress.

It seems that wordpress is pretty finicky as this works in wordpress:

JavaScript Alert

Try it

function myFunction() { alert("I am an alert box!"); }

And this does not work:

JavaScript Alert

Try it

function myFunction() { alert("I am an alert box!"); } //notice this one has an extra space

Any ideas to get the button to work in wordpress? Am I missing something about how Javascript has to be structured or how to make JQuery work?

Answer 1

jQuery is default active in WP, no need to enable it.

There are 2 ways of including your own jQuery in WP:

1. Enqueue your own file containing the jQuery (preferred method)
2. Use the wp_head or wp_footer action hook to include a script with jQuery.

I'm only going to explain how to enqueue scripts in WP.

But first things first, if you want to include your own files it's best to have a child theme active. Why? Because changes in a child-theme are not overwritten with an update. More information about child-themes here: https://codex.wordpress.org/Child_Themes

Almost every professional theme has the child theme included, simply upload it to the themes directory and activate it in WP.

Below are the contents of a simple jQuery file with your alert.

jQuery(document).ready(function ($) {
    alert("I am an alert box!");
}

As you can see, the $ is included in the function, no need to replace it with jQuery. Save & upload the file to your child-theme directory.

Next: You need to tell WP to include this file. Open the functions.php in your child theme. Add the following function:

add_action( 'wp_enqueue_scripts', 'michael_enqueue_my_script');
function michael_enqueue_my_script() {
    wp_register_script( 'my_test_script', get_stylesheet_directory_uri() . '/your-file-name.js', array('jquery'), '0.0.1', true );
    wp_enqueue_script( 'my_test_script' );
}

I included the michael in the function name because you have to be carefull you do not create duplicate global function names.

When you enqueue files like this, it's easy to add conditional logic. The example below only loads your file on the homepage:

add_action( 'wp_enqueue_scripts', 'michael_enqueue_my_script');
function michael_enqueue_my_script() {
    wp_register_script( 'my_test_script', get_stylesheet_directory_uri() . '/your-file-name.js', array('jquery'), '0.0.1', true );
    if( is_home() ) {
        wp_enqueue_script( 'my_test_script' );
    }
}

Regards,

Bjorn

Answer 2

Based on the code from https://codepen.io/mso122591/pen/qVZYNN, put a button on your post or page:

<button>Join booth</button>

Please note, that id="myBtn" had been removed from the <button> tag, as our jQuery script locates the button by its tag, not id.

Now, we will use wp_footer action hook, to insert jQuery script, inline, into the footer. Put this code into functions.php of your theme ( preferably, child theme):

function wpse_insert_script() {
    echo '<script>
jQuery(document).ready(function($){
  $("button").click(function(){
    $("button").hide();
    $("button").show(8000)
  });
});
</script>';
}
add_action('wp_footer', 'wpse_insert_script');

Please note, that first $ character, in our original script, had been replaced by jQuery ( case sensitive ). It was necessary, as WordPress runs jQuery in no-conflict mode. First occurrence of function() had been replaced by function($), to declare $ character as an alias for jQuery, so it can be used in the following lines of the script.