Let me introduce the lab to you to what you will be building. Out-of-the-box for the page that is specified as the Posts Page, which is done via Settings > Reading, the editor is disabled. Why? Because WordPress does not load any content the user puts into this editor. That means whatever your client types in that editor is not rendered (sent out to the browser to display). In this lab, you will build a plugin that turns on the editor and then renders it out to the screen.
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 Genesis
The Genesis framework defaults to a standard read more link which looks like [Read more…]. But what if you want to read Continue reading, Learn more, or whatever? What if you want it to be on a separate line in its own paragraph? What if you want it to look like a button instead of just a standard link? Well, then this lab is for you. In this lab, you will customize your Genesis child theme, any child theme, to fit your project’s needs. Yes, you will be doing all of these customization features.
Handling the Read More When There is No Content Limit
When you have your child theme setup to use content but there is no content limit set, your client may use the
Clean Up the Code
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.
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.