How to Add New Widget Area in Genesis

One of the best things that you can get with Studiopress’ Genesis Framework is its flexibility to add new widget area. This kind of flexibility has become a lot easier compared few years ago when Genesis Framework is just starting up. There are some other ways in adding new widget areas if you are using other themes but unlike Genesis, they often use another set of plugin.

In Genesis however, we don’t have to add another plugin. All we need to do is to add a few codes. The first code that we need to add in functions.php of your child theme is this:

genesis_register_sidebar( array(
'id' => 'beforefooter-widget',
'name' => __( 'Custom Widget', 'genesis' ),
'description' => __( 'Custom Widget Area', 'childtheme' ),
) );

This code will register a new widget. Please take note of the following labels:

id = You will have to remember this one because this will be your call id.

name = This is the name that widget.

description = You need this so that you will be able to identify where your code is located.

The second code that you will have to install is where you will want the widgetized area to appear. You will have to be familiar with Genesis hooks location so that you will be able to identify the right call sign. So if you are not familiar with the Genesis hooks, no problem. Just refer in this Genesis visual hook guide. The code is:

add_action( 'genesis_before_footer', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
                genesis_widget_area( 'beforefooter-widget', array(
		'before' => '

‘, ) ); }

Please take note that “genesis_before_footer” is the hook. And you can refer to other hooks in the visual hook guide where you want it to appear. In this example, I prefer that it will appear before the the footer.

Now, the third code that we will have to know is the CSS. Please take note of the “id”

//* CSS

.beforefooter-widget {
     background-color: #fff;
     border-top: 1px solid #ececec;
     color: #999;
     clear: both;
     padding: 60px 0 36px;
}

Again, if you are familiar with CSS styling, this will be far more useful to you. The above CSS is what I have used for this example. Feel free to modify it if you want.

Have you ever used Genesis? Share your thoughts below.