Change the “Continue reading” Text
Lab: Customizing the “Read More” Link in Beans
Video Runtime: 08:03
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 ID and concatenates the suffix of '_output'
to it. That is the filter event’s name. Okay?
That means you need to identify the ID that’s used with beans_output()
. How do you do that?
- Turn on development mode and then look at the comment around the text within the browser.
- Look at the code.
Option 1: Using the Comment
As we saw in the last episode, when you turn on “development mode”, Beans adds the IDs into the HTML markup as either a comment or data attribute. For beans_output()
, we use an HTML comment.
For the given HTML, what is the ID?
<a href="http://beansreadmore.local/i-love-beans/" class="more-link" data-markup-id="beans_post_more_link"> <!-- open output: beans_post_more_link_text --> Learn more <!-- close output: beans_post_more_link_text --> </a>
-
Click here for the answer
Option 2: Beans Code
The other option is to look in the code and find where “Continue reading” is being rendered. Then you can copy the ID.
The Code
add_filter( 'beans_post_more_link_text_output', 'beans_child_change_read_more_text' ); /** * Change the "read more" text to "Learn more". * * @since 1.0.0 * * @param string $text "Read more" text * * @return string */ function beans_child_change_read_more_text($text) { return 'Learn more'; }
Here you can use add_filter()
or beans_add_filter()
.
Resources to Help You
Don’t repeat yourself. Don’t repeat yourself. Don’t repeat yourself.
Episodes
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