Customization overview

This article explains how to customize Beans from a broader sense, while giving you a good understanding of how the framework works. It does however require a good understanding of WordPress and PHP. If you are looking to achieve a specific task, rather head off to the Code snippets section.

Global customization

It is important to understand that everything in Beans is tied together using Beans Actions API which makes it ingeniously flexible.

Very often, you will look for an action id when you want to manipulate something. Understanding how Beans works will make it easy for you to know where to find what you are looking for.

Customizing the HTML output

For the past few years, we have struggled with the idea of overwriting an entire template file to modify a single line of code or add a new content section. Not only it is overkill, but it also means that any updates made to the parent template file won’t be applied to the overwritten version.

Thanks to Beans fragmented approach, everything can be manipulated using actions and functions instead of overwriting template files. However, it doesn’t means page templates files are useless. You can still use them to conditionally include layout specific functions, which we explain in our Using page templates article.

It’s important that you understand Beans Actions API and HTML API, as they are both essential to customizing the HTML output.

Using actions

Now that you understand how Beans Actions API works, let’s use it to customize the page output. Here is an example how to move the post meta above the post title. By modifying the action hook, the post meta is appended to the post content rather than the post header.

beans_modify_action_hook( 'beans_post_meta', 'beans_post_content_append_markup' );

The post meta could also easily be removed.

beans_remove_action( 'beans_post_meta' );

Content could also be added after the post content.

add_action( 'beans_post_content_after_markup', 'beans_child_my_function_name' );

function beans_child_my_function_name() {

 echo '<p>Added Content</p>';

}

This is as good as it gets when it comes to modifying, adding or removing content on a page.

Modifying markup and attributes

Next, let’s use Beans HTML API to customize the page markup and attributes. Here is an example how to add a tm-custom class and data-my-attribute to the post article markup.

beans_add_attribute( 'beans_post', 'class', 'tm-custom-class' );
beans_add_attribute( 'beans_post', 'data-my-attribute', 'attribute-value' );

The article could also be changed to a div.

beans_modify_markup( 'beans_post', 'div' );

Or you could completely remove the wrapping markup.

beans_remove_markup( 'beans_post' );

This should give you a good idea how powerful Beans is when it comes to working with HTML output, especially when combined with UIkit.

UIkit attributes

Using Beans HTML API, you can add, replace or remove attributes which makes it easy to take full advantage of UIkit. Make sure you understand how UIkit is used in Beans by reading the UIkit in Beans documentation.

Let’s say you want to update the posts read more link to display as a button. You can simply use the beans_add_attribute function to add UIkit uk-button class.

beans_add_attribute( 'beans_post_more_link', 'class', 'uk-button' );

Multiple attributes can be added, replaced or removed, making it easy to combine multiple classes for example.

beans_add_attribute( 'beans_post_more_link', 'class', 'uk-button uk-button-large uk-button-primary' );

Another example would be to make the link text smaller by adding the UIkit uk-text-small class.

beans_add_attribute( 'beans_post_more_link', 'class', 'uk-text-small' );

While the examples above are pretty simple, it should give you an idea of the awesome stuff you can create using Beans HTML, Actions and UIkit API.