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 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 beans_remove_markup(). Aha!

How? Well, we need the markup ID. Where can you get that ID?

1. Look at the code that renders it with the open and close markup functions.
2. – 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 data-markup-id attribute:

<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. 'beans_next_icon[_more_link]'.

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.