Attributes and Markups

There are attributes and markups in Beans that can be adjusted to adjust the HTML layout of the page.

NB! Turn on Beans development mode. By going to: WordPress Admin -> Appearance -> Settings.

An example of moving a header menu to below the header . Find the Data markup ID. On the frontend of the site. Right click the area you want to adjust and open Inspect (Elements). It might look something similar to this:

Notice the data-markup-id of beans_primary_menu. Lets move it below the header.

// Move menu below header.
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_after_markup' );

// Remove float and add container.
beans_remove_attribute( 'beans_primary_menu', 'class', 'uk-float-right' );
beans_wrap_markup( 'beans_primary_menu', 'example_primary_menu', 'div', array( 'class' => 
'uk-container uk-container-center' ) );

The first code moves the primary menu below the header.
The second code removes the uk-float-right. Then adds the classes uk-container and uk-container-center to center the menu.

Markups Hooks

All markup added using Beans have dynamic action hooks firing around it.
{$markup_id}_before_markup, fires before the opening markup.
{$markup_id}_prepend_markup, fires after the opening markup (not available for selfclosed markup).
{$markup_id}_append_markup, fires before the closing markup (not available for selfclosed markup).
{$markup_id}_after_markup, fires after the closing markup.

community.getbeans.io/discussion/beans-html-api-visual-hooks-guide

Remove

To remove a specific CSS class. For instance I notice a uk block adding some HTML and CSS I do not want inside the beans main or header area. Then I just remove it.

//Removes uk-block from main area.
beans_remove_attribute( 'beans_main', 'class', 'uk-block' );

// Removes uk-container and uk-container-center from the header area.
beans_remove_attribute( 'beans_fixed_wrap[_header]', 'class', 'uk-container uk-container-center' );

To remove a DIV.

// Removes the HTML container div area inside of main.
beans_remove_markup( 'beans_fixed_wrap[_main]' );

Add

Add a new class inside an existing class

// Adds: In beans_main (tm-main) the class another-css-class.
// 1. Data-markup-id to where it is to be added. 2. class or div. 3. Name of the new class/div.
beans_add_attribute( 'beans_main', 'class', 'another-css-class' );

Notice the below another-css-class. This can then be styled.

getbeans.io/code-reference/functions/beans_add_attribute/

Markup ID, class and then the name.
beans_add_attribute( string $id, string $attribute, string $value )

Replace

To replace a class (or multiple) with another class use the beans_replace_attribute. Notice the above screenshot the uk-container uk-container-center css classes inside the data-markup-id of beans_fixed_wrap[_main].

beans_replace_attribute( 'beans_fixed_wrap[_main]', 'class', 'uk-container uk-container-center', 
'new-container-class' );

Notice that both uk containers have been removed and instead replaced with the new-container-class class.

getbeans.io/code-reference/functions/beans_replace_attribute/

Markup ID, class, existing class name and then the new name.
beans_replace_attribute( string $id, string $attribute, string $value, string $new_value = null )

Add a new class above or below an existing class

Add a class above beans_main(tm-main).

beans_wrap_markup( 'beans_main', 'another-data-mark', 'div', array( 'class' => 'new-class' ) );

The new-class with the data-markup-id of another-data-mark has been added above the existing tm-main class.

From structure:
tm-main

To structure:
new-class
– tm-main

They are still tied together. Making the new-class the parent class of tm-main

Add a class below beans_main(tm-main).

beans_wrap_inner_markup( 'beans_main', 'another-data-mark', 'div', array( 'class' => 'new-class' ) );

The new-class with the data-markup-id of another-data-mark has been added below the existing tm-main class.

From structure:
tm-main

To structure:
tm-main
– new-class

They are still tied together. Making the new-class the child class of tm-main.

Creating a new CSS at the same level not as parent or child.

Question: How do I create a class that is not a parent (above in the same branch) or child (below in the same branch) but a stand alone class. So the structure looks like this:
tm-main
new-class

The answer:

add_action( 'beans_main_before_markup', 't_custom_section' );
function t_custom_section() {
?>
<div class="custom-code"></div>
<?php
}

beans_main_before_markup adds a new CSS class named custom-code before the tm-main class. I added the new class and styled it. Which can be seen below in the screenshot where I have inspect open.

Hooks that can be used.
Example from https://wpbeansframework.com/add-a-widget-area/ 

beans_header_before_markup = Full width. Top of page. Before beans header
beans_fixed_wrap[_header]_prepend_markup = Fixed width. Inside the header wrap. Adjust header and prepend to another option and keep the fixed width.
beans_header_prepend_markup = Full width. Just above the title and menu.
beans_header_append_markup = Full width. At the end of the header.
beans_header_after_markup = Full width. After header.

Resources:
community.getbeans.io/discussion/menu-questions/
getbeans.io/documentation/customization-overview/
getbeans.io/documentation/markup-and-attributes/
getbeans.io/code-reference/functions/beans_add_attribute/
getbeans.io/code-reference/functions/beans_replace_attribute/

getbeans.io/documentation/using-actions

community.getbeans.io/discussion/i-think-i-nearly-get-it-but-i-dont/