Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srikat/014891a56834872170e7 to your computer and use it in GitHub Desktop.
Save srikat/014891a56834872170e7 to your computer and use it in GitHub Desktop.
Custom Full Width Widgetized Page Template in Genesis using Column Classes, Equal Heights jQuery and RSS Widgets. https://sridharkatakam.com/custom-full-width-widgetized-page-in-genesis-using-column-classes-equal-heights-jquery-and-rss-widgets/
jQuery(function( $ ){
// equal heights
function equalHeights() {
var $col = $('.news-section > .wrap > div'),
maxHeight = [],
rows = [],
rowTop = 0,
rowIndex = 0;
$col.each(function() {
$el = $(this);
$el.css('height', '');
if ($el.offset().top > rowTop) {
rowIndex++;
rows[rowIndex] = [];
rowTop = $el.offset().top;
maxHeight[rowIndex] = 0;
}
if ($el.height() > maxHeight[rowIndex]) {
maxHeight[rowIndex] = $el.height();
}
rows[rowIndex].push($el);
});
for (row = 1; row <= rowIndex; row++) {
for (i = 0; i <= rows[row].length; i++) {
$(rows[row][i]).height(maxHeight[row]);
}
}
}
$(window).on('resize load', equalHeights);
});
genesis_register_sidebar( array(
'id' => 'news-ambition',
'name' => __( 'News Ambition', 'minimum' ),
'description' => __( 'This is the Ambition News widget area.', 'minimum' ),
) );
genesis_register_sidebar( array(
'id' => 'news-accountability',
'name' => __( 'News AccountAbility', 'minimum' ),
'description' => __( 'This is the AccountAbility News widget area.', 'minimum' ),
) );
genesis_register_sidebar( array(
'id' => 'news-watermark',
'name' => __( 'News Watermark', 'minimum' ),
'description' => __( 'This is the Watermark News widget area.', 'minimum' ),
) );
wp_enqueue_script( 'equal-heights', get_stylesheet_directory_uri() . '/js/equal-heights.js', array( 'jquery' ), '', true );
.news-section .wrap .one-third {
position: relative;
}
.news-section .wrap .one-third img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<?php
add_filter( 'genesis_attr_site-inner', 'sk_attributes_site_inner' );
/**
* Add attributes for site-inner element.
*
* @since 2.0.0
*
* @param array $attributes Existing attributes.
*
* @return array Amended attributes.
*/
function sk_attributes_site_inner( $attributes ) {
$attributes['role'] = 'main';
$attributes['itemprop'] = 'mainContentOfPage';
return $attributes;
}
// Remove div.site-inner's div.wrap
add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' );
get_header();
// Display featured image above content
if ( has_post_thumbnail() ) {
echo '<div class="page-thumbnail">';
genesis_image( array( 'size' => 'page-thumbnail' ) );
echo '</div>';
}
// Content
// Ambition News Section
echo '<section class="news-section clearfix" id="ambition-section"><div class="wrap">';
echo '<div class="one-third first"><img src="http://ambition.wpengine.com/wp-content/uploads/2015/04/ambition-logo.png" /></div>';
echo '<div class="two-thirds">';
genesis_widget_area( 'news-ambition', array(
'before' => '<div class="news-ambition widget-area">',
'after' => '</div>',
) );
echo '</div>';
echo '</div></section>';
// AccountAbility News Section
echo '<section class="news-section clearfix" id="accountability-section"><div class="wrap">';
echo '<div class="one-third first"><img src="http://ambition.wpengine.com/wp-content/uploads/2015/04/accountability-logo.png" /></div>';
echo '<div class="two-thirds">';
genesis_widget_area( 'news-accountability', array(
'before' => '<div class="news-accountability widget-area">',
'after' => '</div>',
) );
echo '</div>';
echo '</div></section>';
// Watermark News Section
echo '<section class="news-section clearfix" id="watermark-section"><div class="wrap">';
echo '<div class="one-third first"><img src="http://ambition.wpengine.com/wp-content/uploads/2015/04/watermark-logo.png" /></div>';
echo '<div class="two-thirds">';
genesis_widget_area( 'news-watermark', array(
'before' => '<div class="news-watermark widget-area">',
'after' => '</div>',
) );
echo '</div>';
echo '</div></section>';
get_footer();
/* News */
#ambition-section {
padding-top: 0;
padding-bottom: 40px;
}
#accountability-section {
background: #f2f2f2;
padding-top: 80px;
padding-bottom: 40px;
}
#watermark-section {
padding-top: 80px;
padding-bottom: 80px;
}
.widget_rss .widget-title {
display: none;
}
.widget_rss ul {
margin-left: 0;
}
.widget_rss ul > li:before {
content: none;
}
.widget_rss ul > li {
float: left;
width: 45.0066577896%;
margin-left: 9.9866844208%;
margin-bottom: 45px;
}
.widget_rss ul > li:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}
a.rsswidget {
font-family: 'Arvo', serif;
font-size: 24px;
line-height: 1;
}
.rss-date {
display: block;
margin-top: 4px;
color: #b9b9b9;
margin-bottom: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment