How To Register Custom Widget Areas In Genesis The Correct Way

Custom widget areas come in handy when you want to set-up, say an additional sidebar on your site or a separate section on an existing page to set up custom content. Custom widget areas can be used for different purposes like:

1. Creating widgetized homepage: To convert your home page into a landing page by employing various widget areas to pitch your services, showcase your portfolio, for sharing the client testimonials, etc.
2. Creating widgetized areas across the site: For displaying custom content on different areas on your website — displaying a CTA area, optin form or a newsletter subscription area below the header or above the footer across the website.

In order to set-up the custom widget areas, you need to:

1. Register a custom widget area.
2. Display the registered widget area on the front-end using a hook.

Creating / Registering a custom widget area

The first step is to register a widget area so that it shows up on the WordPress Widgets screen. Genesis offers genesis_register_sidebar() function to register a widget area. Add the following code to your functions.php to register a widget area:

genesis_register_sidebar(
    array(
        'id'          => 'custom-widget-area',
        'name'        => 'Custom Widget Area',
        'description' => 'This widget area can be used to display custom content as desired.'
   )
);

This will create a widget area named Custom Widget Area under Appearance > Widgets. The widgets dragged into this widget area will not show up on the site until we hook this widget area to some location.

Displaying the custom widget area

After registering the custom widget area, we need to use the appropriate action hook to display the registered widget area on the site front-end. For this, Genesis provides genesis_widget_area() function to output the widget area markup. Here’s the code snippet to hook the widget area above the footer widgets (after the main site content):

add_action( 'genesis_before_footer', 'bt_display_custom_widget_area', 5 );
function bt_display_custom_widget_area() {
    genesis_widget_area( 'custom-widget-area',  // ID of the widget area that we registered earlier
        array(
            'before' => '<aside class="custom-widget-area widget-area"><div class="wrap">',  // Markup to  be added before the widget output
            'after'  => '</div></aside>' // Markup to  be added after the widget output
        )
    );
}

This widget area will be visible across the site. You can use conditional tags to display it on specific pages, post or post types etc.

Deciding upon the markup of the custom widget area

Custom widget areas can be used for building landing pages as well as for creating widgetized areas across the site.

For the landing pages, the purpose of widget areas is to divide the page into different sections to introduce the services, highlight the features, showcase the portfolio, etc. The content in various sections on the landing pages on the whole is thematically-related. Think of it as various sections of the page.

For widgetized areas across the site, the purpose of widget areas is to add CTA area(s) or opt-in form(s) which is tangentially related to the content of the page (and is not a part of the page content). Think of this as aside.

Depending upon the purpose of the widget area, you will have to make a decision — should I use <aside> or <section> markup for the widget area?

Let me make it simple:

• Use <aside> for tangentially related content like opt-in form, related posts, etc.
• Use <section> for thematically-related content like various section of the home page displaying various services, features, highlights, etc.

As per HTML5 standards, using <aside> or <section> has its own SEO implications.

SEO Implications — Aside and Section

The <aside> tag in HTML5 defines the content that is related to the main content around it but is not central to it. This means if you’re using custom widget areas to drop in subscription form or related stories go with <aside>.

The <section> tag, as the name suggests defines a new section for a block of content and groups the content into different subjects so that each section defines the purpose of that content block with respect to the main content of page. This allows the search engine crawlers to respect the content inside the widget area with respect to the purpose of the page and consider it as the part of the main content of the page. So when you are creating the custom widget areas for landing page go with <section>.

Here’s the code snippet to use <section> markup for custom widget area:

add_action( 'genesis_before_footer', 'bt_display_custom_widget_area', 5 );
function bt_display_custom_widget_area() {

    genesis_widget_area( 'custom-widget-area',  // ID of the widget area registered earlier
        array(
            'before' => '<section class="custom-widget-area"><div class="wrap">',  // Markup to  be added before the widget output
            'after'  => '</div></section>', // Markup to  be added after the widget output
        ) );

}

Quick Tips for registering custom widget areas in Genesis

You can use Genesis Simple Sidebars to add new widget areas to your site on desired locations on per page/post basis with ease. But, when it comes to customizing the widget area as per your needs and to make sure that it is SEO friendly, you may like to hand code it into your theme.

Coding the widget areas directly into your theme’s functions.php or other core files is not advisable because you may lose the customizations upon theme update/upgrade. That is why, I recommend using the WP Designer plugin that allows you to keep your customizations separate from the core theme files. Install and activate WP Designer and add the above code snippet(s) to functions.php in the wp-designer directory located in uploads folder. Works like charm! 🙂