Is it possible for me to achieve the following with the News Pro theme?
- Add a Home Center widget area below the Home Left and Home Right which would cover the whole length of the above two widgets combined
- Repeat the Home Left and Home Right widget just below the Home Center widget
Yes, not only is it possible, this is the same process to follow for any Studio Press theme.
First you need to register the widget areas. Add this to functions.php:
genesis_register_sidebar( array( 'id' => 'home-center', 'name' => __( 'Home - center', 'news' ), 'description' => __( 'This is the center section of the homepage.', 'news' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-left-2', 'name' => __( 'Home - Middle Left 2', 'news' ), 'description' => __( 'This is the second middle left section of the homepage.', 'news' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-right-2', 'name' => __( 'Home - Middle Right 2', 'news' ), 'description' => __( 'This is the second middle right section of the homepage.', 'news' ), ) );
Next, you have to modify the home page. Open front-page.php and replace it with this code:
'', ) ); } function news_homepage_widgets() { if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) { echo ''; genesis_widget_area( 'home-middle-left', array( 'before' => ''; } if ( is_active_sidebar( 'home-center' ) ) { genesis_widget_area( 'home-center', array( 'before' => ' ', ) ); genesis_widget_area( 'home-middle-right', array( 'before' => ' ', ) ); echo ' ', ) ); } if ( is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) ) { echo ''; genesis_widget_area( 'home-middle-left-2', array( 'before' => ''; } genesis_widget_area( 'home-bottom', array( 'before' => ' ', ) ); genesis_widget_area( 'home-middle-right-2', array( 'before' => ' ', ) ); echo ' ', ) ); } genesis();
Last you have to apply the CSS.
Find the classes for the home page in style.css around line 1287 and replace them with this:
/* Home Page --------------------------------------------- */ .home-top { background-color: #f3f3f3; border-bottom: 1px solid #e3e3e3; clear: both; padding: 20px 20px 0; } .home-top .featured-content .entry-title { font-size: 30px; } .home-middle-left, .home-middle-left-2 { border-right: 1px solid #e3e3e3; float: left; padding: 20px 20px 0; width: 50%; } .home-middle-right, .home-middle-right-2 { float: right; padding: 20px 20px 0; width: 50%; } .home-bottom, .home-center { border-top: 1px solid #e3e3e3; clear: both; padding: 20px 20px 0; }
Its a greatly written and highly elaborated post. Tons of thanks. It helped me a lot.
God bless you….!
Thanks for your post.
It’s really helpful.
Can i share this on my webiste: http://www.zetarmold.com
Thanks
Hi Mike,
Thanks for asking to share the article. Please feel free to share it as long as you provide attribution to me and a link back to this site.
Regards,
Victor