A user writes:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | <?php /** * This file adds the Home Page to the News Pro Theme. * * @author StudioPress * @package News Pro * @subpackage Customizations */ add_action( 'genesis_meta', 'news_home_genesis_meta' ); /** * Add widget support for homepage. If no widgets active, display the default loop. * */ function news_home_genesis_meta() { if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-center' ) || is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) ||is_active_sidebar( 'home-bottom' ) ) { // Force content-sidebar layout setting // add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' ); //* Force full-width-content layout add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' ); // Add news-home body class add_filter( 'body_class', 'news_body_class' ); } if ( is_active_sidebar( 'home-top' ) ) { // Add excerpt length filter add_action( 'genesis_before_loop', 'news_top_excerpt_length' ); // Add homepage widgets add_action( 'genesis_before_loop', 'news_homepage_top_widget' ); // Remove excerpt length filter add_action( 'genesis_before_loop', 'news_remove_top_excerpt_length' ); } if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-bottom' ) ) { // Remove the default Genesis loop remove_action( 'genesis_loop', 'genesis_do_loop' ); // Add homepage widgets add_action( 'genesis_loop', 'news_homepage_widgets' ); } } function news_body_class( $classes ) { $classes[] = 'news-pro-home'; return $classes; } function news_excerpt_length( $length ) { return 25; // pull first 50 words } function news_top_excerpt_length() { add_filter( 'excerpt_length', 'news_excerpt_length' ); } function news_remove_top_excerpt_length() { remove_filter( 'excerpt_length', 'news_excerpt_length' ); } function news_homepage_top_widget() { genesis_widget_area( 'home-top', array( 'before' => '<div class="home-top widget-area">', 'after' => '</div>', ) ); } function news_homepage_widgets() { if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) { echo '<div class="home-middle">'; genesis_widget_area( 'home-middle-left', array( 'before' => '<div class="home-middle-left widget-area">', 'after' => '</div>', ) ); genesis_widget_area( 'home-middle-right', array( 'before' => '<div class="home-middle-right widget-area">', 'after' => '</div>', ) ); echo '</div>'; } if ( is_active_sidebar( 'home-center' ) ) { genesis_widget_area( 'home-center', array( 'before' => '<div class="home-center widget-area">', 'after' => '</div>', ) ); } if ( is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) ) { echo '<div class="home-middle-2">'; genesis_widget_area( 'home-middle-left-2', array( 'before' => '<div class="home-middle-left widget-area">', 'after' => '</div>', ) ); genesis_widget_area( 'home-middle-right-2', array( 'before' => '<div class="home-middle-right widget-area">', 'after' => '</div>', ) ); echo '</div>'; } genesis_widget_area( 'home-bottom', array( 'before' => '<div class="home-bottom widget-area">', 'after' => '</div>', ) ); } 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* 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; } |
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