Problem with moving beans_post elements


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,

Write a reply

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