What You Will Learn
- Working in the browser’s console
- Scope (it’s different than PHP)
- Traversing the HTML DOM
- Selecting elements
- Data types including objects and arrays
- Basic event handling
- Setting default states
- and more
You need to have a sandbox test site spun up and ready to go. If you need help with it, see the Setting Up Your Sandbox Test Website article in our Help Center. Make sure you turn on the debug mode in your
wp-config.php file. The code is in that same Help Center article.
In order to do this lab, you will need the following:
- A local web server, such as Local by Flywheel, Desktop Server, MAMP, WAMP, VVV, or some other application.
- Your favorite IDE or editor. (Tonya uses PhpStorm.)
- Firefox and/or Google Chrome
Your functions are bloated. Put them on a diet. Think "skinny" and "as few lines as possible."
Total Lab Runtime: 02:32:33
- 1 Lab Introductionfree 10:05
- 2 Document Object Model (DOM)free 08:23
- 3 Select Elements from the DOMfree 13:48
- 4 The Why of jQueryfree 04:46
- 5 Variablespro 14:42
- 6 Traverse the DOMpro 17:08
- 7 Basic Animation Effectspro 09:16
- 8 Data Typespro 15:44
- 9 Basic Eventspro 09:53
- 10 Loading Scriptspro 10:47
- 11 Declaring Functionspro 05:28
- 12 Meet the IIFEpro 09:03
- 13 jQuery's $pro 04:14
- 14 Scopepro 09:44
- 15 Cachingpro 03:34
- 16 Wrap It Uppro 05:58
What to Do Next?
Let’s Build the Collapsible Content Plugin – Part 1
Let's get you started building custom (from scratch) WordPress plugins. In Part 1 of this series, you are going to build the basics of the Collapsible Content plugin. As you are building it with Tonya, you'll learn deeply about custom plugin development, file structures, jQuery, PHP, WordPress core, shortcodes, Gulp, and much more.
Check out the jQuery Library for more hands-on labs, insights, Docx, and more.