• 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

Register and Display Flexible Widgets in Genesis

Last Updated on May 31, 2018 Favorited: 0 times

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:

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

Related Posts

  • Flexible Widgetized Front page in Genesis Sample
  • How to set up Flexible Widgets in any Genesis child theme
  • Flexible Footer Widgets in Genesis Framework
  • Footer Widgets in Genesis
  • Utility Bar in Genesis Framework

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

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