askdesign
1/7/2016 - 11:46 PM

Sample Widgetized Front Page with Full Width Sections in Genesis

January 19, 2015 by Sridhar Katakam

<!--- Create a new slider named say, ‘Home Slider’ by going to Soliloquy > Add New. --->
<!--- Sample HTML for the ‘Image Caption’ textarea: --->

<div class="slide-caption-text wrap">
Ut bibendum condimentum magna vitae fermentum. Vestibulum auctor rhoncus elit, tempus ullamcorper massa vehicula quis. Proin vestibulum sed velit id laoreet. Donec sit amet tellus et lectus tristique aliquet ut.

<p><a href="#" class="button">Explore <span class="dashicons dashicons-arrow-right-alt"></span></a></p>
</div>

<!--- In Soliloquy’s configuration, set the Slider Dimensions to Full Width and specify your slide images’ width and height. In my test site I used 1600 x 389. You might want to tick ‘Pause on Hover?’. --->
// Step 4
// Create/upload a file named front-page.php in the child theme directory having the following:

<?php
/**
 * Front Page with full width sections.
 *
 * @author      Sridhar Katakam
 * @license      GPL-2.0+
 */

//* Enqueue Front page scripts and styles
add_action( 'wp_enqueue_scripts', 'sk_front_page_scripts_styles' );
function sk_front_page_scripts_styles() {

	wp_enqueue_style( 'bxslider-styles', get_stylesheet_directory_uri() . '/css/jquery.bxslider.css' );
	
	wp_enqueue_script( 'bxslider-js', get_stylesheet_directory_uri() . '/js/jquery.bxslider.min.js', array( 'jquery' ), '4.1.2', true );

	wp_enqueue_script( 'bxslider-init', get_stylesheet_directory_uri() . '/js/bxslider-init.js', array( 'bxslider-js' ), '1.0.0', true );

}

/**
 * Homepage Content
 *
 */
function sk_homepage_content() {

	//* Home Slider (Full Width) section
	genesis_widget_area( 'home-slider', array(
		'before'	=> '<div class="home-slider home-section home-odd">',
		'after'		=> '</div>',
	) );

	//* Horizontal Opt-in
	genesis_widget_area( 'horizontal-optin', array(
		'before' => '<div class="horizontal-optin home-section home-even"><div class="wrap">',
		'after' => '</div></div>',
	));

	//* 2-column Home Featured section
	echo '<div class="home-featured home-section home-odd"><div class="wrap">';
		genesis_widget_area( 'home-featured-left', array(
			'before'	=> '<div class="home-featured-left one-half first">',
			'after'		=> '</div>',
		) );

		genesis_widget_area( 'home-featured-right', array(
			'before'	=> '<div class="home-featured-right one-half">',
			'after'		=> '</div>',
		) );
	echo '</div></div>';

	//* Home Blog Posts section
	genesis_widget_area( 'home-blog', array(
		'before'	=> '<div class="home-blog home-section home-even"><div class="wrap">',
		'after'		=> '</div></div>',
	) );

	//* Home Testimonials section
	genesis_widget_area( 'home-testimonials', array(
		'before'	=> '<div class="home-testimonials home-section home-odd"><div class="wrap">',
		'after'		=> '</div></div>',
	) );

}
add_action( 'sk_content_area', 'sk_homepage_content' );

// Remove 'site-inner' from structural wrap
add_theme_support( 'genesis-structural-wraps', array(
	'header',
	'nav',
	'subnav',
	// 'site-inner',
	'footer-widgets',
	'footer'
) );
 
// Build the page
get_header();
do_action( 'sk_content_area' );
get_footer();
//* Step 3
//* Add the following in child theme’s functions.php:

