Hi Everyone,
As I promised in my 'Say Hello' post here, I'm gonna bug everyone with my questions .
I have done some theme customizations with WordPress, and would consider myself a PHP novice, so I'm not sure if my knowledge will be enough, since this seems to be a very sophisticated, advanced system.
Still, I decided to plunge myself into it, and I started developing a child theme based on Beans. I did some modifications, added a new UIkit component to the header ('sticky') , and a few light modifications. Then I got stuck 🙁 .
I would like to set up a new page template, which will have 2 new widget areas, with one on the left and another on the right side, essentially replacing the beans_sidebar_primary and beans_sidebar_secondary.
However, the 2 new sidebars would be different widths, compared to the beans_sidebar_primary and beans_sidebar_secondary.
The left widget area would be 1/10, the beans_primary area would be 7/10 and the right widget area would be 2/10 of the width.
This way, only some pages would have this layout, and I could choose which widgets would show on those pages. The widgets on the left side would be mostly graphic navigational links, and I would maximize the width of the primary area.
So, I created a new page template ( test-page-02.php ) , registered it with WP in the opening comment, and ended the file with beans_load_document();.
Then I registered new widget areas in my child theme's functions.php. I used Thierry's example, for 'hero' widget area, which I found in another forum entry, about Page Templates.
But then I got stuck. I'm not sure what to do now, and what is the best way to proceed.
I tried using the WP conditional tag is_page_template('test-page-02.php'), in functions.php :
add_action( 'beans_before_load_document', 'custom_modify_child_theme');
function custom_modify_child_theme() {
beans_add_attribute( 'beans_header', 'data-uk-sticky', 'showup:true' );
// TEST ---- replacing the widget area only on new Page Template 'test-page-02.php'
if( is_page_template('test-page-02.php') ) {
beans_remove_markup( 'beans_sidebar_primary' );
add_action( 'beans_primary_after_markup', 'hero_widget_area' );
function hero_widget_area() {
echo beans_widget_area( 'hero' );
} } }But this - it turns out, only removes the html markup for that particular element, with beans_sidebar_primary markup id, but it doesn't actually remove the original widgets, which come from the 'primary' widget area.
I was hoping to sort of 'sneak in' one of my new widget areas, as a test, but it didn't work. 🙁 .
I would really appreciate some help.
Cheers,
Yuna M.
Hey Yuna,
You don't have to create any files for that. Beans comes with everything select diuble sidebar layout which will be on bottom if the wordpress home < add new page
Hi Anupam,
Thank you for your reply. 🙂
I know about the layout options for new pages, that come with Beans, and they are really great.
But for this particular application, I want to have 2 completely new widget areas, and I also want to change the widths of the sidebars, as I described in my original post.
It may be a simple thing to do, but at the moment I can't figure it out yet. I'm still reading through the documentation, though.
I might be wrong, but I get the idea you're more or less looking at add a Layout to the child theme?
There is some documentation on this here. A search through the code reference shows some more detailed results.
There's also this post here which dives into custom Layout.
Hey Yuna,
What I would suggest is replace the sidebar primary and secondary with your own custom sidebar for that specific page template. Here is the example code snippet may add to your child theme function.php:
add_action( 'widgets_init', 'example_register_widget_areas' );
function example_register_widget_areas() {
beans_register_widget_area( array(
'name' => 'Custom Sidebar Primary',
'id' => 'custom_sidebar_primary'
) );
beans_register_widget_area( array(
'name' => 'Custom Sidebar Secondary',
'id' => 'custom_sidebar_secondary'
) );
}
add_action( 'wp', 'example_setup_document' );
function example_setup_document() {
if ( is_page_template( 'test-page-02.php' ) ) {
beans_modify_action_callback( 'beans_widget_area_sidebar_primary', 'example_custom_sidebar_primary' );
beans_modify_action_callback( 'beans_widget_area_sidebar_secondary', 'example_custom_sidebar_secondary' );
}
}
function example_custom_sidebar_primary() {
echo beans_widget_area( 'custom_sidebar_primary' );
}
function example_custom_sidebar_secondary() {
echo beans_widget_area( 'custom_sidebar_secondary' );
}In your post you can then select your page template and all the layouts options would work as expected but using your custom sidebars 🙂
Regarding changing the sizes, refer to this reply.
Hope that helps,
Thank you very much for your replies .
-reply to J.C. : Thanks for the links, I will definitely comb through them again. My question was pretty specific, though, and Thierry answered it spot on.
-reply to Thierry : That's exactly what I was hoping to find. Thank you sooooo much !!! 🙂
I see that you used the standard WordPress hooks : add_action( 'widgets_init' ... and
add_action( 'wp' ... for this application, which clarifies a lot to me - about when to use the Beans' hooks and when and how to combine them with the WordPress hooks.
For completeness: I used the code that you posted a link to, regarding changing the grid sizes here and put it inside the 'if 'statement which makes sure that only the pages that use this particular Page Template (test-page-02.php) will be affected and will be using the 2 new custom widget areas.
So the final, complete code snippet in the child theme's functions.php ends up looking like this :
add_action( 'widgets_init', 'example_register_widget_areas' );
function example_register_widget_areas() {
beans_register_widget_area( array(
'name' => 'Custom Sidebar Primary',
'id' => 'custom_sidebar_primary'
) );
beans_register_widget_area( array(
'name' => 'Custom Sidebar Secondary',
'id' => 'custom_sidebar_secondary'
) );
}
add_action( 'wp', 'example_setup_document' );
function example_setup_document() {
if ( is_page_template( 'test-page-02.php' ) ) {
beans_modify_action_callback( 'beans_widget_area_sidebar_primary', 'example_custom_sidebar_primary' );
beans_modify_action_callback( 'beans_widget_area_sidebar_secondary', 'example_custom_sidebar_secondary' );
// The code from the link - to alter grid widths :
add_filter( 'beans_layout_grid_settings', 'example_modify_grid' );
function example_modify_grid( $args ) {
return array_merge( $args, array(
'grid' => 6,
'sidebar_primary' => 1,
'sidebar_secondary' => 1,
'breakpoint' => 'medium' // medium is the default but you may change to breackpoint to small or large
) );
}
}
}
function example_custom_sidebar_primary() {
echo beans_widget_area( 'custom_sidebar_primary' );
}
function example_custom_sidebar_secondary() {
echo beans_widget_area( 'custom_sidebar_secondary' );
}This helps my understanding of Beans a lot . I hope it will be of use to others too.
Cheers, 🙂
Yuna M.
Great work Yuna!
Just a quick note, I would advise to keep the example_modify_grid( $args ) function out of the example_setup_document() function like we do for the sidebar functions to keep it clean (keep add_filter( 'beans_layout_grid_settings', 'example_modify_grid' ); in the example_setup_document() function).
I am glad to hear you are learning Beans and hopefully you are starting to find Beans magic 😉
Happy coding,
Hi Thierry,
You mean, just keep example_modify_grid( $args ) outside, like this :
add_action( 'wp', 'example_setup_document' );
function example_setup_document() {
if ( is_page_template( 'test-page-02.php' ) ) {
beans_modify_action_callback( 'beans_widget_area_sidebar_primary', 'example_custom_sidebar_primary' );
beans_modify_action_callback( 'beans_widget_area_sidebar_secondary', 'example_custom_sidebar_secondary' );
// The code from the link - to alter grid widths :
add_filter( 'beans_layout_grid_settings', 'example_modify_grid' );
}
}
function example_modify_grid( $args ) {
return array_merge( $args, array(
'grid' => 6,
'sidebar_primary' => 1,
'sidebar_secondary' => 1,
'breakpoint' => 'medium' // medium is the default but you may change to breackpoint to small or large
) );
}Yes, I just re-arranged a bit the code directly in your reply 🙂
Great stuff Yuna!