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