By default Home page have one widget area for Welcome Text. This article will show how to create a new widget area on home page and display the 3 columns teasers in that area.
Step 1: Registering a new widget area “Home Top”. Add the following code in your functions.php file:
1 2 3 4 5 6 |
//* Register home top widget area genesis_register_sidebar( array( 'id' => 'home-top', 'name' => __( 'Home Top', 'whitespace' ), 'description' => __( 'This is the home top section will come below the banner image.', 'whitespace' ), ) ); |
Step 2: Navigate Dashboard > Appearance > Widgets and 6 Text Widgets in Home Top Widget Area. See the SS:
Step 3: Hook home top widget area after site header. Open the front-page.php file and add the following code above the genesis() function.
1 2 3 4 5 6 7 8 9 10 |
// Hook home top widget area after site header add_action( 'genesis_after_header', 'whitespace_home_top_widget_area' ); function whitespace_home_top_widget_area() { genesis_widget_area( 'home-top', array( 'before' => '<div class="home-top-section" id="home-top-section">', 'after' => '</div>', ) ); } |
Step 4: This is the last step. Add the following CSS in your style.css file:
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 |
/* # Home Top Section ---------------------------------------------------------------------- */ .home-top-section { display: inline-block; padding: 40px 40px 20px; } .home-top-section .widget { float: left; margin-left: 2.5641%; margin-bottom: 10px; padding: 40px 20px; text-align: center; width: 31.6239%; } .home-top-section .widget:nth-of-type(3n+1){ clear: left; margin-left: 0; } .home-top-section .widget .widgettitle { color: #232323; font-size: 26px; margin: 0 0 22px; } .home-top-section .dashicons, .home-top-section .dashicons-before:before{ font-size: 35px; line-height: 35px; height: 35px; margin-bottom: 25px; width: 35px; } .home-top-section a.button{ background: none; border: 2px solid #00a99d; color: #00a99d; padding: 10px 30px; } .home-top-section .widget:hover{ background: #f5f5f5; } .home-top-section a.button:hover{ background: #00a99d; color: #FFF; } /* Media Queries ---------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 681px) and (max-width: 767px) { .home-top-section .widget { width: 48.717%; } .home-top-section .widget:nth-of-type(3n+1) { clear: none; margin-left: 2.5%; } .home-top-section .widget:nth-of-type(2n+1) { clear: left; margin-left: 0; } } @media only screen and (max-width: 680px) { .home-top-section .widget { float: none; margin-left: 0; width: 100%; } } |
This doesn’t seem to work with the Whitespace Pro theme, any longer
Can you share the wp-admin access via contact form? I shall look it once.
Thanks for your great explanation I used it for the home page of the above website (second 3 col layer at the bottom) Do you know a way of moving the widget title to go under the content like the 3 examples above the 3 widgets?
Cheers
Julian
You are using the Text Widget. Correct? Just move this kind of line [code]<h4 class="widget-title widgettitle">Our Thought</h4>] line at bottom. I mean that it will move below the last [code]<p>] tag.