In this episode, let’s go into the code and clean everything up. You need to remove the temporary debug code as well as add in the PHP DocBlocks to ensure your code is fully documented. You’ll learn more about why you document your code as part of the code construction.
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.
Style Like a Button
In this episode, you will style the read more link to look and act like a button. You will be working first in the browser, looking at the actual stylesheet, as well as making changes to see what you want. Then you’ll relate what you see in the browser to the stylesheet in your theme. Remember if you make a change to the stylesheet and this theme is already on a live site, then you need to change the child theme’s version number to ensure the changes go out to the browser. Here is the lab which walks you through […]
Get Rid of the Dots Before the “[Read more…]”
The read more text default in the Genesis framework includes the three dots are the “Read more” text. What if you don’t want those dots? In this hands-on lab episode, you will remove the dots. We’ll walk through the process.
Change “[Read more..]” Text
In this episode, let’s change the Genesis default text from “[Read more…]” to something else, such as “Continue reading”. You can change it to whatever you want. Let’s walk through the steps and code. You will learn about: Code construction and how to abstract functionality to another function Clean, quality coding techniques such as: Purposefully naming functions and variables for self-documentation Making sure a function only does one thing The PHP construct str_replace Let’s walk through this code step-by-step together.
Let’s Customize the HTML Markup
We want to move the read more link onto its own line. Therefore, the first step is to customize the HTML markup to wrap the read more link with paragraph HTML tags, i.e. p tags. To do this, you need to register your new function as a callback to the Genesis filter named get_the_content_more_link. In your new function, you will need to provide the correct HTML markup. Hum, let’s take a look at what is needed, based upon what Genesis does with the markup.
Let’s Look at Genesis’ Code
Let’s take a look at where Genesis handles building the read more HTML markup. You will go into the Genesis framework code and then relate that to how your child theme is configured. You configure your child theme in Genesis > Theme Settings. You will compare the code to these settings and look in the database too. Next, you need to find where you can hook into the Genesis code in order to customize it. Let’s walk through the code and discuss it.
Markup & Code Setup
Before you can get started working on customizing the read more link, first you need to look at the actual HTML markup that Genesis generates for you. Then you will begin setting up the new file and loading it into your functions.php file. Don’t worry. I walk you through it step-by-step, explaining the thought process and why as you work with me to write the code.
Basic Code Overview
In this episode, you will walk through the code for this lab. I’ll provide a quick explanation of how the code works. A more thorough explanation, as well as looking into both the Genesis framework and WordPress Core, discussions on clean, quality coding, and why the code works is provided in the Pro version videos below.
Lab Introduction
Let me introduce the lab to you to what you will be building. Out-of-the-box, the Genesis framework uses a read more link which is inline with the content (at the end of it) and has the following text: [Read more…]. In this lab, you will be doing multiple tasks to show you how to customize the read more link for what your project needs. You will be doing: Move the read more link to a separate line by wrapping it in p tags Change the text from [Read more…] to Continue reading (or whatever you want) Style it to be […]
Customizing the Genesis Site Header
Let’s put what you learned in Part 3 into action. In this lab, you build multiple custom site header layouts and a utility bar in order to see how easy it is to create child themes with the Genesis framework.
