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.

Write a reply

Login or register to write a reply, it's free!