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.
Let’s say that you want the “read more” link or button to be wrapped in a <p> element. You want it as a separate paragraph. How would you do that? One approach is to use the WordPress “read more” link filter event. You’d register a callback and then wrap the HTML that Beans builds within a paragraph element.
Often times, we want our hyperlinks to stylistically look like a button. Many UI frameworks, including Foundation, Bootstrap, and UIKit, have button class attributes to handle this for you. Okay, how do you add a class attribute to the opening <a> tag of our “read more” link? Let’s use beans_add_attribute() function. We need to know: The ID of the opening tag. Which attribute we want to add something to. In our case, the ID is ‘beans_post_more_link’ and we want to add a class attribute. Depending upon your UI framework (or the styles you built), that class attribute will vary. Let’s […]
What if you want to remove the icon and replace it with a “…”? How would you do that? Think about it. Think about the code from the last episode. You have the default text coming into your callback. That means you can concatenate that string and append the dots after the incoming text.
Our next customization is to change the “read more” text, which by default is “Continue reading”. You might want it to say “Learn more”, “Read more”, “Discover more”, or whatever. The choice is yours. In this episode, you and I will walk through how to: Identify the ID for the text. Discover that it’s a filterable event, meaning you need to know the event’s name and then register your callback to it. Identify what the event’s name is for the above ID. The “read more” text is rendered using beans_output() function. Looking at its documentation, notice that it accepts an […]
Let’s remove the icon completely from the HTML markup. How do you do that? In this episode, we’ll walk through it step-by-step together. At this point, it’s good to learn a handful of helpful functions as well as the Beans Docs. I want you to look at the Markup and Attributes documentation. There you will discover the different functions Beans uses to build and render the HTML, each tag, and it’s attributes. In the last episode, you saw how Beans uses beans_open_markup to build and render the opening HTML tag and its attributes. So if we use beans_open_markup() to open […]
Using the strategies you learned in the last episode, it’s time to find where Beans renders the “read more” HTML. Let’s use the string literal approach, where we’ll do a global search for that specific “Continue reading” string literal. To help you more quickly find the code, I’ll share a couple of PhpStorm tips too. Then we’ll talk through the actual source code including the Beans functions beans_open_markup, beans_close_markup, and beans_output. In this episode, I mention that we are hooking into the ‘the_content_more_link’ filter, which comes out of WordPress. If you need to brush up on filters, actions, events, and […]
In this episode, let’s devise a strategy for finding where the “read more” code is being processed in Beans. The strategy I use is to start with the end result, which in this case is the HTML in the browser. Using Developer Tools, you’ll inspect the HTML (in either Firefox or Chrome). Then we’ll talk about different strategies you can use to find the source code that builds (renders) this HTML. We’ll also talk about what the term “render” means as we talk about how web servers and browsers work.
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, […]
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.
In this hands-on lab, you and I will walk through the entire process of adding a new feature to an existing WordPress plugin. You’ll start with the Collapsible Content plugin and then add a FAQ feature to it. This feature will require you to plan, think, and execute building a custom post type, custom taxonomy, advanced SQL queries, custom archive, and shortcode.
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.