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 July 9, 2017

Forget Hard Coding Version Number

In this episode, you’ll build an automatic way to set the theme’s version number. These strategies eliminate the need to hard code the theme’s version number. Let’s start with the Twenty Seventeen theme. I want to show you that these techniques work on any theme. Then in the next episode, we’ll move it over to a Genesis-powered child theme. For strategy 1, when you are in development/debug mode, we want to use the file’s modification time instead of having to change the asset’s released version number.

0 Videos Runtime July 9, 2017

Lab Introduction

Assets are the stylesheets, scripts, images, fonts, etc. that are on the website’s hard drive (i.e. web host’s hard drive) that are downloaded to the browser. Versioning gives us the ability to change each asset’s static URL to ensure our changes go out to the browser (bust through cache). In this hands-on coding lab, you will be learning better techniques and strategies for automating your asset versioning in WordPress. No more hard coding the version number when you enqueue. This is a lab that everyone needs regardless of skill level. Whether you are an implementer or advanced developer, this one […]

14 Videos 02:27:07 Runtime July 9, 2017

Automate Asset Versioning – Better Asset Versioning

In Part 1 of the Better Asset Versioning, we are looking at the version number that is applied to each asset resource, i.e. our scripts, fonts, and stylesheets. We are highly inefficient with this process. Let’s eliminate the hard coding of version numbers when we enqueue. Let’s build a better strategy for version numbers when in development mode. Let’s automate versioning and improve our build process.

0 Videos Runtime January 2, 2017

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 January 2, 2017

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 November 14, 2016

Loading Scripts

Let’s get out of the browser’s console and write your first script. In this episode, you will simply create a script file and then learn how to load that file into the DOM through WordPress. Yes, you will learn about enqueuing script files using the WordPress event wp_enqueue_scripts and its function wp_enqueue_script. Psst…if you need to learn about WordPress’ event-driven engine (you know that thing in Core that handles hooks/filters), go take this hands-on lab. Get the Sandbox Plugin

0 Videos Runtime July 12, 2016

Load Assets (Enqueue)

Now, you need to migrate over the scripts and style (assets). In this video episode, you will create a new asset loader file, which will handle the WordPress enqueuing process for the assets.

0 Videos Runtime April 19, 2016

Custom Utility Bar – Styling – Part 1

Before we get to styling, let’s add a menu and then some social links into the new Utility Bar widget area. Then you’ll start styling the Utility Bar and its components. Some of the CSS properties that you are using are: display float ::after You will also add in (enqueue it) the Font Awesome library.

0 Videos Runtime April 14, 2016

Enqueue the Stylesheet Resource

Step 2 is to enqueue the stylesheet resource. Google Fonts gives you what to enqueue. Where do you put this into your WordPress website? You will use the WordPress function wp_enqueue_style. Let’s talk about what this function does. What if you need to load up more than one Google Fonts? What is the syntax? You use the pipe | to separate out each of the font families. Let’s dig into the enqueuing and write the code for it. Don’t worry, as it’s very easy. You are actually writing PHP code here, even though it’s very little. It’s still PHP. Psst….here […]