Displaying 3 Columns Teaser Boxes Below the Banner on Home Page of Whitespace PRO Theme


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:

//* 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.

// 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:

/* # 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%;

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

4 Discussion to This Post

    • Can you share the wp-admin access via contact form? I shall look it once.

  1. 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?


    • You are using the Text Widget. Correct? Just move this kind of line

      <h4 class="widget-title widgettitle">Our Thought</h4>

      line at bottom. I mean that it will move below the last



Leave A Reply

Your email address will not be published. Required fields are marked *