Problem with moving beans_post elements

I have some strange problem with wraping and moving elements.

So... I want to change post view a bit to something similar to this: https://demo.pagekit.com/theme-cards/

Here's actual code structure:

<article class="uk-article uk-panel-box" data-markup-id="beans_post">

 <header data-markup-id="beans_post_header"></header>

  <div data-markup-id="beans_post_body">
    <div class="tm-article-image" data-markup-id="beans_post_image"></div>
  </div>

</article>

What I need is to remove uk-panel-box class from beans_post, move beans_post_image before header, and wrap beans_post_header and beans_post_body into single div with uk-panel-box class, to look like this:

<article class="uk-article uk-panel-box" data-markup-id="beans_post">

 <div class="tm-article-image" data-markup-id="beans_post_image"></div>

     <div class="uk-panel-box" data-markup-id="beans_post_wrap_content">

    <header data-markup-id="beans_post_header"></header>
    <div data-markup-id="beans_post_body"></div>

  </div>

</article>

It's seems to be pretty easy, but I'm struggling with this for hours. Here what I'm trying to do:

// remove uk-panel-box class
beans_remove_attribute( 'beans_post', 'class', 'uk-panel-box' );

// move image
beans_modify_action_hook( 'beans_post_image', 'beans_post_prepend_markup' );

// wrap header with new div with uk-panel-class
beans_wrap_markup( 'beans_post_header', 'beans_post_content_wrap', 'div', array( 'class' => 'uk-panel-box' ) );

// move post_body inside new div
beans_modify_action_hook( 'beans_post_body', 'beans_post_content_wrap_append_markup' );

And it's working until last line - moving post_body to new div. Anyone - what I'm doing wrong?

I tried many combinations, but none of them works for me. I end up with this - I wrapped post_body with another div with uk-panel-box class, but the purpose was to have one div, not two identical laying next to each other...

Hey Mariuz,

Here is the snippet I think you are after:

// Remove uk-panel-box class.
beans_remove_attribute( 'beans_post', 'class', 'uk-panel-box' );

// Move image before post wrap.
beans_modify_action_hook( 'beans_post_image', 'example_post_wrap_before_markup' );

// Wrap inner post which will wrap all the children.
beans_wrap_inner_markup( 'beans_post', 'example_post_wrap', 'div', array( 'class' => 'uk-panel-box' ) );

Note the last line, we use beans_wrap_inner_markup() on beans_post which will wrap all the post children, so the beans_post_header and beans_post_body. In the second line, we rather move the image before the new wrap markup we declared in the last line. It is important to change the image action hook before calling beans_wrap_inner_markup().

When creating new markup (aka beans_wrap_inner_markup), I would strongly advise to prefix your ids using your own project prefix and not beans_ to avoid potential future conflicts. This applies to all your functions, classes etc, it should not use other products prefix such as beans_, wp_ and so on.

Happy coding,

Thank You Thierry 🙂 Also for the advice. In many cases I use tm_ prefix instead of beans_

It tourned out, that after adding your snippet I still had problem on homepage with post grid, because i had this line below:

beans_modify_action( 'beans_post_image', 'beans_post_header_before_markup', 'beans_post_image' );

I cut it out and now everything works like a charm. Silly me 😉

Could You please write something more about calling action hook before beans_wrap_inner_markup()?

I always thought that it should be after, because compiler reads code line after line, so when I call hook for image - example_post_wrap_before_markup which markup doesn't exist yet, compiler will skip this line or throw an error.

Hey Mariusz,

Beans HTML API mostly work with WP actions and filters. So if you think of the action cycle, add_action() (which attach a callback function to a hook) needs to run before do_action() (which fires all the callback functions attached to a hook).

So if you look at it in the context of this reply, beans_wrap_inner_markup() creates the markup and calls a do_action() for the folloing hooks (it only calls it if necessary to insure optimum performance):

'example_post_wrap_before_markup'
'example_post_wrap_prepend_markup'
'example_post_wrap_append_markup'
'example_post_wrap_after_markup'

To move the image above, we modify the action hook for the beans_post_image callback function and attach to example_post_wrap_before_markup. In other words, it is like removing the current action and doing a new add_action( 'example_post_wrap_before_markup', 'beans_post_image' ), so it has to fire before the beans_wrap_inner_markup() function which is essentially doing the do_action( 'example_post_wrap_before_markup' ).

If this doesn't all make sense to you, don't sweat it, Beans HTML API Core code is quite advanced and you don't need to understand it 100% to enjoy its power 🙂

Have fun,