• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

How to set up Flexible Widgets in any Genesis child theme

Last Updated on May 31, 2018 Favorited: 0 times

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.

Reference:
https://my.studiopress.com/documentation/essence-pro-theme/front-page-setup/front-page-and-flexible-layout-configurations/

Related Posts

  • Post Page Blog Archive Template with Layouts in Genesis
  • WordPress, Genesis and Custom Post Types
  • Jetpack-like Related Posts without Jetpack in Genesis
  • Conditional Tags and Return Early in Genesis
  • Welcome Section Widget Area in Genesis

Categories: Free Content, Genesis Tutorials Tags: flexible widgets, Genesis

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service