Tutorial: Adding a widget location to a Beans Child theme

I plan on adding the following tutorial + some screenshots to my web site easywebdesigntutorials.com and would really like some feedback before I do so. Thank you.

Adding a widget location to a Beans Framework child theme

I am using the Beans Starter Child theme: http://www.getbeans.io/documentation/starter-child-theme/ and have added a few pages, posts and made a menu that I added to the primary menu. The starter theme for Beans has by default these widget locations:

• A Sidebar Primary
• Sidebar Secondary
• Off-Canvas Menu (seen on smaller screens)

1. Be sure that Development mode is active. Go to Appearance -> Settings -> and click Enable development mode. (Enabling development mode activates the data-markup-id-sections name.) Beans-Framework-Enable-Development-Mode

2. Go to the frontend and view the theme. Right click the title area and select Inspect Element. Look for data-markup-id sections. These are sections to where one can add a widget location. Beans-Framework-Inspect-Element-data-markup-id

A list of some of the data-markup-id sections:

beans_body beans_site beans_header beans_fixed_wrap[_header] beans_site_branding beans_site_title_link beans_site_title_tag beans_primary_menu beans_main beans_fixed_wrap[_main] beans_main_grid beans_primary beans_content beans_post beans_post_header beans_post_title beans_post_body beans_post_content beans_sidebar_primary beans_footer beans_footer_credit beans_footer_credit_left beans_footer_credit_right beans_primary_offcanvas_menu

Inside the child theme -> open functions.php. There is an option to either use CSS or Less.

• Comment out or remove the first add_action section to if your using CSS.
• Comment out or remove the second add_action section if your using Less. Here is an example on adding a widget location above the header.

/*--- 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() {
 ?>

 <?php
}

A few things regarding the code:

1. Registering a widget location. The name and description is seen in the widget screen. Beans type = grid means that adding additional widget they will be setup to look like they are in a grid.
2. The widget location uses the data-markup-id: beans_header_before_markup Meaning the widget location will be at the top of the page. Displaying the widget code can be done for all pages/posts or the code can be added to a page template and only seen by pages using the specific template. Add the css class name widget-above-header to your CSS file and style it. UK-container = Beans uses UiKit to support in the layout and design of your site.

Hooks - placing widget locations

I am using header as an example. Change the word header with any of the other data-markup-id sections.

• 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).

Resources: https://community.getbeans.io/discussion/what-about-a-visual-hook-guide/ http://www.getbeans.io/documentation/markup-and-attributes/

Oops, there's a typo in your code in the Display... area.

add_action( 'beans_header_before_markup’

That snippet needs to end with a straight-up single quote, not a curly quote.

Thanks Wyn. I have adjusted the code.