• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Full Width Widgetized Front Page in Genesis

Last Updated on January 1, 2019 Favorited: 0 times

The new Genesis Sample is incredibly the best sample theme that can be used for any type of site. The minimal design, the inline logo, and mobile-first design make it perfect for everyone.

and if you still think it is not, then why we are? We are here to prove the above statement true, true and true.

In this article, we are going to learn about creating full-width Widgetized Front Page in Genesis Sample theme.

Before proceeding, make sure You have a static page for the front page is set on Your Reading Setting. If not,

Create a static Page titled say, ‘Home’ and set it as static “homepage” at Settings >> Reading

If you wish to have the list of blog posts appear at /blog/, create a static Page titled ‘Blog’ and select it as the “Posts page”.

Save Changes.

To know more about Reading setting, take a look at conditional tags and Front Page widgets in Genesis.

Now, we are ready to go. The steps are

  1. Register Front Page Widgets
  2. Display Front Page Widgets
  3. Sprinkle Some Love

1. Register Front Page Widgets

The first thing we need to do is to register some widgets for the front page. Here we are registering 4 widgets. Add this snippet in your child theme’s functions.php

//* Register front-page widget areas in functions.php
genesis_register_widget_area(
	array(
		'id'          => "front-page-1",
		'name'        => __( "Front Page 1", 'genesis-sample' ),
		'description' => __( "This is the front page 1 section.", 'genesis-sample' ),
	)
);
genesis_register_widget_area(
	array(
		'id'          => "front-page-2",
		'name'        => __( "Front Page 2", 'genesis-sample' ),
		'description' => __( "This is the front page 2 section.", 'genesis-sample' ),
	)
);
genesis_register_widget_area(
	array(
		'id'          => "front-page-3",
		'name'        => __( "Front Page 3", 'genesis-sample' ),
		'description' => __( "This is the front page 3 section.", 'genesis-sample' ),
	)
);
genesis_register_widget_area(
	array(
		'id'          => "front-page-4",
		'name'        => __( "Front Page 4", 'genesis-sample' ),
		'description' => __( "This is the front page 4 section.", 'genesis-sample' ),
	)
);

2. Display Front Page Widgets

The second thing we need to do is to hook those widgets for front-page.php and display it. Create a file named front-page.php and add the following snippets.

<?php
/**
 * Homepage Template.
 */

add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
/**
 * Adds attributes from 'entry', since this replaces the main entry.
 *
 * @author Bill Erickson
 * @link http://www.billerickson.net/full-width-landing-pages-in-genesis/
 *
 * @param array $attributes Existing attributes.
 * @return array Amended attributes.
 */
function be_site_inner_attr( $attributes ) {

    // Add a class of 'full-width' for styling this .site-inner differently.
    $attributes['class'] .= ' full-width';

    // Add an id of 'genesis-content' for accessible skip links.
    $attributes['id'] = 'genesis-content';

    // Add the attributes from .entry, since this replaces the main entry.
    $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );

    return $attributes;

}

// Displays header
get_header();

//* Display front-page widget areas
genesis_widget_area(
    'front-page-1', array(
    'before' => '<div class="front-page-1 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
    ) 
);
genesis_widget_area(
    'front-page-2', array(
    'before' => '<div class="front-page-2 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
    ) 
);
genesis_widget_area(
    'front-page-3', array(
    'before' => '<div class="front-page-3 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
    ) 
);
genesis_widget_area(
    'front-page-4', array(
    'before' => '<div class="front-page-4 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
    ) 
);

// Displays footer
get_footer();

Go to Appearance >> Widgets, drag your desired widgets into the Front Page 1, Front Page 2, Front Page 3 and Front Page 4 widget areas.

3. Sprinkle Some Love

There is no dish without salt. Add some CSS to make it more beautiful. Add this to your style.css or custom stylesheet file

/* Front Page with Full-Width Sections
-------------------------------------------------------------- */

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

.site-inner.full-width .wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

.site-inner.full-width .widget-area {
    padding: 50px 0;
}

.site-inner.full-width .widget-area:nth-child(odd) {
    background-color: #f5f5f590;
}

.site-inner.full-width .widget:last-child {
    margin-bottom: 0;
}

Result:

Tweak as per your need.

Related Posts

  • Magazine style Singular Post Design in Genesis Sample
  • Post Page Blog Archive Template with Layouts in Genesis
  • Site Inner with container background in Genesis Sample
  • Remove Responsive Menus in Genesis Sample 3.0.0+
  • Change 3 columns footer widgets in 4 columns widgets in Genesis

Categories: Free Content, Genesis Tutorials Tags: front-page, Genesis Sample, widgets

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service