Skip to content

Instantly share code, notes, and snippets.

@sigul
Last active Feb 1, 2018
Embed
What would you like to do?
Genesis Front Page with Flexible Widgets
<?php // DON'T REMOVE this
add_action( 'genesis_after_header', 'sg_front_page' );
/**
* Display Home Featured widget area below header.
*/
function sg_front_page() {
// Display front-page widget areas.
for ( $i = 1; $i <= 5; $i++ ) {
genesis_widget_area( "front-page-{$i}", array(
'before' => '<div class="flexible-widgets widget-area' . custom_widget_area_class( 'front-page-' . $i . '' ) . '"><div class="wrap">',
'after' => '</div></div>',
) );
}
}
/**
* remove post loop from the homepage
*/
remove_action( 'genesis_loop', 'genesis_do_loop' );
//* Run the Genesis loop
genesis();
<?php // don't copy this
/** credits: https://sridharkatakam.com/
/**
* 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;
}
// Register front-page widget areas
for ( $i = 1; $i <= 4; $i++ ) {
genesis_register_widget_area(
array(
'id' => "front-page-{$i}",
'name' => __( "Front Page {$i}", 'my-theme-text-domain' ),
'description' => __( "This is the front page {$i} section.", 'my-theme-text-domain' ),
)
);
}
/* credits: https://sridharkatakam.com/ */
/* Flexible Widgets
--------------------------------------------- */
.flexible-widgets .wrap {
max-width: 1280px;
padding: 80px 0 40px;
overflow: hidden;
}
.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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment