Let’s talk about how we check if the hidden content is showing or not. You’ll use the is.(‘:visible’) jQuery construct. You’ll see the difference between using visibility, opacity, and display to set the content is hidden. There is a difference.
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
Building the Click Handler
Let’s build the code that runs when the visible content is clicked. You’ll start by thinking about everything that needs to happen. Let’s lay out the sequence. Then we’ll start building each part of it. In this episode, you are rewriting a little bit of code. It’s a good exercise in the plugin development thought process. As you develop, you want to think about how to improve your code.
Refactor
Let’s do some refactoring to make our JavaScript easier and remove the redundancy. The script doesn’t care that one is a marketing teaser and the other is a Q&A. Right? The script handles both of the same way. Why? Both will slide down to reveal the hidden content upon clicking the visible part. The animation and changing of the icon will be the same. Therefore, let’s do some refactoring. You’ll change the class attributes to serve both the styling and JavaScript. And let’s talk about the thought process as we do it.
Passing PHP Values to JavaScript
There are many times when you need to pass values from PHP to your scripts. WordPress gives you the mechanism to do this with wp_localize_script. With this construct, you are passing an array of values to a JavaScript variable that you define. You target the script using its key or handle when it was enqueued. But did you know that JavaScript converts it to an object? Why? Because JavaScript does not have an associative array data type. Rather, the keys become properties on the object. Let’s see this in action and talk about it. Then we’ll look at how you […]
Enqueue the Assets
In this episode, you are going to tie PHP together with your JavaScript. You will deeply learn about enqueuing assets (your script). You’ll add new constants and complete the bootstrap.php and plugin.php files. Then you and I are going to run our script and explore the click handler. We’ll load the assets into the head and footer to see what happens. We’ll load the minified version and discuss why you want to compress and optimize your scripts. Here is the plugin’s constants code that will add into your bootstrap file:
Build the jQuery Basic Structure
In this episode, you will create the jQuery script file and build the basic structure. You’ll code the IIFE, initialization function, and each of the basic functions. Then you’ll cache the elements into variables. You’ll learn about mapping a click event to a function and passing additional data to it. Let’s get started working and learning about jQuery and JavaScript. I’ll also share my process on defining functions and laying out scripts. If you need a refresher on function definitions, go back and watch this episode: Functions – Introduction to jQuery (and JavaScript).
Architect the jQuery Script
Let’s figure out what we need our jQuery script to do and how we want to accomplish each task. We’ll talk about how to write more performant code, caching DOM lookups, and using the index of the clicked element to go grab the rest of the elements without having to search the DOM again. If you need a refresher on jQuery, go back and watch the applicable parts of this lab:
Test the Shortcode
Let’s activate our plugin and the UpDevTools plugin. Then you’ll add the shortcode into a post. Let’s test that it works. We’ll walk through the code and see the configuration and attributes. We’ll do some testing on different options and iterations. Before we finish, let’s commit our changes to your GitHub repository.
Autoload
In your bootstrap file, let’s make sure that WordPress is calling our file and not something else. You’ll learn about this code pattern: Next, we need to autoload our shortcode processing file.
Build the Shortcode Processer
Let’s build the shortcode processor. This is the function that is called when the shortcode is found in the content. WordPress will call our function. In our plugin, we are going to use one function for both shortcodes. We’ll do a deep discussion on how to prepare and process the hidden content. First, we talk about why we are not sanitizing it at this point. We’ll talk about why, when, and how WordPress sanitizes. We’ll talk about processing other shortcodes that are embedded within our hidden content. Next, we need to define our file’s namespace and specify the real fully […]
