Know the Code

Developing & Empowering WordPress Developers

You are here: Home / Theming

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

Customize the Read More Link in the Beans framework

Lab Introduction

In this episode, you and I will do the following together: We’ll talk about the intent of this lab and what you should get out of it. I’ll show you the different end results of the customizations you’ll do. Step-by-step, you and I will walk through setting up your machine for this lab. We’ll talk about how you should do the lab. Spoiler alert: do it with me. Make sure you’ve already got your local machine setup for development. You can check either of these labs to make sure you have Composer and Git on your machine: For the setup, […]

16 Videos 02:21:26 Runtime

Customize the Read More Link in the Beans framework

Customizing the “Read More” Link in Beans

A common theme customization is to change the “read more” link. The default in the Beans framework is “Continue reading »”. But what if you want to read “Discover more”? How would you do that? Or what if you it to look like a button? How about changing the icon to something else? In this hands-on coding lab, you will 9+ customizations in your Beans child theme to fit your project’s needs while you learn about Beans and UIKit.

0 Videos Runtime

WordPress Custom Taxonomy Basics

Render Entry Footer Terms

In this episode, you and I are going to explore the Genesis framework. You’ll learn about the [post_terms] shortcode available to you in Genesis and how to customize its user-defined attributes to add the taxonomy and text before the labels. You’ll learn about the “genesis_post_meta” filter event too, as you will register a callback and then take a deep dive into its processing.

0 Videos Runtime

Part 3a Automating Tasks with Gulp

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

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

Part 3b - Doing More with Gulp - Developer’s Genesis Starter Child Theme

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

Part 3b - Doing More with Gulp - Developer’s Genesis Starter Child Theme

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

Part 3b - Doing More with Gulp - Developer’s Genesis Starter Child Theme

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.

0 Videos Runtime

Part 3b - Doing More with Gulp - Developer’s Genesis Starter Child Theme

CSS Minify with Nano

When you deliver your theme to your client for their live site, you will want to enqueue and use a minified stylesheet. Why? To speed up the web page’s loading, as the browser requests and downloads a smaller file. You will use a module called CSS Nano. There are a couple of different ones to use. In this episode, you will install and use the gulp-cssnano. Let’s walk through adding minification to our gulp tasks. You’ll also learn about the gulp sequencing order. And you will need the rename module too, to rename the minified file to style.min.css. Note: PostCSS […]

0 Videos Runtime

Part 3b - Modularizing Gulp Tasks

Media Query Packer

Did you notice the media queries are dispersed throughout your stylesheet? If you are using min-width (not max-width) media queries, then you can use the Media Query Packer node module.

We're giving you the keys to build whatever you want in code.
Get Started

Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.

Know the Code flies on WP Engine. Check out the managed hosting solutions from WP Engine.

WordPress® and its related trademarks are registered trademarks of the WordPress Foundation. The Genesis framework and its related trademarks are registered trademarks of StudioPress.
This website is not affiliated with or sponsored by Automattic, Inc., the WordPress Foundation, or the WordPress® Open Source Project.