Often times, we want our hyperlinks to stylistically look like a button. Many UI frameworks, including Foundation, Bootstrap, and UIKit, have button class attributes to handle this for you. Okay, how do you add a class attribute to the opening
<a> tag of our “read more” link?
We need to know:
- The ID of the opening tag.
- Which attribute we want to add something to.
In our case, the ID is
'beans_post_more_link' and we want to add a class attribute. Depending upon your UI framework (or the styles you built), that class attribute will vary. Let’s say we use the built UIKit button class, which is
Putting it all together, our code would look like this:
// Make it look like a button. beans_add_attribute( 'beans_post_more_link', 'class', 'uk-button' );
Don’t repeat yourself. Don’t repeat yourself. Don’t repeat yourself.
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