Now let’s wire up some JavaScript to hide the registration form and allow it be shown with the click of a button.
First, make a new file called registration.js inside the js folder in your theme.
When I originally wrote up this exercise, I used jQuery. These days, I would probably just use straight JavaScript. I’m leaving the jQuery version here, though, because learning how to run jQuery in noConflict mode is very useful if developing for WordPress.
const $j = jQuery.noConflict();
$j(document).ready(function(){
const btn = $j('#btn-registration-trigger');
const regForm = $j('.site-footer .nf-form-cont');
regForm.toggle();
btn.on('click', function(){
regForm.slideToggle(500);
});
});
Then edit functions.php, specifically the iff_scripts function. I deleted from the header the button that triggers the mobile menu (in underscores by default), so we’ll just edit the line that enqueues that script. It has a handle of iff-navigation.
In other words, the line we’ll edit starts like this:
wp_enqueue_script( 'iff-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
Change it to this:
wp_enqueue_script( 'iff-registration', get_template_directory_uri() . '/js/registration.js', array('jquery), '20171215', true );
To understand what’s going on here, refer to this wp_enqueue_script schematic:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Here are explanations of each parameter in order:
- handle: a unique name we give the script so WordPress can keep track of it
- source: the path to the file. Here we dynamically construct it by getting the path to the template directory, then adding the PHP concatenation operator ( . ) and a string containing the remainder of the path to the file.
- dependencies: files that must load before this script. Here we load the version of jQuery that comes with WordPress.
- version: typically, a date is put here, for cache-busting purposes.
- in footer: this loads the script in the footer if set to true. This is done to increase perceived page load time: most scripts should not load ahead of the content of the page.
Test your page. Go to the console to see if the script has loaded.
When you do, you’ll see that our message to the console is indeed being output.
About Dependencies: The third item in the arguments passed to the wp_enqueue_script function (dependencies) is worth a bit more discussion. WordPress Core includes not just jQuery, but also a number of other libraries and scripts. This is to ensure that we, and developers of plugins we’re using, don’t load multiple (and potentially conflicting) versions of scripts or libraries.
A list of JS libraries and scripts included with WordPress Core.
In a later exercise, we’ll use the famous js grid library masonry the same way.
Anyway, back to your script: if you’re curious about what the first line of the script is doing, this runs jQuery in no-conflict mode, making an alias for jQuery ($j) instead of using just $, which can be in conflict with other libraries that use it.
Now all we need to do is make our markup match what we’re calling in the script.
First, let’s add a button above the form. Give it an ID of btn-registration-trigger so that it matches the script above.
Now test to see if it works.
If it does, move on to some remaining tasks to do.