Let’s build the basic FAQ custom post type. We need to simply register the post type with WordPress. You already did this task in the Custom Post Type Basics lab. Right? Therefore, you have the basic boilerplate code that you can reuse. Let’s copy the code from this lab, which you can find in this GitHub repository. Then we’ll adjust it for our needs. Let’s also talk about how to make this code work within the module, i.e. so that it’s reusable for the plugin that it’s embedded into it. How can we make the text domain reusable? Let’s talk […]
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.
Module Architecture
Let’s think about the architecture for this module. How are we going to break up the code into sub-modules, feature sets, and sub-functionality? In this episode, you and I are walking through how to break this module down into its components and keep it centered on a single intent or purpose. How do you break things up and architect your plugins, frameworks, applications, etc.? Focus on the intent and purpose. List out the big buckets of what you’re going to build. Then group the like items together into a logical order where each one supports the single intent of the […]
Planning it Out
Let’s talk through what we are building together. Start with the Scope of Work, i.e. the big green box on the lab’s landing page. You’ll build the following: A custom post type called ‘faq’ A custom taxonomy for it to give us the grouping topics Add the page attributes to the custom post type to give us the ordering feature An archive page and custom loader We’ll use the SQL and $wpdb from the Advanced SQL lab. Then we’ll modify it for our needs. A shortcode with two different processes We’ll build it in that order, step-by-step. You are building […]
Lab Introduction
Let’s talk about what you are going to do and build in this lab. We’ll talk about why. Why are we adding this FAQ feature? We’ll talk about what you’ll learn and the expertise you will gain after doing this lab with me. This lab is awesome. It has advanced plugin development concepts and processes. It will help you to move forward in your plugin development career. Don’t worry. I’m going to walk you through the entire process, sharing how I’m thinking about it, why we’re going in a particular direction, and alternative strategies. Ready? Let’s get to work.
Commit Changes & Wrap
Let’s commit our changes to the GitHub repository. Congratulations!
Change the Icon
This is our last task. We need to change the icon when clicking on the visible message. You’ll use the jQuery.data() construct to grab the data attributes off of the icon element. Hum, we originally coded those attributes onto the visible message. Let’s rethink that. It makes more sense to put them onto the icon element. Why? It’s easier for us to get the values in our script. Then you and I will work through the rest of the change icon function. And you get to learn that JavaScript doesn’t wait for functions to get done before running the next […]
Animate the Hidden Content
Okay, now it’s time to talk about the sliding animation. You learned the basics of .slideUp() and .slideDown() in Episode 7 of the Introduction to jQuery lab. Let’s explore the options and see what these constructs do to the inline CSS for the elements.
Is the Hidden Content Showing?
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.
Get the Element’s Index
The way we setup the HTML markup, the elements line up one-to-one. Therefore, if we grab the index of the clicked element, then we will be able to grab each of the needed elements. This strategy allows us to reduce our code as well as minimize hits to the DOM. We can go fetch the elements we need when the page loads and store those into a variable. That means, we don’t have to traverse the DOM on every click event. You’ll also get a quick explanation of this in JavaScript.
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.