Style It to Look Like a Button
Lab: Customizing the “Read More” Link in Beans
Video Runtime: 04:04
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?
Let’s use beans_add_attribute()
function.
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 'uk-button'
.
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' );
There’s a time to code and …. yup, that sums it up.
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