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.
Whoops, I forgot that we need to attach the user defined font icon choices for show and hide indicators. Why? The jQuery script will need to know what class attributes to change, as the user can define them with the shortcode. How will we do it? Let’s use the HTML5 data attribute. Then we’ll adapt the Q&A HTML markup for the teaser markup. Part of this process will be to search schema.org to find the microdata.
The Q&A HTML markup will not use div elements. Instead, W3 specification says that we should the dl grouping content element for “question and answer” type content. Okay, looking at the specification, you will want the container to be a dl, question to be a dt, and answer to be a dd element. You’ll add the styling class attributes using the BEM standard. You’ll embed the PHP variables and then sanitize them. Next, you’ll add the visual indicator, which will be a Dashicons font icon. Let’s look at the different options and discuss variations to fit your needs. You’ll also […]
Our View files will be our native HTML markup with embedded PHP values to import the dynamic content. In clean quality coding, you separate the concerns. That means the HTML is not embedded into your PHP business logic. Instead, you will use View files. In this episode, you and I will think through and architect the HTML for both the Q&A and Teaser shortcodes.
Every project that you ever build needs to be under version control. Why? Version control lets you manage the iterations of your build process. You can track where you are, what changed, who made the change, and when it happened. It will let you roll it back to a previous version. And if you are working on a team, Git hosting gives you the means to contribute, manage pull requests, and more. Most of the major Git hosts also let you track issues. You can choose to push your project to GitHub, GitLab, or BitBucket. I typically use GitHub for […]
Next, you want to add the Gulp Task Runner to your plugin. Why? Because we want to minify the jQuery script to optimize it. I use UpGulp on all of my projects. UpGulp is a configurable Gulp starter module that you can add into any plugin or theme. It’s based on the wd_s gulpfile.js from WebDevStudios. In this episode, you and I will add UpGulp to our plugin. I’ll walk you through the installation process. Then we’ll do a gulp watch and test it on a test script file.
WordPress identifies each plugin by the bootstrap file’s header, i.e. when it complies with the minimum requirement. The header is a PHP file DocBlock. WordPress searches in the root of each plugin’s folder, opens each file, and then reads each file’s header (DocBlock). When it finds the right one, then it adds that plugin. In this episode, you will learn about and fill out your new plugin’s header, i.e. DocBlock. Then you’ll add in the PHP namespace. We’ll talk about why you want to use namespacing instead of prefixing.
Let’s discuss the plugin architecture and build the folders and main files. We’ll think about the intent of the structure and each component. We’ll talk about why you want to build your code in modular format that complies to Single Responsibility Principle. Let’s build our file structure.
Before you write a single line of code, first you want to sit down, think through your project, and plan out what you are going to build. Listen to me. Don’t just start writing your code. It will take you less time to plan it out first and then build it. What are we building? What are the building blocks of the plugin? Let’s break down the project into key components and figure out what we are building. It’s our big picture roadmap.
Let’s get you started on the right foot. This episode will introduce the lab to you. You’ll spin up a Sandbox development website and get UpDevTools installed.
The best way to learn OOP is to build convert something that you already know from procedural to OOP. That will make the thought processes and methodologies more relatable for you. In Part 4, you will convert the Collapsible Content Plugin from procedural to Object Oriented Programming (OOP).
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.