This comes down to what could be described as "best" or "better practices". I'm experimenting with placement / positioning questions for content and content elements.
What I'm moving towards is best demonstrated this way I think
Normal: [ beans_content]
Idea: [ beans_content
- page title
- get featured image
- h2
- get excerpt
- custom nav actual content ]
As you can see, not only will elements like Post Title and breadcrumbs need to be moved around, but other things are added. I've figured out how to add / modify (widget and other) areas, with and without functions, but this dives into the core content area. But it's not Hero type of stuff - I think. Several things could be added and appended before the beans_content markup, but what about within? Open markup everywhere?
Suggestions as to what wheels not to reinvent are as welcome as throwing me towards interesting directions!
Hey J.C.
There you enter in the world of actions and fragments (functions). Beans is a "fragmented" or also called "components based" theme. This means that every element on the page is within a fragment (PHP function) attached to a hook using an action. The purpose is to make it easy to add, modify it or move things around.
I think by now you understand how hooks work to add content on the page. You inspect your page (in Beans dev mode), look for a markup id and use it suffixed with _before_markup, _prepend_markup, _append_markup or _after_markup in an add_action().
To find Beans fragments, you can either search in the Code Reference Fragments or straight in the code in Beans Core theme /lib/templates/fragments/.
To move things around, you need to have a minimum understanding of Beans Actions API. In Beans Core it is very simple, the action id are always the function name, so all you really have to do is find the fragment (function) you are after and use is as the action id.
Wow, this might already be a lot to take if you are not comfortable with actions and functions so let's do a practical example. Let's say you want to move the image above the title. All the post related fragments are here or in /lib/templates/fragments/post.php and the function you are looking for in this case is beans_post_image(). Great so now, what we have to do is change the hook the image is attached to and set it to the one one above the title. So we inspect the page title and see that that markup id is beans_post_title. Awesome we have everything, let's do some magic:
beans_modify_action_hook( 'beans_post_image', 'beans_post_title_before_markup' );In the line above, we say "please modify what ever hook the post image is attached to and instead attach it to the hook before the title". You where asking about moving things within the post content, well the hook could be beans_post_content_append_markup which would move the image in the post content div after the content.
I am going to stop here because I don't want to give overload with information but I would like to let you know that you could very very easily turn this fragments into shortcodes which you could add in your editor such as [example_post_title] or [example_post_image].
This is a lot to take at once and might sound overwhelming and complicated. The reality is that isn't very complicated and you will realize when practicing that it is very logical and will even get to a point you will guess hooks and actions id or know it by heart.
Hope that helps,
Hang on, so it is possible to rearrange & move things around!
beans_modify_action_hook( 'beans_post_image', 'beans_post_title_before_markup' );Trying to following the logic here though, bit of a learning curve. Does it matter in what order these things are done?
Of course it is, that is the way Beans is built for, there is a lot more that just the Markup and Attributes control you have seen until now 😉
Beans is made of structural markup and hooks to which framgents are attached to, so anything can be added anywhere and everything can be modified/moved or removed.
No the order doesn't matter unless you apply multiple modifications to the same element, which would only really apply if you modify it globally in your functions.php and then further more in a template file because it is specific to that view, in which case the order is correct anyway.
Happy coding J.C.
I may have found a limitation. Going over these two articles in the documentation: Markup and attributes Customization overview
These got me thinking. I'm curious, is it possible to either: apply dynamic actions to id's (added within/by custom functions), or come up with an "inside_markup" hook?
{$markup_id}_before_markup, fires before the opening markup.
{$markup_id}_prepend_markup, fires after the opening markup (not available for selfclosed markup).
{$markup_id}_append_markup, fires before the closing markup (not available for selfclosed markup).
{$markup_id}_after_markup, fires after the closing markup.{$markup_id}_inside_id, fires between opening and closing tags of the selected id.
My logic is quite probably flawed, but here's the thinking: if beans can identify a generic (not beans created/contained) element, it should be possible to apply beans capabilities to it -no?
Actually, different approach. I might be on to something?
beans_remove_action( 'beans_breadcrumb' );
beans_remove_action( 'beans_post_title' );
// Add Test Bar.
add_action( 'beans_post_header_prepend_markup', 'group_content_bar' );
function group_content_bar() {
?>
<div class="uk-grid uk-container-center uk-text-small" data-uk-grid-margin>
<div class="uk-width-large-1-2 uk-width-small-1-2 uk-text-center">
<?php beans_breadcrumb(); ?>
</div>
<div class="uk-width-large-1-2 uk-width-small-1-2 uk-text-center uk-clearfix">
<?php beans_post_title(); ?>
</div>
</div>
<?php
}Hm.
Hey J.C.
These got me thinking. I'm curious, is it possible to either: apply dynamic actions to id's (added within/by custom functions), or come up with an "inside_markup" hook?
{$markup_id}_prepend_markup fires inside the markup id right after the opening tag and {$markup_id}_append_markup also fires inside the markup id, but right before the closing tag.
I see in your last reply that you made use of beans_post_header_prepend_markup so I am guessing that you got it under your belt by now 🙂
Happy coding,