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

Strategy 3: Remove All Genesis Footer Actions

Strategy 3 removes all registered event callbacks. Using remove_all_actions(), you are removing or unregistering every single pre-registered event (hook) callbacks. Using this approach, our code then is: When to Use This Approach? This approach ensures that all of the callbacks are unregistered. It ensures that any callbacks outside of Genesis are removed. Why is that important? It ensures there are no wonky or weird renderings in the browser from your theme or plugin. Strategy 2 removed the defaults from the Genesis framework including the opening HTML <footer class=”site-footer”>, the contents of the site footer, and the closing HTML </footer> element. […]

0 Videos Runtime January 17, 2017

Strategy 2: Remove the Individual Genesis Footer Actions

Strategy 2 will remove the individual Genesis callbacks (hooks) for the site footer. It requires you to create a home.php file in your child theme. This is the file that is called for the Posts’ Page. (If that doesn’t make sense, then you need to go do the Front Page vs. Home Page lab.) Now inside of this new template file, this new PHP file, you will add the individual Genesis callbacks to unregister each of them. Let’s go into the Genesis framework and find each of the hooks. Open up genesis/lib/structure/footer.php. Scroll down and find each of the site […]

0 Videos Runtime January 17, 2017

Strategy 1: Hide it with CSS

With CSS, you can visually hide certain elements in the DOM. CSS provides the display property, where you can set it’s value to none. What happens? It removes the HTML element from the visual representation for the web page. To accomplish this in Genesis, you will want to open up your editor and then do these steps: Open the style.css file Search for the .site-footer { section in the stylesheet Scroll down to the end of that section to place the code after these styles And then put in the following CSS declaration block Notice that we are targeting the […]

0 Videos Runtime January 17, 2017

Lab Introduction

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

6 Videos 00:33:41 Runtime January 17, 2017

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.

0 Videos Runtime September 20, 2016

Gulp Watch

A task watcher automatically runs gulp tasks when you save a Sass partial. You can wire it up to any of your gulp tasks to automatically watch for the events which trigger each one. Turn on the watch and let it run as you work.

0 Videos Runtime September 12, 2016

Laying Out the Theme’s Architecture – Part 2

In this episode, you will continue adding files to your new Genesis developer’s starter theme. You will be adding in the file PHP DocBlocks including the package name. You’ll learn about how to name your packages for the namespacing, which I show as YourCompanyName\ThemeName. Upon the completion of this episode, you will have the baseline theme file/folder architecture completed. This is now the shell of your theme, ready for you to start adding in the code into the appropriate buckets.

0 Videos Runtime July 20, 2016

Git & Additional Enhancements

Let’s push our final sample theme to your git hosting. Then let’s talk about the more advanced stuff you can do including additional PostCSS, cssnext, and more gulp tasks like SVG, image optimization, and scripts. You can look at what WebDevStudios is doing in their wd_s. You now have a completed Genesis starter theme. Yes, there are more things you can do with it, such as moving to a configuration architecture, more gulp tasks, and so on. But you can add those as you get working with your new theme. Congratulations! Start using your new codebase and it will save […]

0 Videos Runtime July 20, 2016

Sass Linting

A linter validates your Sass to coding standards. You will install the gulp node module: gulp-sass-lint. In this episode, you will install and code it into your gulp file. Then let’s run it to see what happens. Psst here is the link to the Sass Rem module.

0 Videos Runtime July 20, 2016

Gulp Notifications & Error Handling

Notifications send out a desktop message to alert you to errors and whatever message you want, such as “WooHoo your styles are done.” In this episode, you will install the following gulp packages: plumber and notify.

Labs

Strategy 3: Remove All Genesis Footer Actions

Strategy 2: Remove the Individual Genesis Footer Actions

Strategy 1: Hide it with CSS

Lab Introduction

Remove the Genesis Site Footer on Home Page

Gulp Watch

Laying Out the Theme’s Architecture – Part 2

Git & Additional Enhancements

Sass Linting

Gulp Notifications & Error Handling

Learn

Help

General