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.
You have saved me hours of time! I’d looked all over the net, and been banging my head on the wall trying to get my code to work. Thank you!!
Hi Chuck, glad to hear it worked for you. 🙂
Thank you so much! So very much. I had just accepted that I would never have page navigation. Nope, not the case.
You’re welcome Jamaise and thanks for the feedback.
Thank you so much for posting this! I was scared to change the PHP but I can’t believe how easy it was.
Hi Marie, thanks for letting me know. It’s always good to hear that. 🙂
Hi,
Just one question with this theme.. I would think the pagination would have the “next page” of posts look much like the front page instead of going to a content archive look without images? Here’s a link to the blog in question:
http://blog.boulderviewapartments.com/
Please note, I modified the functions.php file to only show 5 posts as it works better for the desired look/layout.
Joe
Hi Joe,
The front page setup employs the use of widgets that you can follow from the Themes Setup page. For any other specific modifications beyond their demo, it’s best to use their community forums.
Hope it helps.
I was able to modify the php file and the navigation now shows at the bottom of the home page but when I click on page 2, 3, etc. the home page just reappears again — it isn’t changing the pages. Any tips? Thanks!
Hi Pam,
Sorry for the late response, but I checked your website, it seems that you already got it figured out? Thanks for stopping by.
This page seems to be the answer to my problem (of lack of home page navigation), and I’d love to follow the directions. However, I am not seeing any highlighting anywhere in the code, to see where the changes need to be. Is it a color or bolded? It all looks the same to me.
Hoping for a quick response. Thanks!
Hi Laura,
I think there was a caching issue earlier that didn’t refresh the highlighting. Please try to clear your cache on your browser by pressing CTRL-F5 and you should see the highlights. Thanks.
Dear Platt –
Yes, I do see the highlighting now. Thank you. Now I just need courage. LOL I’ve got all of the necessary windows open, but I’m terrified to make the changes and bring my site down! Nerve-wracking stuff. :/
Thanks for your reply.
As long as you back up everything you should be fine. 🙂
Well I got brave, was ever so careful, and got the whole parson error; syntax error, anyway. I restored it, after trying to tweak for awhile. I want the home page pagination bad! The problem seemed to be in the area of lines 33 (33-35). Does the spacing on each line, with those bracket symbols, have to be exact? Are we adding one? I tried to visually match it. My numbered lines are off from the above anyway. But I was sure to show a skipped line when there was one, etc. I hate to give up.
Laura, I suggest you copy the source and paste it on your text editor and when you’re editing something like this, it helps to use something other than Notepad (Notepad++ would be good) as it can help you with the closing brackets.
Yes, all highlighted lines are addition to the original code. The spacing doesn’t have to be exact, but the number of closing brackets have to match the opening.
Actually, if you don’t have any other customization on your front-page.php, you can copy this whole code and use it as your front page.
Thanks for the code sharing
You’re very welcome Vivek. Thanks for stopping by. 🙂
Thanks. you are my hero…
You’re welcome imti.
Hi, thank you for putting this tutorial up. I’m running into a problem which I think is because I’m using Metro Pro rather than the Lifestyle theme. I got it to work at one point but one of the widgets was off. After trying a few things, I just kept getting error messages.
Can you help? Here’s the original front page php:
”,
‘after’ => ”,
) );
if ( is_active_sidebar( ‘home-middle-left’ ) || is_active_sidebar( ‘home-middle-right’ ) ) {
echo ”;
genesis_widget_area( ‘home-middle-left’, array(
‘before’ => ”,
‘after’ => ”,
) );
genesis_widget_area( ‘home-middle-right’, array(
‘before’ => ”,
‘after’ => ”,
) );
echo ”;
}
genesis_widget_area( ‘home-bottom’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
genesis();
As you can see, the widget area is a little different than Lifestyle. The last section for Home Bottom isn’t followed by an echo tag as it is in your example. I’m not sure if you’re still monitoring comments but any help would be greatly appreciated. Here’s the temp site where I’m working on this: http://www.billhibbler.gigtime.com/