Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In a standard Dreamweaver page, the first step for adding jQuery functionality is to include the library, either from a self-hosted file or a content delivery network, also known as a CDM, but WordPress already includes jQuery. It's actually used in the dashboard as well as a good number of other framework scripts. All you need to do is to invoke the desired framework, or as they say in WordPress speak, enqueue. Here's one way to do it.
Let's open up our header.php file from the roux theme, and I'm going to put this code right above the WordPress function wp_head. This will go in its own PHP code block, and we'll use the WordPress function enqueue. Now I'm going to bring up code hint that we set up with our site-specific code hinting earlier so that I can make sure to spell enqueue correctly, which is not the easiest word. And here is what we want, enqueue_scripts. So I'm going to go to the second one here.
So now before I put in jQuery in the center of those parentheses, I want to be sure to get rid of the trailing S here, because really what I'm doing is just wp_enqueue_script. So, now I'll add in my quotes and put jquery, lowercase, in there. So I'll save my header.php page. Now that jQuery's all queued up, what's next? Well, next we'll add in the specific jQuery code for whatever functionality we want to set up.
Now the syntax for this is a little bit different than your normal jQuery colon. I'll point out what is different. Typically, you start with a document.ready function envelope, and this will be about the same but just a slight tweak. So instead of starting with document.ready, we start with jQuery and then add the document.ready. So it's (document).ready and they we'll open a parentheses again, put in function and then another open parenthesis.
Now typically, this parenthesis is left empty, but to allow the code within WordPress to recognize the dollar sign syntax that we'll be using, we put it in a dollar sign. So the two differences really are just adding jQuery to the start of this line and putting a dollar sign in your parentheses following function. All right. So let's go ahead and put our first opening curly brace here, and let's put in the first of two lines. We'll put in a dollar sign so that we can identify our selector which is going to be the fieldset tag and then encase that in quotes and also parentheses and then .css because we're going to change the CSS property, and the CSS property we are going to change is the display property.
So I'll put that in quotes as well, followed by a comma and then the property we're setting it to, which is none. So basically what this is saying is when the page first loads, hide the fieldset. Now let's display it. So I'm just going to copy that first selector there, all the way up to and including the dot, and then on the next line paste it in and then we'll call a jQuery function, fadeIn, and give it a value of 2000.
So that's 2 seconds and close it all out with a semicolon, and then let's close off our curly braces as well as the parentheses and the final semicolon. Okay, that's all good. We'll save this page, footer_events.php. Now we are ready to tie footer_events.php to the events template. So I'm going to go over to my events.php page, scroll down to the bottom where we have get_footer on line 84, and rather than have the generic get_footer empty parentheses, let's add in two single quotes and put in our template name which is events.
Believe it or not, we are done, it's that simple. So I'll save the page, and let's run it through its paces and see how it looks. I'll go back over to Dreamweaver, go into Design view, and let me scroll down just a little bit so we see our form. I'll hit Refresh. And when the page loads, our Sign Up for Newsletter is not there and then it fades in. While it works in Dreamweaver, it's not quite as smooth as it will appear in the browser. So everything's working as expected.
Of course, this is just the bare minimum of what you can do with jQuery in WordPress. Keep in mind that if you want to work with other jQuery libraries, like jQuery UI, you'll need to enqueue that script as well.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.