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 an element and then
beans_close_markup() to close the element, what function name might we use to remove that markup? Think about it. Look at the naming convention. We want to “remove” the icon’s “markup”. Right? Therefore, we would use
How? Well, we need the markup ID. Where can you get that ID?
- Look at the code that renders it with the open and close markup functions.
- – or – Turn on “Development mode” and grab the data attribute.
To turn on the “development mode”, go to Appearance > Settings, click on the “Enable development mode” checkbox, and then click on the “Save” button. Now go back and refresh your browser on the front-end. Notice that our icon now has a
<i class="uk-icon-angle-double-right uk-margin-small-left" data-markup-id="beans_next_icon[_more_link]"></i>
Aha! That is the markup ID we need, i.e.
Let’s put it all together now. To remove the read more icon, you would put this code into your child theme:
// Remove the "read more" icon from the markup. beans_remove_markup( 'beans_next_icon[_more_link]' );
If you stayed to the end of the episode, I talked about an error in the closing ID. Here is a link to the issue I opened.
Hands off the keyboard. Web development starts by thinking first, then planning it out, and then coding it.
Total Lab Runtime: 02:21:26
- 1 Lab Introductionfree 17:36
- 2 Let's Look at the HTML Markupfree 09:16
- 3 Find Where Beans Renders the "Read More"pro 15:37
- 4 Remove the >> Iconfree 09:46
- 5 Change the "Continue reading" Textfree 08:03
- 6 Append "..." After the Textfree 06:06
- 7 Dive into Bean's beans_output()pro 15:46
- 8 Dive into Beans' beans_open_markup()pro 15:50
- 9 Dive into Beans' beans_close_markup()pro 03:04
- 10 Adding HTML Attributes using beans_add_attributes()pro 09:10
- 11 Style It to Look Like a Buttonfree 04:04
- 12 Add UIKit Button Attributespro 08:16
- 13 No More Inline. Put On A New Linepro 01:48
- 14 Wrap It in a Paragraphpro 05:11
- 15 Change the UIKit Iconpro 06:32
- 16 Wrap it Upfree 05:21