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.

Developing & Empowering WordPress Developers
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.
0 Videos Runtime
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.
0 Videos Runtime
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.
0 Videos Runtime
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.
0 Videos Runtime
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 […]
0 Videos Runtime
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:
0 Videos Runtime
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).
0 Videos Runtime
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:
0 Videos Runtime
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.
0 Videos Runtime
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.
0 Videos Runtime
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 […]
Know the Code flies on WP Engine. Check out the managed hosting solutions from WP Engine.
WordPress® and its related trademarks are registered trademarks of the WordPress Foundation. The Genesis framework and its related trademarks are registered trademarks of StudioPress.
This website is not affiliated with or sponsored by Automattic, Inc., the WordPress Foundation, or the WordPress® Open Source Project.