Front Page Widget Issue

[theKatrinaM]

My widgets for my home page are appearing above my header. I'm not sure why it's happening I've check the coding serval times.

My PHP:

<?php

add_action( 'genesis_meta', 'riot_home_genesis_meta' );
/**
 * Add widget support for front page. If no widgets active, display the default loop.
 *
 */
function riot_home_genesis_meta() {

	if ( is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' )|| is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-middle' ) || is_active_sidebar( 'home-middle-right' )) {

		//* Force full-width-content layout setting
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

		// Add riot-home body class
		add_filter( 'body_class', 'riot_body_class' );
		function riot_body_class( $classes ) {
   			$classes[] = 'riot-home';
  			return $classes;
		}

		// Remove the default Genesis loop
		remove_action( 'genesis_loop', 'genesis_do_loop' );

		// Add homepage widgets
		add_action( 'genesis_loop', 'riot_homepage_widgets' );

	}

function riot_homepage_widgets() {

		genesis_widget_area( 'home-top', array(
		'before' => '<div class="home-top widget-area">',
	) );

 if ( is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) ) {

		echo '<div class="home-top">';

		genesis_widget_area( 'home-top-left', array(
			'before' => '<div class="home-top-left widget-area">',
		) );

		genesis_widget_area( 'home-top-right', array(
			'before' => '<div class="home-top-right widget-area">',
		) );

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

if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-middle' )|| is_active_sidebar( 'home-middle-right' ) ) {

		echo '<div class="home-middle">';

		genesis_widget_area( 'home-middle-left', array(
			'before' => '<div class="home-left widget-area">',
		) );

		genesis_widget_area( 'home-middle-middle', array(
			'before' => '<div class="home-middle widget-area">',
		) );

		genesis_widget_area( 'home-middle-right', array(
			'before' => '<div class="home-right widget-area">',
		) );

		echo '</div>';
	
	}
}

genesis();

My CSS:

/* Home Page
--------------------------------------------- */
.home-top {
	overflow: hidden;
}

.home-top-left {
	float: left;
	width: 785px;
}

.home-top-right {
	background: #f3f3f3;
	float: right;
	height: 415px;
	padding: 20px;
	text-align: center;
	width: 330px;
	position: relative;
	top: -420px;
	left: 350px;
}

.home-top-right .widget-title:before {
	color: #f21062;
	content: "\f307";
	display: block;
	-webkit-font-smoothing: antialiased;
	font: normal 30px/1 'dashicons';
	padding-bottom: 20px;
	vertical-align: top;
}

.home-middle {
	clear: both;
	margin: 30px 0;
	overflow: hidden;
}

.home-middle-left,
.home-middle-middle,
.home-middle-right {
	padding: 13px;
	text-align: center;
}
.home-middle-left .widget-title:before {
	color: #f21062;
	content: "\f086";
	display: block;
	-webkit-font-smoothing: antialiased;
	font: normal 30px/1 'fontawesome';
	padding-bottom: 20px;
	vertical-align: top;
}

.home-middle-middle .widget-title:before {
	color: #f21062;
	content: "\f19d";
	display: block;
	-webkit-font-smoothing: antialiased;
	font: normal 30px/1 'fontawesome';
	padding-bottom: 20px;
	vertical-align: top;
}

.home-middle-right .widget-title:before {
	color: #f21062;
	content: "\f019";
	display: block;
	-webkit-font-smoothing: antialiased;
	font: normal 30px/1 'fontawesome';
	padding-bottom: 20px;
	vertical-align: top;
}

---

“People are only supposed to believe the legends not understand them.” Norman Collins
Design | Blog

https://riotcustoms.com/

[WisdmLabs]

Hi,
Try changing the hook from 'genesis_meta' to 'get_header'

Refer this article for creating widgetized homepage step by step

---

http://wisdmlabs.com/

[theKatrinaM]

Thanks @WisdmLabs I was able to get it to work keeping the 'genesis_meta'

`<?php

add_action( 'genesis_meta', 'riot_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function riot_home_genesis_meta() {

if ( is_active_sidebar('home-top-left' ) || is_active_sidebar('home-top-right') || is_active_sidebar( 'home-middle1' ) || is_active_sidebar( 'home-middle2' ) || is_active_sidebar( 'home-middle3' )|| is_active_sidebar( 'home-bottom' )) {

//* Force full-width-content layout setting
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Add riot-home body class
add_filter( 'body_class', 'riot_body_class' );
function riot_body_class( $classes ) {
$classes[] = 'riot-home';
return $classes;
}

// Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

// Add homepage widgets
add_action( 'genesis_loop', 'riot_homepage_widgets' );

}
}

function riot_homepage_widgets() {

if ( is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' )) {

echo '<div class="home-top">';

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

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

echo '</div>';

}

if ( is_active_sidebar( 'home-middle1' ) || is_active_sidebar('home-middle2') || is_active_sidebar( 'home-middle3' )) {

echo '<div class="home-middle">';

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

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

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

echo '</div>';

genesis_widget_area( 'home-bottom', array(
'before' => '<div class="home-bottom widget-area">',
) );

}
}

genesis();

---

“People are only supposed to believe the legends not understand them.” Norman Collins
Design | Blog

[Author]

Posts