Front Page Widgets for Generate Press

Here, I’ll show you how to create widgetized areas for your front page in GeneratePress. Using Elements and hooks, you simply create the widget areas in the functions.php file, set up your Hook, create your styles in CSS, and voila, you are good to go. For this example, I am going to create three widget areas, the first two are floated left and right, side by side. The third one is a full-width widget directly below.

Functions.php

Once you plan out how many widgets you want on your front page and where you want them, it’s time to dive in. Begin by registering your new widgets in functions.php.

// Register our sidebars and widgetized areas.
function tvhoa_widgets_init() {
register_sidebar( array(
'name' => 'Home Left Widget',
'id' => 'home_left',
'before_widget' => '<div class="home-left">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
)
);

register_sidebar( array(
'name' => 'Home Right Widget',
'id' => 'home_right',
'before_widget' => '<div class="home-right">',
'after_widget' => '</div><div class="clear"></div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
)
);

register_sidebar( array(
'name' => 'Home Bottom Widget',
'id' => 'home_bottom',
'before_widget' => '<div class="home-bottom">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
)
);

}
add_action( 'widgets_init', 'tvhoa_widgets_init' );

You should place your markup and style hooks here as well. NOTE that I have also included a clearing division immediately after the two floated elements. Make note of any markup like that that your layout will require.

Creating the Hook Element

Next, we need to tell GeneratePress where we want our widgets. This is done via Elements. You will go to Elements (under Appearance) and create a new Element. It will be a Hook. Give the piece of code a name, and then place your PHP code in the box below. Here is the code that is needed to create the three widgetized areas:

#home {
margin: 60px 0 40px 0;
}

.home-left {
width: 42%;
margin: 40px 0;
padding: 5px;
float: left !important;
}

.home-right {
width: 42%;
margin: 40px 0;
padding: 5px;
float: right !important;
}

.clear, .clearer {
margin: 0;
clear: both;
}
register_sidebar( array(
'name' => 'Home Bottom Widget',
'id' => 'home_bottom',
'before_widget' => '<div class="home-bottom">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
)
);

}
add_action( 'widgets_init', 'tvhoa_widgets_init' );

In this case, we want the widgets after the main content area. This allows us to add text to the front page post if we want to, then the widgets will load. Under the Display tab, make sure you choose Front page only, otherwise, the widgets will appear on every page in your site.

Styling the Widgetized Areas

Now that our widgetized areas have been created, we can style them as we wish. Note for this example, I have included a clearing division to clear the floated left and right widget nos. 1 and 2. Change this if you decide to have three widgets side by side in a column.

/* --:[ Media Queries ]:-- */
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.home-left, .home-right {
width: 100%;
clear: both;
}

}

Responsiveness

We also need to take care that our new widgetized areas are responsive on tablets and smart phones. Add this code (or something similar as may be your practice) to the Media Queries section of your stylesheet.

NOTE that you should create a child theme in GeneratePress in order to create any significant changes in your theme; otherwise, those changes will be overwritten the next time you update GeneratePress.