There are two main principles which will accelerate your career in this profession: fundamentals and clean, quality coding techniques. Mastering these, incrementally building yourself up and incorporating them into your workflow and code will make you more in demand and marketable. Why? Why is clean, quality coding so important? Clean code means quality. You are increasing the quality of the product you are producing. Why? By breaking up your code into modules, having a function do just one thing and behavior, purposefully naming variables and functions, and making your code more readable, you are reducing the maintainability costs of code. […]
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.
What the Heck is Modularity?
In software and programming, you hear the term packages and modules. It’s a principle and pattern of how we group code into like functionality, features, and components. In blogging, we group like content with categories to identify a central message. It’s similar in programming, where you take the web page and break it down, grouping like items together and then building the module for each of them. Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired […]
Lab Introduction
Let me introduce you to this lab, what you will be actively building, as well as the concepts that you’ll be learning.
Google Fonts and Your CSS
In this episode you will learn about how to work with the Google Fonts’ site, how to select the styles, and then what are the options they supply. Then you will work in Google Chrome Developer Tools to find where the insert the CSS. You will also see the result of when you forget to enqueue the resource, as the font is not loaded. Let’s get into the code as well as exploring the HTML and CSS tools available to you.
Adding Google Fonts to Your WordPress Website
Adding Google Fonts into your WordPress website is a two-step process, which requires you to add CSS and PHP to your theme or plugin. Many people forget to do one of the steps. In this hands-on lab, you will write the code while I walk you through it step-by-step.
Wrap it Up
Let’s review what you did here in this lab before you move on Part 3.
Markup Helpers for Empty Class and Accessibility
Genesis provides a couple of markup helper functions that you can use in your child theme and plugins. One is for removing the class attribute, while the other adds a screen reader class attribute for accessibility. Let’s take a look.
Genesis Markup – genesis_attr – Part 2
Let’s continue by reverse engineering genesis_attr to you to know how it takes the array of attributes and then converts it into the HTML string that you saw in the last episode.
Granular Customization with genesis_parse_attr
Now you know how the function works and what its intent is. Let’s go and change the markup for the default contextual areas of the HTML markup, i.e. the default stuff in the Genesis framework. You will be doing the following hands-on, code writing stuff in this episode: Manipulate and customize the site header as well as the entry markup; Change the class attribute by removing it, adding a new class, and even overwriting; Add an id attribute Add a data attribute for data-post-id, which will give your JavaScript more information when needed You get to have some fun with […]
Configuring Structural Wraps
Now you know how Genesis renders out the structural wrap, but how do you configure it up in your child theme? Let’s explore how you add_theme_support. You’ll add and remove structural wraps from various HTML contextual sections to gain a hands-on knowledge of how to configure it in your projects. Let’s reverse engineer the function genesis_structural_wrap. For example: