Wrap it Up
Lab: Customizing the “Read More” Link in Beans
Video Runtime: 05:21
WooHoo! You made through this lab. Congratulations! I’m proud of you.
Let’s recap what we did in this lab:
- We looked at the Beans code that builds the “read more” link.
- If you are a Pro member, we looked at various Beans functions and walked through the code.
- We talked about various strategies to find the ID and hooks you need to customize your child theme. One hint was to turn on “development mode” as the IDs are then put into the HTML.
- We then did a lot of different customizations including:
- We changed the text.
- We got rid of the icon.
- We changed UIKIt’s
itag to a
- We changed the UIKit icon to a book.
- We added 3 dots after the text.
- We styled it like a button.
- We make a full-width block button.
- We wrapped it in a paragraph.
- We dove into UIKIt.
- We talked about PHP string processing, DocBlocks, arrays, type hinting, and more.
You did it! Excellent job! Bam, you now know how to customize the “read more” link in Beans. WooHoo! Way to go.
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