Let me introduce this hands-on code building lab to you. You and I are going to build this lab together. Our goal is to remove the site footer from your Genesis child theme. We’ll build four (4) different implementations which accomplish virtually the same result. We’ll talk about the pros and cons of each strategy and when to use one over the other. It’s best that you do this lab with me. You will learn more when you actually write the code, explore the Genesis framework with me, and see what happens as you make changes. Instead of just watching […]
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.
Remove the Genesis Site Footer on Home Page
Let’s remove the default Genesis site footer on the posts’ page, i.e. the home page. In this hands-on lab, you will walk through four (4) different implementations, each of which removes the site footer. You’ll discover the pros and cons of each of these approaches. From this exercise, you’ll be able to select the best approach for your specific needs.
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.
Build Teaser HTML View
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.
Build Q&A HTML View
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 […]
Architect the HTML Markup
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.
Let’s Build the Collapsible Content Plugin – Part 1
Let’s get you started building custom (from scratch) WordPress plugins. In Part 1 of this series, you are going to build the basics of the Collapsible Content plugin. As you are building it with Tonya, you’ll learn deeply about custom plugin development, file structures, jQuery, PHP, WordPress core, shortcodes, Gulp, and much more.
Let’s Build a Custom Utility Bar – Structure
Let’s add a utility bar above the site’s title area. In this episode, you and I will build a utility bar. But it’s more than just that, as you can go over to Carrie Dils’ site and get the code. We’ll talk about things like how to think about code construction, where do you register the callback, how is the widget area built, modular code, where to build the code, and more.
Custom Header Layout 3 – HTML Structure
In this layout, let’s keep the logo centered but wrap the primary and secondary navigation around it, i.e. on either side. You’ll write the code to accomplish both the placements in PHP and CSS for styling.