//* Enqueue Sitewide scripts and styles
add_action( 'wp_enqueue_scripts', 'sk_sitewide_scripts_styles' );
function sk_sitewide_scripts_styles() {

	wp_enqueue_script( 'sitewide', get_stylesheet_directory_uri() . '/js/sitewide.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_style( 'dashicons' );

}

//* Register widget areas
genesis_register_sidebar( array(
	'id'          => 'horizontal-optin',
	'name'        => __( 'Horizontal Optin', 'themename' ),
	'description' => __( 'This is the Horizontal Opt-in form section', 'themename' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-slider',
	'name'        => __( 'Home Slider', 'themename' ),
	'description' => __( 'This is the Home Slider section', 'themename' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-featured-left',
	'name'        => __( 'Home Featured Left', 'themename' ),
	'description' => __( 'This is the Home Featured Left section', 'themename' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-featured-right',
	'name'        => __( 'Home Featured Right', 'themename' ),
	'description' => __( 'This is the Home Featured Right section', 'themename' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-blog',
	'name'        => __( 'Home Blog', 'themename' ),
	'description' => __( 'This is the Home Blog section', 'themename' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-testimonials',
	'name'        => __( 'Home Testimonials', 'themename' ),
	'description' => __( 'This is the Home Testimonials section', 'themename' ),
) );

add_action( 'genesis_after_header', 'sk_optin_below_header' );
/**
 * Display Home Optin widget area below the header
 *
 * Context: Everywhere excerpt the front page
 *
 * @author Sridhar Katakam
 * @link   http://sridharkatakam.com/collapsible-horizontal-opt-form-genesis/
 */
function sk_optin_below_header() {

	if ( is_front_page() ) {
		return;
	}

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

}

//* Define a custom image size for Home Blog featured images
add_image_size( 'home-blog', 648, 351, true );
// Step 2
// Create a file named sitewide.js in the child theme’s js directory having the following:
jQuery(function( $ ){

	$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

	$(".responsive-menu-icon").click(function(){
		$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 1024) {
			$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});

	$(".responsive-menu > .menu-item").click(function(event){
		if (event.target !== this)
		return;
			$(this).find(".sub-menu:first").slideToggle(function() {
			$(this).parent().toggleClass("menu-open");
		});
	});

});
In this article I provide a working example of how Bill Erickson’s code can be used as a foundation for creating a typical front page in WordPress using Genesis.

Our front page is going to be made up of these sections:

    Header (sitewide) – site title/logo at left and custom menu in ‘Header Right’ widget area.
    Home Slider – Full width Soliloquy slider.
    Home Horizontal Opt-in (appears below header on inner pages) – using Genesis eNews Extended plugin.
    2-column (50/50) Home Featured section – Text widget at left and a image widget in the right.
    Home Blog Posts section – 4 Posts set to appear side-by-side using Genesis column classes via Genesis Sandbox Featured Content Widget plugin’s widget.
    Home Testimonials section – Hard-coded i.e., pre-set (can be set to be pulled from a Testimonials CPT, but not covering that now) Testimonials text being shown 1 at a time with carousel powered by bxSlider.

The solution below is written for Genesis Sample child theme and might need to be modified if you are using another Genesis child theme. Mobile responsiveness has been taken care of incl. a hamburger menu that’s set to appear at screen widths of 1024px and less.

Plugins used:

    Soliloquy Premium
    Regenerate Thumbnails
    Genesis Sandbox Featured Content Widget
    Genesis eNews Extended
    Image Widget

External jQuery script used: bxSlider for Testimonials carousel.
Step 7

Go to Appearance > Widgets and populate the widget areas. Below you can find info regarding a few which I feel are useful to refer to.
/*--- Step 5
Add the following in child theme’s style.css: ---*/
/* # Sample Widgetized Front Page with Full Width Sections
---------------------------------------------------------------------------------------------------- */

.entry-header {
	margin-bottom: 40px;
}

/* To avoid noticeable vertical movement for hover state of Soliloquy's Control Nav (typically circles) and bxSlider's left and right arrows */

.soliloquy-container .soliloquy-control-nav li a,
.soliloquy-theme-classic .soliloquy-pager-link,
.bx-wrapper .bx-controls-direction a {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

/* Responsive Menu */

.responsive-menu-icon {
	display: none;
	margin-bottom: -1px;
	text-align: center;
	cursor: pointer;
}

.responsive-menu-icon::before {
	display: inline-block;
	margin: 0 auto;
	padding: 10px;
	font: normal 20px/1 "dashicons";
	content: "\f333";
}

/* General */

.home .site-inner {
	max-width: none;
	padding-top: 0;
}

.site-header .widget-area {
	margin-top: 7px;
}

.home-section {
	padding-top: 40px;
	padding-bottom: 40px;
}

.home-odd {
	background: #fff;
}

.home-even {
	background: #f5f5f5;
}

.home-section .widget-title {
	font-size: 30px;
}

/* Home Slider section */

.home-slider {
	padding-top: 0;
	padding-bottom: 0;
}

.home-slider .soliloquy-container {
	margin-bottom: 0 !important;
}

.home-slider .soliloquy-container .soliloquy-pager {
	padding-left: 5px;
	text-align: left;
}

.soliloquy-container .slide-caption-text {
	padding: 10px 0;
	line-height: 1.3;
}

.soliloquy-container .wrap {
	margin: 0 auto;
}

.soliloquy-caption a.button {
	display: inline-block;
	margin-top: 20px;
	padding: 10px;
	color: #fff;
	background: #f68700;
	font-size: 16px;
	font-weight: bold;
}

.soliloquy-caption a.button:hover {
	background: #fcaa00;
}

/* Opt-in below header */

.horizontal-optin {
	padding-top: 40px;
	background-color: #50c5b5;
}

.horizontal-optin .enews-widget {
	color: #fff;
}

.horizontal-optin .enews-widget p {
	float: left;
	width: 40%;
	margin-top: 7px;
	margin-bottom: 0;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

.horizontal-optin #subscribe {
	float: right;
	width: 60%;
}

.horizontal-optin .enews-widget input {
	float: left;
	width: 35%;
	margin-right: 10px;
	margin-bottom: 0;
	padding: 10px;
	border: 1px solid #38aa9a;
}

.horizontal-optin .enews-widget input[type="submit"] {
	width: auto;
	padding: 10px 34px;
	background-color: #222;
}

.horizontal-optin .enews-widget input[type="submit"]:hover {
	color: #fff;
	background-color: #000;
}

/* Home Blog section */

.home-blog .featured-content .entry {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.home-blog .featured-content .entry p {
	margin-bottom: 0;
}

/* Home Testimonials section */

p.testimonial-text:before {
	display: inline-block;
	padding-right: 5px;
	font: normal 20px/1 "dashicons";
	-webkit-font-smoothing: antialiased;
	vertical-align: top;
	content: "\f205";
}

.home-testimonials .bx-wrapper .bx-viewport {
	border: none;
	box-shadow: none;
}

.home-testimonials .bx-wrapper .bx-prev {
	left: -70px;
}

.home-testimonials .bx-wrapper .bx-next {
	right: -70px;
}

/* Site Footer */

.site-footer {
	color: #fff;
	background: #333;
}

/* Media Queries */

@media only screen and (max-width: 1240px) {
	.home-featured,
	.home-blog {
		padding-right: 2%;
		padding-left: 2%;
	}
}

@media only screen and (max-width: 1200px) {
	.horizontal-optin .enews-widget p {
		font-size: 16px;
		text-align: left;
	}

	.horizontal-optin .enews-widget input {
		width: 30%;
	}
}

@media only screen and (max-width: 1024px) {
	.site-header .widget-area,
	.title-area {
		width: 100%;
	}

	.site-header .title-area {
		text-align: center;
	}

	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}

	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}

	.genesis-nav-menu.responsive-menu .menu-item {
		margin: 0;
	}

	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}

	.genesis-nav-menu.responsive-menu .current-menu-item > a,
	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu a,
	.genesis-nav-menu.responsive-menu a:hover {
		padding: 16px 20px;
		background: none;
		line-height: 1;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}

	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		float: right;
		z-index: 9999;
		right: 0;
		height: 16px;
		padding: 16px 20px;
		font: normal 16px/1 "dashicons";
		text-align: right;
		content: "\f347";
	}

	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f343";
	}

	.genesis-nav-menu.responsive-menu .sub-menu {
		position: relative;
		z-index: 99;
		left: auto;
		width: 100%;
		padding-left: 25px;
		border: none;
		opacity: 1;
		-webkit-transition: opacity 0.4s ease-in-out;
		-moz-transition: opacity 0.4s ease-in-out;
		-ms-transition: opacity 0.4s ease-in-out;
		-o-transition: opacity 0.4s ease-in-out;
		transition: opacity 0.4s ease-in-out;
	}

	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		margin: 0;
	}

	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		position: relative;
		width: 100%;
		padding: 12px 20px;
		border: none;
		background: none;
	}
}

@media only screen and (max-width: 960px) {
	.horizontal-optin .wrap {
		padding-right: 5%;
		padding-left: 5%;
	}

	.horizontal-optin .enews-widget p {
		float: none;
		width: 100%;
		margin-bottom: 20px;
		text-align: center;
	}

	.horizontal-optin #subscribe {
		float: none;
		width: 100%;
	}

	.horizontal-optin .enews-widget input {
		width: 100%;
		margin-bottom: 20px;
	}

	.horizontal-optin .enews-widget input[type="submit"] {
		float: none;
		width: 100%;
	}
}

@media only screen and (max-width: 950px) {
	.home-testimonials .bx-controls-direction {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	.home .site-inner {
		padding-right: 0;
		padding-left: 0;
	}

	.home-section .widget-area {
		margin-bottom: 30px;
	}
	.home-section .widget-area:last-child {
		margin-bottom: 0;
	}

	.home-featured-left {
		margin-bottom: 40px;
	}

	.home-blog .featured-content .entry {
		margin-bottom: 30px;
	}

	.home-blog .featured-content .entry a.aligncenter {
		margin-bottom: 10px;
	}
}
// Step 1
// Download jquery.bxslider.zip and extract its contents.
// Upload ‘jquery.bxslider.css’ and ‘images’ folder to your child theme directory/css (create, if not existing).
// Upload ‘jquery.bxslider.min.js’ to your child theme directory/js (create, if not existing).
// Create a file named bxslider-init.js to the same location having the following:

jQuery(document).ready(function($) {
	$('.home-testimonials .testimonials').bxSlider({
		minSlides: 1,
  		maxSlides: 1,
  		slideWidth: 800,
	});
});