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...
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_post which will wrap all the post children, so the
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
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
wp_ and so on.
Thank You Thierry 🙂 Also for the advice. In many cases I use
tm_ prefix instead of
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
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.
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 🙂