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.
-
- Widgetized areas
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.
-
- Create a new Hook element.
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.
Joni Mueller has been designing web sites for hire since 2003, when she first blew up her web host’s server by insisting on running Greymatter. Since then, Joni has designed for Blogger and Movable Type, TextPattern, WordPress and CMS Made Simple. She lives with her cat and shoe collection in a bucolic old section of Houston called Idylwood. For some strange reason, Joni likes to refer to herself in the third person. When she’s not working on web design, she’s ordering lawyers around. And blogging about it. Or both.
Leave a Reply