Lab: Customizing the “Read More” Link in Beans
Video Runtime: 17:36
In this episode, you and I will do the following together:
- We’ll talk about the intent of this lab and what you should get out of it.
- I’ll show you the different end results of the customizations you’ll do.
- Step-by-step, you and I will walk through setting up your machine for this lab.
- We’ll talk about how you should do the lab. Spoiler alert: do it with me.
Make sure you’ve already got your local machine setup for development. You can check either of these labs to make sure you have Composer and Git on your machine:
For the setup, here are links to what you and I are setting up in this episode:
- Add 2 dummy posts. I use this lipsum website to get some dummy text.
- Setup the local website on your machine. I use Local by Flywheel, which is FREE. In this episode, I walk you through it’s setup.
- Download or clone Beans – make sure you name the Beans folder as “tm-beans”.
- Download Bean’s basic child starter theme
- Kint via the Kint PHP Debugger plugin or using UpDevTools.
You get WET when you swim. Stay DRY when you code.
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