Add Widget area after the Header of Genesis theme


Add this into functions.php

genesis_register_sidebar( array(
'id' => 'custom-widget',
'name' => __( 'Custom Widget', 'wbxpress' ),
'description' => __( 'Custom Widget Area', 'wbxpress' ),
) );

add_action( 'genesis_after_header', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
                genesis_widget_area( 'custom-widget', array(
		'before' => '<div class="custom-widget widget-area">',
		'after'  => '</div>',
    ) );
}

Then add this into styles.php

.custom-widget {
	background-color: #fff;
	padding: 30px 20px;
	margin: 30px auto 0;
}
@media only screen and (min-width: 960px) {
	.custom-widget {
		max-width: 1080px;
	}
	.custom-widget .widget {
		float: left;
		padding: 0 20px;
		width: 25%;
	}
}

The above style is for 4 columns widget area. You can change the width to customize according to your requirement. for example width: 50%; for 2 column layout.


Leave a Reply

Your email address will not be published.