In the previous 2 episodes, I showed you how to modify the text. Now it’s time to dive deeper into how the beans_output() function works in the Beans framework.
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.
Dive into Beans’ beans_open_markup()
Let’s dive into the Bean’s framework to understand how the beans_open_markup() function works.
Wrap It in a Paragraph
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.
No More Inline. Put On A New Line
Now that our “read more” link is styled like a button, it makes sense to have it on a separate line. Right? By default an <a> tag is an inline element. How can we make it a block element?
Style It to Look Like a Button
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 […]
Append “…” After the Text
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.
Change the “Continue reading” 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 […]
Remove the >> Icon
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 […]
Find Where Beans Renders the “Read More”
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 […]
Let’s Look at the HTML Markup
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.
