As an update to their top seller Genesis Theme, StudioPress released a new Lifestyle Pro Theme with responsive design and HTML5. If you’re a member of My StudioPress, then you’ll have access to setup the theme exactly as it looks like in a demo, which is already very good to begin with.

I really like how the front page was setup, however I also want it to function as my main blog along with navigation links at the bottom of the content (see picture). Genesis standard loop is still going to be used for page two and beyond so they look like a normal blog page.

In order to achieve this, we need to modify the front-page.php file. The modification was based on the code from Bill Erickson for creating custom loop with pagination.

See the modified front-page.php below with all changes highlighted.

<?php
/**
 * This file adds the Home Page to the Lifestyle Pro Theme.
 *
 * @author StudioPress
 * @package Lifestyle Pro
 * @subpackage Customizations
 */

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

	if ( !is_paged() ) {

		if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-bottom-left' ) || is_active_sidebar( 'home-bottom-right' ) ) {
	
			// Force content-sidebar layout setting
			add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );
	
			// Add lifestyle-pro-home body class
			add_filter( 'body_class', 'lifestyle_body_class' );
	
			// Remove the default Genesis loop
			remove_action( 'genesis_loop', 'genesis_do_loop' );
	
			// Add homepage widgets
			add_action( 'genesis_loop', 'lifestyle_homepage_widgets' );

		}
	}
}

function lifestyle_body_class( $classes ) {

	$classes[] = 'lifestyle-pro-home';
	return $classes;
	
}

function lifestyle_homepage_widgets() {
	
	genesis_widget_area( 'home-top', array(
		'before' => '<div class="home-top widget-area">',
		'after'  => '</div>',
	) );
	
	genesis_widget_area( 'home-middle', array(
		'before' => '<div class="home-middle widget-area">',
		'after'  => '</div>',
	) );
	
	if ( is_active_sidebar( 'home-bottom-left' ) || is_active_sidebar( 'home-bottom-right' ) ) {

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

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

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

	// Based on https://gist.github.com/billerickson/3218052
	global $post;
	// arguments, adjust as needed
	$args = array(
				'post_type' => 'post',
				'posts_per_page' => get_option( 'posts_per_page' ),
				'post_status' => 'publish',
				'paged' => get_query_var( 'paged' )
			);

	/*
	Overwrite $wp_query with our new query.
	The only reason we're doing this is so the pagination functions work,
	since they use $wp_query. If pagination wasn't an issue,
	use: https://gist.github.com/3218106
	*/
	
	global $wp_query;
	$wp_query = new WP_Query( $args );
		 
	if ( have_posts() ) :
		while ( have_posts() ) : the_post();
		endwhile;
		
		do_action( 'genesis_after_endwhile' );			
	endif;

	wp_reset_query();
}

genesis();

The pagination on the front page should look like the picture below.

Lifestyle Pro is definitely worth checking out due to its capability as one of the modern responsive WordPress themes, its elegant look, and easy customization.

Caveat

You need to pay attention on the number posts to show on the Admin settings. Since the way it’s setup on the front page is showing 8 posts at a time, you need to make sure the setting is also for 8 posts at a time so the second page of the blog doesn’t skip any postings.

When you create a single or an archive page for a custom post type in Genesis 2.0 (HTML5), the formatting is not consistent with typical post. What’s apparent is the absence of <footer class="entry-footer"> tag in the custom post type page.

The difference between the two are highlighted on the codes below:
Custom Post Type

<p class="entry-meta">
  <span class="entry-categories">
    Filed Under:
    <a rel="category tag" title="View all posts in Uncategorized" href="https://www.itnota.com/category/uncategorized">Uncategorized</a>
  </span>
  <span class="entry-tags">
    Tagged With:
    <a rel="tag" href="https://www.itnota.com/tag/genesis-framework/">Genesis Framework</a>, 
    <a rel="tag" href="https://www.itnota.com/tag/html5/">HTML5</a>
  </span>
</p>

Typical Post

<footer class="entry-footer">
  <p class="entry-meta">
    <span class="entry-categories">
      Filed Under:
      <a rel="category tag" title="View all posts in Uncategorized" href="https://www.itnota.com/category/uncategorized">Uncategorized</a>
    </span>
    <span class="entry-tags">
      Tagged With:
      <a rel="tag" href="https://www.itnota.com/tag/genesis-framework/">Genesis Framework</a>, 
      <a rel="tag" href="https://www.itnota.com/tag/html5/">HTML5</a>
    </span>
  </p>
</footer>

The easiest way to do this is by utilizing using Genesis Shortcodes and replace the genesis_entry_footer with our own footer markup.

remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
add_action( 'genesis_entry_footer', 'my_entry_footer_markup_open', 5);
function my_entry_footer_markup_open() {
  echo '<footer class="entry-footer">';
}

add_filter( 'genesis_post_meta', 'my_post_meta' );
function my_post_meta( $post_meta ) {

  $post_meta = '[[post_categories]][[post_tags]]';

  return $post_meta;

}

remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
add_action('genesis_entry_footer', 'my_entry_footer_markup_close', 15);
function my_entry_footer_markup_close() {
  echo '</footer>';
}

Further Reading

Genesis Framework Shortcode Reference
Function Reference/wp get post tags
Function Reference/wp get post categories