Creating a static homepage with widgets

[dekraan]

Hi all,

I'm considering using the sample Genesis child theme to create a theme like parallax, centric or aspire, instead of actually using one of these themes, because I dont need many of the fancy extra's these themes offer, like parallax-scrolling.

I am not a good coder and only know some HTML and CSS.

Is this the way I should do it?

Add Widget After Header On Home or Front Page in Genesis

So: set a static homepage and then create several widgets and have Them appear on the homepage between the header and footer?

Second question: is this a smart Idea, or should I try to remove the parallax scrolling and other things from a pro theme instead? What benefits will I miss, using the sample theme?

[bluebird]

Hi Dekraan,

I am still relatively new to working with Genesis myself, but I am going to take a stab at answering your questions. I have begun work on customizing the Genesis Sample theme with goals in mind that are similar to yours, with the only difference being is that I want to keep the parallax (i.e.., background-attachment: fixed) effect.

I have a static home page (for now I'm just giving it the generic name "One"). To create a custom home page I have created a front-page.php file at the root of my theme directory with this code added:

<?php
/**
 * This file adds the Front Page to the genesis_sample Theme.
 *
 * @author StudioPress
 * @package genesis_sample
 * @subpackage Customizations
 */

add_action( 'wp_enqueue_scripts', 'genesis_sample_enqueue_home_scripts' );
/**
 * Enqueue Scripts
 */
function genesis_sample_enqueue_home_scripts() {

	wp_enqueue_script( 'genesis-home', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
	wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );

}

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

	if ( is_active_sidebar( 'home-widgets-1' ) || is_active_sidebar( 'home-widgets-2' ) || is_active_sidebar( 'home-widgets-3' ) || is_active_sidebar( 'home-widgets-4' ) || is_active_sidebar( 'home-widgets-5' ) || is_active_sidebar( 'home-widgets-6' ) || is_active_sidebar( 'home-widgets-7' ) ) {

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

		//* Add genesis_sample-pro-home body class
		add_filter( 'body_class', 'genesis_sample_body_class' );

		//* Remove breadcrumbs
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

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

		//* Add home featured widget
		add_action( 'genesis_after_header', 'genesis_sample_home_featured_widget', 1 );

		//* Add home widgets
		 add_action( 'genesis_before_footer', 'genesis_sample_home_widgets', 5 );

	}
}

function genesis_sample_body_class( $classes ) {

	$classes[] = 'genesis_sample-pro-home';
	return $classes;

}

function genesis_sample_home_featured_widget() {
 //This displays in header abouve nav menu and below site title

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

}

function genesis_sample_home_widgets() {

	echo '<div id="home-widgets" class="home-widgets">';

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

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

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

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

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

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

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

	echo '</div>';

}

genesis();

Then I added this code to my functions.php to register the widgets that appear on the front page:

//* Register widget areas
genesis_register_sidebar( array(
	'id'          => 'home-widgets-1',
	'name'        => __( 'Home 1', 'genesis-sample' ),
	'description' => __( 'This is the first section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-2',
	'name'        => __( 'Home 2', 'genesis-sample' ),
	'description' => __( 'This is the second section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-3',
	'name'        => __( 'Home 3', 'genesis-sample' ),
	'description' => __( 'This is the third section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-4',
	'name'        => __( 'Home 4', 'genesis-sample' ),
	'description' => __( 'This is the fourth section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-5',
	'name'        => __( 'Home 5', 'genesis-sample' ),
	'description' => __( 'This is the fifth section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-6',
	'name'        => __( 'Home 6', 'genesis-sample' ),
	'description' => __( 'This is the sixth section of the home page.', 'genesis' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-widgets-7',
	'name'        => __( 'Home 7', 'genesis' ),
	'description' => __( 'This is the seventh section of the home page.', 'genesis' ),
) );

I'm not entirely certain on whether or not this is the best approach and there may even be an error or two in my code somewhere (I'm assuming this being somewhat new to Genesis and WP theming), but it works for me.

If you want to get rid of the parallax effect, one thing that you can do is go into your CSS and change the background-image style properties (that are on the body tag of the front page) a bit by removing the background-attachment:fixed property and value. When I did this as a test though, my image became somewhat distorted. To remedy this I changed the background-size:cover value to background-size:contain .

I'm certain that Brad could explain this a lot more in depth (and with more clarity) as he has already done via the link that you have provided above.

Hope this helps!

[Brad Dalton]

1. You can add pretty much any themes front-page.php file to the Genesis Sample theme as long as you understand how to find all the CSS for each class as well as any PHP code in other files which needs copying over.

Bear in mind there's quite a lot of CSS and CSS for Media Queries which needs copying over.

2. If you're not a coder and don't have time to learn, you'd be better off using a theme which already includes the front page widgets out of the box. Any of the new HTML 5 Pro child themes are suggested.

---

Tutorials for StudioPress Themes.

[dekraan]

Hi Brad and Bluebird,

Thanks for your great replies!

I think sticking to a ready made template might be the best for now. You scared me straight, Brad!

But I am also enthousiastic about what code Bluebird sent and might try to figure out how to get what I want, and make it myself.

A follow up question: which theme is newest and in comparison easiest to edit?

[dekraan]

This reply has been marked as private.

[Author]

Posts