Know the Code

Developing & Empowering WordPress Developers

You are here: Home / Labs

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.

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

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.

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

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 […]

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

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:

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

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).

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

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:

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

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.

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

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.

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

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 […]

0 Videos Runtime

Shortcode Runtime Configuration Parameters

To make our code reusable, we want to remove the hard-coded runtime configuration parameters. For our shortcodes, these parameters include the view filename and shortcode defaults. In this episode, you will learn the technique of abstracting the runtime configuration parameters to a separate function. You’ll build this function and setup the configuration for each shortcode. You’ll add the show and hide font icons from Dashicons (or Font Awesome if you are using that library). We’ll work through a thought process to reduce our code, refactor it, and improve its readability and reusability. Shared Quick Tips In this episode, I shared […]

0 Videos Runtime

Let's Build the Collapsible Content Plugin - Part 1

Architect the Shortcodes

First, we need to commit our code into our Git repository. Next, let’s talk about shortcodes. We’ll do an introduction to shortcodes including what it is and what is its intent. Deep Dive into Shortcodes A shortcode is a placeholder for additional content to be processed on the server when the content is being processed. You use a shortcode when you want to embed additional dynamic content, a set HTML structure, or redundant content. In this episode, we will dive deep into the process of how and why a shortcode works. The process starts when you register a custom shortcode […]

We're giving you the keys to build whatever you want in code.
Get Started

Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.

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.