Sridhar Katakam

Genesis and WordPress Tutorials

Home Featured widget in Genesis Sample

by 2 Comments

This tutorial provides the steps to

  • register a Home Featured widget area
  • display the widget area below the header on the front page
  • modify JS so the top margin (equal to the height of the fixed site header) applies to the widget area on the homepage and to .site-inner on every other page
  • add CSS to set a background image for the Home Featured section with a dark overlay

in Genesis Sample child theme for Genesis.

While the tutorial has been written for Genesis Sample 2.7.1, it should work with a few adjustments in any Genesis theme

Step 1

Edit child theme’s functions.php. 
// Register `home-featured` widget area.
genesis_register_widget_area(
	array(
		'id'          => 'home-featured',
		'name'        => __( 'Home Featured', 'my-theme-text-domain' ),
		'description' => __( 'This is the home featured section.', 'my-theme-text-domain' ),
	)
);

add_action( 'genesis_after_header', 'custom_home_featured' );
/**
 * Display `home-featured` widget area below the header.
 */
function custom_home_featured() {
	// if this is not the front page, abort.
	if ( ! is_front_page() ) {
		return;
	}

	genesis_widget_area( 'home-featured', array(
		'before' => '<div class="home-featured widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );
}

Step 2

Edit /js/genesis-sample.js.

Change

/**
 * Adjust site inner margin top to compensate for sticky header height.
 *
 * @since 2.6.0
 */
var moveContentBelowFixedHeader = function() {
	var siteInnerMarginTop = 0;

	if( $('.site-header').css('position') === 'fixed' ) {
		siteInnerMarginTop = $('.site-header').outerHeight();
	}

	$('.site-inner').css('margin-top', siteInnerMarginTop);
},

to

/**
 * Adjust site inner margin top to compensate for sticky header height.
 *
 * @since 2.6.0
 */
var moveContentBelowFixedHeader = function() {
	var siteInnerMarginTop = 0;

	if( $('.site-header').css('position') === 'fixed' ) {
		siteInnerMarginTop = $('.site-header').outerHeight();
	}

	if ( $( 'body' ).hasClass( 'home' ) ) {
		$( '.home-featured' ).css( 'margin-top', siteInnerMarginTop );
	} else {
		$( '.site-inner' ).css( 'margin-top', siteInnerMarginTop );
	}
},

Step 3

Upload your desired background image for the Home Featured section as home-featured.jpg in child theme’s images directory.

Edit style.css.

Add the following before the media queries:

.home-featured {
	padding: 200px 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(images/home-featured.jpg);
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/home-featured.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
}

.home-featured .wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 30px;
	padding: 40px;
	color: #fff;
}

.home-featured .widget:last-child {
	margin-bottom: 0;
}

.home-featured h2 {
	font-size: 42px;
}

.home-featured h3 {
	margin-bottom: 0;
}

Step 4

At Appearance > Widgets, drag your desired widget into the Home Featured widget area and configure it.

Example:

    • >