The default widget areas in the official Beans Child theme with a left and right sidebar layout contains:
Sidebar Primary
Sidebar Secondary
Off-Canvas Menu
To locate the various areas one can add a widget into one can download the Beans Visual Hook Guide Plugin. Or go to the frontend of the site. Right click and select Inspect. Locate the various data-markup-id sections. These data markup section are where one can add a widget location.
As you see there are a lot of data-markup-id sections.
Here is an above header widget example
/*--- Above Header Widget —— Registers the widget location*/ add_action( 'widgets_init', 'beans_child_widget_above_header' ); function beans_child_widget_above_header() { beans_register_widget_area( array( 'name' => 'Above Header', 'id' => 'above-header', 'description' => 'Widgets in this area will be shown above the header section as a grid.', 'beans_type' => 'grid' ) ); } /*—— Display the above header widget area in the front end. ——*/ add_action( 'beans_header_before_markup', 'beans_child_above_header_widget_area' ); function beans_child_above_header_widget_area() { // Stop here if no widget if( !beans_is_active_widget_area( 'above-header' ) ) return; ?> <div class="widget-above-header"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'above-header' ); ?> </div> </div> <?php }
A few things regarding the above code:
1. Registering a widget location. The name and description is seen in the widget screen. Beans type = grid. If there are multiple widgets then these will show up in a grid in relation to each other.
2. The widget location uses the data-markup-id: beans_header_before_markup
Meaning the widget location will be before the header.
Add the css class name widget-above-header (that is the name I use – you can choose your own name) to your CSS file and style it.
UK-container = Beans uses UiKit for layout and design of the site.
Inside functions.php: Displaying the widget code section can be done for all pages/posts (or use conditional logic) in the functions.php file as seen above.
Inside a page template: The display code section can be added to a page template and only seen by pages using the specific template.
More advanced and inside functions.php: One use a beans smart action in the functions.php file to select which page to show a widget in.
Hooks – the relation of where to place a widget area.
I am using header as an example.
beans_header = Default Beans core data markup.
beans_header_before_markup = Full width. Top of page. Before beans header
beans_fixed_wrap[_header]_prepend_markup = Fixed width. Inside the header wrap. Adjust header and prepend to another option and keep the fixed width.
beans_header_prepend_markup = Full width. Just above the title and menu.
beans_header_append_markup = Full width. At the end of the header.
beans_header_after_markup = Full width. After header.
The reason why the 4 hooks mentioned goes full width is because they are always outside the uk-container uk-container-center (aka fixed wrap).
Here is an example using the various hooks creating widget areas in the Header, Content and Footer area. There are a lot of possibilities.
Here are a lot of widget area examples
/*--- After Header Widget ----*/ add_action( 'widgets_init', 'beans_child_widget_after_header' ); function beans_child_widget_after_header() { beans_register_widget_area( array( 'name' => 'After Header', 'id' => 'after-header', 'description' => 'Widgets in this area will be shown after the header section as a grid.', 'beans_type' => 'grid' ) ); } // Display the after header widget area in the front end. add_action( 'beans_header_after_markup', 'beans_child_after_header_widget_area' ); function beans_child_after_header_widget_area() { // Stop here if no widget if( !beans_is_active_widget_area( 'after-header' ) ) return; ?> <div class="widget-after-header"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'after-header' ); ?> </div> </div> <?php }
/*---- Hero Widget ----*/ add_action( 'widgets_init', 'beans_child_widgets_init' ); function beans_child_widgets_init() { beans_register_widget_area( array( 'name' => 'Hero', 'id' => 'hero', 'description' => 'Widgets in this area will be shown in the hero section as a grid.', 'beans_type' => 'grid' ) ); } // Display hero widget area in the front end add_action( 'beans_main_grid_before_markup', 'beans_child_hero_widget_area' ); function beans_child_hero_widget_area() { // Stop here if no widget if( !beans_is_active_widget_area( 'hero' ) ) return; ?> <div class="widget-hero uk-block"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'hero' ); ?> </div> </div> <?php }
/*------- Before Content widget -------*/ add_action( 'widgets_init', 'beans_child_widgets_post_body_loop' ); function beans_child_widgets_post_body_loop() { beans_register_widget_area( array( 'name' => 'Before Content', 'id' => 'before-content', 'description' => 'Widgets in this area will be shown in the before post_body section as a grid.', 'beans_type' => 'grid' ) ); } // Display the content widget area in the front end. add_action( 'beans_post_body', 'beans_child_post_body_widget_area' ); function beans_child_post_body_widget_area() { // Stop here if no widget if( !beans_is_active_widget_area( 'before-content' ) ) return; ?> <div class="widget-before-content"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'before-content' ); ?> </div> </div> <?php }
/*--- After content widget - also after comment in post ------*/ add_action( 'widgets_init', 'beans_child_widgets_content' ); function beans_child_widgets_content() { beans_register_widget_area( array( 'name' => 'After Content', 'id' => 'after-content', 'description' => 'Widgets in this area will be shown in the after content section as a grid.', 'beans_type' => 'grid' ) ); } // Display the content widget area in the front end. add_action( 'beans_content', 'beans_child_content_widget_area' ); function beans_child_content_widget_area() { // Stop here if no widget if( !beans_is_active_widget_area( 'after-content' ) ) return; ?> <div class="widget-after-content"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'after-content' ); ?> </div> </div> <?php }
/*-------- Footer Header -----------*/ add_action( 'widgets_init', 'beans_child_widgets_footer_header' ); function beans_child_widgets_footer_header() { beans_register_widget_area( array( 'name' => 'Footer Header', 'id' => 'footer-header', 'description' => 'Widgets in this area will be shown in the footer header section as a grid.', 'beans_type' => 'grid' ) ); } // Display the footer header widget area in the front end. add_action( 'beans_footer_before_markup', 'footer_header_widget_area' ); function footer_header_widget_area() { // Stop here if no widget if( !beans_is_active_widget_area( 'footer-header' ) ) return; ?> <div class="widget-footer-header uk-block"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'footer-header' ); ?> </div> </div> <?php }
/*------- Footer -------*/ add_action( 'widgets_init', 'beans_child_widgets_footer_loop' ); function beans_child_widgets_footer_loop() { beans_register_widget_area( array( 'name' => 'Footer', 'id' => 'footer', 'description' => 'Widgets in this area will be shown in the footer section as a grid.', 'beans_type' => 'grid' ) ); } // Display the footer widget area in the front end. add_action( 'beans_footer_before_markup', 'footer_widget_area' ); function footer_widget_area() { // Stop here if no widget if( !beans_is_active_widget_area( 'footer' ) ) return; ?> <div class="widget-footer uk-block"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'footer' ); ?> </div> </div> <?php }
// Register bottom widget area. beans_add_smart_action( 'widgets_init', 'banks_register_bottom_widget_area' ); function banks_register_bottom_widget_area() { beans_register_widget_area( array( 'name' => 'Bottom', 'id' => 'bottom', 'description' => 'Widgets in this area will be shown in the bottom section as a grid.', 'beans_type' => 'grid' ) ); } // Display the Bottom widget area in the front end. add_action( 'beans_footer_after_markup', 'bottom_widget_area' ); function bottom_widget_area() { // Stop here if no widget if( !beans_is_active_widget_area( 'bottom' ) ) return; ?> <div class="widget-bottom uk-block"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'bottom' ); ?> </div> </div> <?php }
Conditionally showing widget locations
An example on conditionally showing a widget location using the hero widget location.
/*---- Hero Widget ----*/ add_action( 'widgets_init', 'beans_child_widgets_init' ); function beans_child_widgets_init() { beans_register_widget_area( array( 'name' => 'Hero', 'id' => 'hero', 'description' => 'Widgets in this area will be shown in the hero section as a grid.', 'beans_type' => 'grid' ) ); } // Display hero widget area in the front end if ( function_exists( 'beans_widget_area' ) ) { add_action( 'beans_main_grid_before_markup', 'beans_child_hero_widget_area' ); function beans_child_hero_widget_area() { if (is_front_page ()) { ?> <div class="widget-hero uk-block"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'hero' ); ?> </div> </div> <?php } } }
Another way to write the conditional statement:
/*--- Before Main content Widget - HERO widget ----*/ add_action( 'widgets_init', 'beans_child_widget_hero' ); function beans_child_widget_hero() { beans_register_widget_area( array( 'name' => 'Hero area', 'id' => 'hero', 'description' => 'Widgets in this area will be shown before the Main content section as a grid.', 'beans_type' => 'grid' ) ); } // Display before Main content widget area - HERO widget in the front end. add_action( 'beans_main_grid_before_markup', 'beans_child_hero' ); function beans_child_hero() { // Stop here if no widget if( !beans_is_active_widget_area( 'hero' ) === ( is_page('home') ) ) return; ?> <div class="widget-hero"> <div class="uk-container uk-container-center"> <?php echo beans_widget_area( 'hero' ); ?> </div> </div> <?php }
If function exists then do beans_widget_area.
If is front page then show widget area.
! = is not.
&& = and
== = equal. Example: is_page (‘about-me’) == is_page(‘contact’);
=== = identical.
|| = or
(is_page())
(is_front_page ())
(is_page (‘id of page/post’))
(is_page (‘about-me’))
(is_page ( array(‘member’, ‘member-page-2’, ‘member-page-3’, ‘member-page-4’) ))
(( is_archive() || is_singular(‘page’) ) ) —> II brings two options together.
(is_page_template( ‘name of page template’ ))
NB! One can use the words and or. Instead of && or||.
To remove default widgets:
// unregister some of the default widgets function remove_default_widgets() { // unregister_widget('WP_Widget_Pages'); unregister_widget('WP_Widget_Calendar'); unregister_widget('WP_Widget_Archives'); // unregister_widget('WP_Widget_Meta'); // unregister_widget('WP_Widget_Search'); // unregister_widget('WP_Widget_Text'); // unregister_widget('WP_Widget_Categories'); // unregister_widget('WP_Widget_Recent_Posts'); // unregister_widget('WP_Widget_Recent_Comments'); unregister_widget('WP_Widget_RSS'); unregister_widget('WP_Widget_Tag_Cloud'); // unregister_widget('WP_Nav_Menu_Widget'); } add_action('widgets_init', 'remove_default_widgets', 11);
Moving widget code into a separate php file
If you plan on adding lots of widget areas I would then suggest moving these into a seperate file.
Then adding the following code or something similar to the functions.php file:
/* Include widget php file */ include_once ( 'widgets.php' );
Check my other tutorial on including multiple files.
Resources:
community.getbeans.io/discussion/beans-html-api-visual-hooks-guide
https://developer.wordpress.org/reference/functions/is_page/
php.net/manual/en/language.operators.comparison.php
https://community.getbeans.io/discussion/what-about-a-visual-hook-guide/
https://www.getbeans.io/documentation/markup-and-attributes/
https://www.getbeans.io/documentation/adding-a-widget-area/
No comment yet, add your voice below!