Hey
I am thinking it would be nice with a visual hook guide something similar to....
https://genesistutorials.com/visual-hook-guide/
I am somewhat creating one through my locale dev environment: https://www.dropbox.com/s/r76ao8412aab2ew/Beans-widget-areas.jpg?dl=0
Hi Paal,
Beans don't really need a visual guide because the way hooks work is much more logical than Genesis and much easier to find. I have already pointed you in the Beans HTML API in other discussion but I am going to write the section concerned below to make sure we are on the same note.
Pretty much all markup have dynamic action hooks firing around it as follow:
- {$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.
This means pretty much anything can be added anywhere on a page by adding actions to the available hooks.
We have made it simple to find Markup IDs, you’ll need to first enable Beans development mode in your WordPress Admin->Appearance->Settings. Once the development mode is enabled, the Markup ID’s are output in a data-markup-id tag in the front-end, so you just have to inspect the page using your browser inspect and all markup ids will be displayed.
Having a PDF visual guide is pretty much impossible and is not necessary for Beans, your visual guide is the browser inspector which shows you where all hooks are in a split of a second. This is also much more dynamic since third party plugins hooks would be shown too.
One could think with so many hooks, performance must be affected. Well Beans as been engineered with performance in mind and as a matter of fact, it uses less memory than competitors such as Genesis even though it is flexible and powerful.
I would strongly advise to make sure you understand Beans hooks well as it the base and partly what makes it is so powerful.
PS: kindly make sure that your thread are as readable as possible and use correct punctuation as per mentioned in the forum rules 🙂
Wow..... I just got to take my hat off to the powerful widget location system! I am always thinking of tutorials to create and this can be one powerful tutorial on how to add a widget location in the Beans Framework.
A run through...
I have a widget location that is using add_action( 'beans_header', 'beans_child_header_widget_area' ); which is not full width. Begins just above the title area and ends just above the last menu link.
This means there seems to be 5 different locations including the one I am using above.
beans_header = Similar to prepend but with certain differences. (I will explore this some more.)
beans_header_before_markup= Before beans header. Full width widget area in the top of the page.beans_header_prepend_markup= Full width. Just above the title and menu.beans_header_append_markup= At the end of the header. Full width.beans_header_after_markup= After header.
Thank you very much for clarifying Thierry!
Hey Paal,
Glad to hear you are starting to find the magic 🙂 The reason why attaching the widget area to one of the 4 hooks mentioned in you list goes full width is because it is always outside the uk-container uk-container-center (aka fixed wrap).
If you look withing the header tag you will see that you have a the fixed wrap with the markup id beans_fixed_wrap[_header]. So if you want your widget area to be within the container, then you would use beans_fixed_wrap[_header]_prepend_markup or beans_fixed_wrap[_header]_append_markup depending if you want it on above or below the header content.
The rule for full width is very simple and logical, if you hook your content to a markup within a uk-container uk-container-center container it will be fixed width, otherwise full width.
So what is the beans_header hook? Well on top of all the markups hook, Beans has what is called structural hooks which are mainly used within Beans Core. If you look a the Beans Header hook we are talking about, you see it says "Fires in the header". This is the hook that Beans Core uses to attach the header content. While you can freely use the structural hooks, I would recommend to stick to the markup hooks because they are much easier to find and very logical to use when it comes to placing your content where you want.
Happy coding,