Adding a css class before tm-main.

This code:

beans_add_attribute( 'beans_main', 'class', 'main-image-banner' );

Adds the main-image-banner as a class into tm-main. How would I go about adding it just before tm-main. I tried

beans_add_attribute( 'beans_main_before_markup', 'class', 'main-image-banner' );

but that did not work.

How would I add it as a class before the tm-main class begins?

My purpose is to extend this tutorial: http://wpbeansframework.com/2018/05/31/replace-header-image-with-featured-image/ It adds the featured image into the header. I would like to add a kind of hero image banner area before tm-main to where I can automatically add the featured image. That means I can keep this area within a defined size.

That means I need a class (or so I believe) outside of tm-main that I can use to add the featured image into.

Thank you!

Ps I have searched the forums, looked in my notes and also looked in the https://www.getbeans.io/documentation/markup-and-attributes/ but I have not yet found the solution.

Hi Paal Joachim Romdahl,

In your case, beans_main is the unique Markup ID, and the beans_main_before_markup is the hook that is automatically generated by Beans Markup API.

Any reference "ID" that the suffix is *_before_markup, *_prepend_markup, *_append_markup and *_after_markup is not the ID of any markup's, they are hooks.

To manipulate markup, you need their real ID and not their hooks, you can find them easily by removing the suffix given above.

This is the example to understand it more:

// beans_main_before_markup
<div data-markup-id="beans_main">
    // beans_main_prepend_markup

    Hello World

    // beans_main_append_markup
</div>
// beans_main_after_markup

Tonya Mork added this snippet to this question

add_filter( 'beans_logo_image_after_markup', function() {
    echo '<span>';
        beans_output_e( 'beans_site_title_text', get_bloginfo( 'name' ) );
    echo '</span>';
} );

If we add this snippets to the hook in your question beans_main_before_markup here is how it looks:

<span>Site title</span> // we added it here to the hook `beans_main_before_markup`
<div data-markup-id="beans_main"> // this is the ID we want to target if we want to modify anything here.
    // beans_main_prepend_markup

    Hello World

    // beans_main_append_markup
</div>
// beans_main_after_markup

So to add attributes, we want to target the Markup like this

beans_add_attribute( 'beans_main', 'class', 'my-class' );

Hey Joseph B

I decided to do some research and also made this tutorial: https://wpbeansframework.com/2018/07/09/attributes-and-markups/

Adding a class before beans_main I added the following code:

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

Let me know if you notice anything that I should correct or add on to the tutorial. Thanks for your reply!

Hey Joseph

I am picking up this thread again as there is still something I do not understand.

How would I go about adding a new class on the same level - but before header or after header?

Using

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

Adds a new class above BUT making beans_main (tm-main) a child of the new class.

Using

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

Adds a new class inside of beans main (tm-main)

I would like to add on to the tutorial showing how to add the class on the same level.

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
}

https://wpbeansframework.com/attributes-and-markups/

You have done an amazing job with that website, Paal.

Glad you understood it, sorry for the late response. To give others a more detailed example, this is what is going on.

/**
 * Available hooks are commented with '//'.
 * Only the HTML is printed on browser, unless one of hooks is used.
 */

// 'beans_main_before_markup' ( used by beans_wrap_markup() )
    <main class="tm-main" data-markup="beans_main">
        // 'beans_main_prepend_markup' ( used by beans_wrap_inner_markup() )
            Some dummy content here...
        // 'beans_main_append_markup' ( used by beans_wrap_inner_markup() )
    </div>
// 'beans_main_after_markup' ( used by beans_wrap_markup() )

beans_wrap_markup() and beans_wrap_inner_markup() uses 2 hooks to wrap the markup, one for beans_open_markup_e() and the other for beans_close_markup_e() in the relation as shown in the example.

Using add_action() can give you more control, you can use only one hook to open and close the markup like Paal's anwser:

add_action(
    'beans_main_before_markup',
    function() {
        echo '<div class="before-main">before main on the same depth level</div>';
    }
);
add_action(
    'beans_main_prepend_markup', function() {
        echo '<div class="prepend-main">first child of main</div>';
    }
);
add_action(
    'beans_main_append_markup',
    function() {
        echo '<div class="append-main">last child of main</div>';
    }
);
add_action(
    'beans_main_after_markup',
    function() {
        echo '<div class="after-main">after main on the same depth level</div>';
    }
);

Hey Joseph

I noticed you made a reply as I received an e-mail about it. The reply never showed up here in the tread. Do please repost. Thanks!

Firstly, I wanted to thank you for all the tutorials on wpbeansframework, i learned something new there.

I made an explanation of what beans_wrap_markup() and beans_wrap_inner_markup() does, and why they don't not work for your question, but seems that forum has taken it as spam.

Explaining things with words, especially that english is not my native language seems a little difficult to me, perhaps one day i can make video tutorials explaining Beans API with live examples.

Hey Joseph

As I have editor access I was able to go in and yes you were right your reply was in the spam folder. I took it out of the spam folder and it is now published as we can see above. Thanks!

(There were actually a lot of replies in the spam folder that I will need to check out and take out of the spam folder and get published to the threads they belong to.)