Flexible widgets are now receiving more popularity over time. Flexible Widget section provides a feature wherein the widgets placed in widget area automatically get arranged in different layouts on the front end depending on the number of widgets in the flexible widget area.
I have written a tutorial about registering and displaying the flexible widgets in Genesis based on Wellness pro theme recently.
While the Authority pro and Academy Pro like themes are using the old approach of displaying flexible widgets, the new Essence Pro theme is something, now most popular among the lifestyle blogger using a different way to display the flexible widgets.
Today, I am going to show you how you can make a flexible widget work in Genesis using the same code and approach from Essense pro theme having minor tweaks so that, This can be used with any Genesis child theme easily.
Step 1.
Add the following in child theme’s functions.php
/**
* Counts used widgets in given sidebar.
*
* @param string $id The sidebar ID.
* @return int|void The number of widgets, or nothing.
*/
function flexible_count_widgets( $id ) {
$sidebars_widgets = wp_get_sidebars_widgets();
if ( isset( $sidebars_widgets[ $id ] ) ) {
return count( $sidebars_widgets[ $id ] );
}
}
/**
* Gives class name based on widget count.
*
* @param string $id The widget ID.
* @return string The class.
*/
function flexible_widget_area_class( $id ) {
$count = flexible_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;
}
/**
* Helper function to handle outputting widget markup and classes.
*
* @param string $id The id of the widget area.
*/
function flexible_do_widget( $id ) {
$count = flexible_count_widgets( $id );
$columns = flexible_widget_area_class( $id );
genesis_widget_area(
$id, array(
'before' => '<div id="' . $id . '" class="' . $id . '"><div class="flexible-widgets widget-area ' . $columns . '"><div class="wrap">',
'after' => '</div></div></div>',
)
);
}
Step 2.
Add the following in child theme’s style.css
/* Flexible Widgets
--------------------------------------------- */
.flexible-widgets .widget {
float: left;
margin-bottom: 0;
padding: 40px;
background-color: #fff;
}
.flexible-widgets .widget table {
margin-bottom: 0;
}
.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
width: 100%;
}
.flexible-widgets.widget-fourths .widget {
width: 22%;
margin-left: 4%;
}
.flexible-widgets.widget-halves .widget {
width: 48%;
margin-left: 4%;
}
.flexible-widgets.widget-thirds .widget {
width: 31%;
margin-left: 3.5%;
}
.flexible-widgets.widget-halves .widget:nth-of-type(odd),
.flexible-widgets.widget-thirds .widget:nth-child(3n + 1),
.flexible-widgets.widget-fourths .widget:nth-child(4n + 1) {
clear: left;
margin-left: 0;
}
.flexible-widgets .featured-content {
padding: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.flexible-widgets .featured-content .entry {
background-color: #fff;
-webkit-box-shadow: 0 25px 60px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 25px 60px 0 rgba(0, 0, 0, 0.05);
text-align: center;
}
.flexible-widgets .featured-content .entry-title {
font-size: 26px;
font-size: 2.6rem;
text-decoration: none;
letter-spacing: -1px;
}
.flexible-widgets .featured-content .entry-content,
.flexible-widgets .featured-content .entry-title {
padding: 15px 40px 0 40px;
}
.flexible-widgets .featuredpost .entry-meta {
padding-right: 40px;
padding-left: 40px;
}
.flexible-widgets.widget-full .featuredpost .entry,
.flexible-widgets.widget-halves.uneven .featuredpost.widget:last-of-type .entry {
float: left;
width: 31%;
margin-left: 3.5%;
}
.flexible-widgets.widget-full .featuredpost .entry:nth-of-type(3n + 1),
.flexible-widgets.widget-halves.uneven .featuredpost.widget:last-of-type .entry:nth-of-type(3n + 1) {
clear: left;
margin-left: 0;
}
.flexible-widgets .featured-content .more-posts-title {
padding: 30px 0;
}
.flexible-widgets .featured-content .more-posts {
text-align: center;
}
.flexible-widgets.widget-full .featured-content .more-posts,
.flexible-widgets.widget-halves.uneven .featured-content:last-of-type .more-posts {
clear: both;
-webkit-column-count: 3;
column-count: 3;
padding-bottom: 30px;
}
.flexible-widgets .featured-content .more-from-category {
margin-bottom: 55px;
}
@media only screen and (max-width: 860px) {
.flexible-widgets .wrap {
padding-left: 0;
padding-right: 0;
}
.flexible-widgets.widget-fourths .widget,
.flexible-widgets.widget-halves .widget,
.flexible-widgets.widget-thirds .widget {
float: none;
margin-left: 0;
width: 100%;
}
.flexible-widgets.widget-full .widget .entry,
.flexible-widgets.widget-halves.uneven .widget:last-of-type .entry {
margin-left: 0;
width: 100%;
}
.flexible-widgets .entry:last-of-type {
margin-bottom: 40px;
}
.flexible-widgets .featured-content .entry-title,
.half-width-entries .flexible-widgets .featured-content .entry-title,
.flexible-widgets.widget-full .entry-title,
.flexible-widgets.widget-halves.uneven .widget:last-of-type .entry-title {
font-size: 28px;
font-size: 2.8rem;
}
.flexible-widgets.widget-full .featured-content .more-posts,
.flexible-widgets.widget-halves.uneven .featured-content:last-of-type .more-posts {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
Usage
flexible_do_widget( 'WIDGET-ID' );//depend on the function we have created
Example
Step 1. Register a widget area. Add this in functions.php
// Registers `featured-pro` widget area.
genesis_register_widget_area(
array(
'id' => 'featured-pro',
'name' => __('Featured Pro Section', 'my-theme-text-domain'),
'description' => __('This is the featured-pro section.', 'my-theme-text-domain'),
)
);
Step 2. Display the Flexible featured Widget on front-page only. Add this in functions.php
add_action( 'genesis_after_header', 'wpize_home_featured_pro' );
/**
* Adds `featured-pro` flexible featured widget area after the site header.
*/
function wpize_home_featured_pro() {
// if we are not on the front page, abort.
if (! is_front_page() ) {
return;
}
flexible_do_widget( 'featured-pro' );
}
or simply show everywhere after site-header using this
add_action( 'genesis_after_header', 'wpize_home_featured_pro' );
/**
* Adds `featured-pro` flexible featured widget.
*/
function wpize_home_featured_pro() {
flexible_do_widget( 'featured-pro' );
}
Hover to Appearance >> Widgets and populate your widget areas that have been made flexible with 1 or more widgets.
So, the example clearly shows that we just have to pass the ‘widget id’ and the flexible widgets will start working.