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.
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.
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.
Wrap it Up
Let’s review what you did here in this lab before you move on Part 4.
Custom Utility Bar – Styling – Part 2
Let’s finish up the styling in this episode. You’ll be doing things such as adding a slash between the menu items using the CSS property ::after.
