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.

Developing & Empowering WordPress Developers
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.
0 Videos Runtime
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.
0 Videos Runtime
Let’s dive into the Bean’s framework to understand how the beans_open_markup() function works.
0 Videos Runtime
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.
0 Videos Runtime
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?
0 Videos Runtime
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 […]
0 Videos Runtime
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.
0 Videos Runtime
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 […]
0 Videos Runtime
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 […]
0 Videos Runtime
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 […]
0 Videos Runtime
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.
Know the Code flies on WP Engine. Check out the managed hosting solutions from WP Engine.
WordPress® and its related trademarks are registered trademarks of the WordPress Foundation. The Genesis framework and its related trademarks are registered trademarks of StudioPress.
This website is not affiliated with or sponsored by Automattic, Inc., the WordPress Foundation, or the WordPress® Open Source Project.