StudioPress have some of the themes like Maker pro, Academy Pro, Authority Pro and Wellness Pro includes flexible widgets and layout settings. The flexible widgets feature works to arrange the widgets layout automatically depending upon the number of widgets type added in a Page section i.e front-page-1.
In this article, we are going to learn about using Flexible Widgets in any child theme using the reference from Wellness Pro theme.
Authority Pro and Academy Pro Theme includes 1 more different flexible layouts which we will discuss later in upcoming posts.
Step 1.
The first thing we need to do is to add some snippet to add CSS class after counting widgets in a widget section. Add the following in child theme’s functions.php
/**
* Setup widget counts.
*
* @param string $id The widget area ID.
* @return int Number of widgets in the widget area.
*/
function custom_count_widgets( $id ) {
global $sidebars_widgets;
if ( isset( $sidebars_widgets[ $id ] ) ) {
return count( $sidebars_widgets[ $id ] );
}
}
/**
* Set the widget class for flexible widgets.
*
* @param string $id The widget area ID.
* @return Name of column class.
*/
function custom_widget_area_class( $id ) {
$count = custom_count_widgets( $id );
$class = '';
if ( 1 === $count ) {
$class .= ' widget-full';
} elseif ( 0 === $count % 3 ) {
$class .= ' widget-thirds';
} elseif ( 0 === $count % 4 ) {
$class .= ' widget-fourths';
} elseif ( 1 === $count % 2 ) {
$class .= ' widget-halves uneven';
} else {
$class .= ' widget-halves';
}
return $class;
}
Step 2.
The second step is to register the CSS for those custom Classes. Add this in your stylesheet CSS file i.e child theme’s style.css
/* Flexible Widgets
--------------------------------------------- */
.flexible-widgets .wrap {
max-width: 1280px;
padding: 80px 0 40px;
}
.flexible-widgets.widget-area .widget {
float: left;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 40px;
}
.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
float: none;
width: 100%;
}
.flexible-widgets.widget-fourths .widget {
width: 25%;
}
.flexible-widgets.widget-halves .widget {
width: 50%;
}
.flexible-widgets.widget-thirds .widget {
width: 33.33%;
}
.flexible-widgets.widget-halves .widget:nth-child(odd),
.flexible-widgets.widget-thirds .widget:nth-child(3n+1),
.flexible-widgets.widget-fourths .widget:nth-child(4n+1) {
clear: left;
}
@media only screen and (max-width: 1340px) {
.flexible-widgets .wrap {
max-width: 1220px;
}
}
@media only screen and (max-width: 1200px) {
.flexible-widgets .wrap {
max-width: 1040px;
}
}
@media only screen and (max-width: 1023px) {
.flexible-widgets.widget-fourths .widget,
.flexible-widgets.widget-halves .widget,
.flexible-widgets.widget-thirds .widget {
float: none;
width: 100%;
}
.flexible-widgets .widget {
padding-left: 0;
padding-right: 0;
}
}
Step 3.
The thing we need to do is to add the CSS class to the section. if you do not want to mix the code in front-page-1 we can create a new widget section for front page only using this or this guide.
A) Register Widget Area
// Register flexible widget area
genesis_register_widget_area(
array(
'id' => 'simple-flexible-widget',
'name' => __( 'Flexible Widget for front page', 'text-domain' ),
'description' => __( 'This is the front page simple flexible section', 'text-domain' ),
)
);
B) Hook the Widget Area using Conditional Tag
add_action( 'genesis_after_header', 'custom_flexible_widget' );
/**
* Display Simple Flexible widget area below header
*/
function custom_flexible_widget() {
// if we are not on the front page, abort.
if ( ! is_front_page() ) {
return;
}
genesis_widget_area( 'simple-flexible-widget', array(
'before' => '<div class="flexible-widgets widget-area' . custom_widget_area_class( 'simple-flexible-widget' ) . '"><div class="wrap">',
'after' => '</div></div>',
) );
}
Step 4.
Go to Appearance >> Widgets and drag one widget and check. Add one more and more on the section and check it on the frontend. Your widgets are automatically changing their layout.
Reference: