Style It to Look Like a Button

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:

1. The ID of the opening tag.
2. 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' );