Skip to content

Instantly share code, notes, and snippets.

@SiGaCode

SiGaCode/ez-rows-kirki.php

Created June 20, 2014 11:07
Show Gist options
  • Save SiGaCode/c5de81b7b8b1ecb872b8 to your computer and use it in GitHub Desktop.
Save SiGaCode/c5de81b7b8b1ecb872b8 to your computer and use it in GitHub Desktop.
Download ZIP
Wrap each EZ home row in a separate div so they can get a full-width background color/image. The divs are injected via JS (jQuery). They will be applied only if the related row exists. The classes can be changed to whatever you want. Goes to Dynamik Custom - JS.
Raw
ez-rows-kirki.php
//* Goes to Dynamik Custom - Functions. Only if you want to use Kirki, else you won´t need it
//* Kirki Customizer configuration
add_filter( 'kirki/config', 'jr_kirki_config' );
function jr_kirki_config() {
if ( class_exists('Kirki') && is_front_page() ) {
$args = array( 'stylesheet_id' => 'dynamik_minified_stylesheet', );
return $args;
}
}
//* Kirki Customizer options
if (class_exists('Kirki')) {
//* Create EZ Home Slider section
add_action( 'customize_register', 'jr_ez_home_slider_section' );
function jr_ez_home_slider_section( $wp_customize ) {
$wp_customize->add_section( 'ez_home_slider_section', array(
'title' => __( 'EZ Home Slider', 'dyanmik-gen' ),
'priority' => 200
) );
}
//* Create EZ Home Slider background setting
add_filter( 'kirki/controls', 'jr_ez_home_slider_bg' );
function jr_ez_home_slider_bg ( $controls ) {
$controls[] = array(
'type' => 'background',
'setting' => 'ez_home_slider_bg_setting',
'label' => __( 'Background', 'dynamik-gen' ),
'section' => 'ez_home_slider_section',
'default' => array(
'color' => '#ffffff',
'image' => null,
'repeat' => 'repeat',
'size' => 'inherit',
'attach' => 'inherit',
'position' => 'left-top',
'opacity' => false,
),
'priority' => 10,
'output' => '#ez-home-slider-container-wrap',
);
return $controls;
}
//* Create EZ Home Top section
add_action( 'customize_register', 'jr_ez_home_top_section' );
function jr_ez_home_top_section( $wp_customize ) {
$wp_customize->add_section( 'ez_home_top_section', array(
'title' => __( 'EZ Home Top', 'dyanmik-gen' ),
'priority' => 210
) );
}
//* Create EZ Home Top background setting
add_filter( 'kirki/controls', 'jr_ez_home_top_bg' );
function jr_ez_home_top_bg ( $controls ) {
$controls[] = array(
'type' => 'background',
'setting' => 'ez_home_top_bg_setting',
'label' => __( 'Background', 'dynamik-gen' ),
'section' => 'ez_home_top_section',
'default' => array(
'color' => '#ffffff',
'image' => null,
'repeat' => 'repeat',
'size' => 'inherit',
'attach' => 'inherit',
'position' => 'left-top',
'opacity' => false,
),
'priority' => 10,
'output' => '.full-width-top',/* was #ez-home-top-container before */
);
return $controls;
}
//* Create EZ Home Middle section
add_action( 'customize_register', 'jr_ez_home_middle_section' );
function jr_ez_home_middle_section( $wp_customize ) {
$wp_customize->add_section( 'ez_home_middle_section', array(
'title' => __( 'EZ Home Middle', 'dyanmik-gen' ),
'priority' => 220
) );
}
//* Create EZ Home Middle background setting
add_filter( 'kirki/controls', 'jr_ez_home_middle_bg' );
function jr_ez_home_middle_bg ( $controls ) {
$controls[] = array(
'type' => 'background',
'setting' => 'ez_home_middle_bg_setting',
'label' => __( 'Background', 'dynamik-gen' ),
'section' => 'ez_home_middle_section',
'default' => array(
'color' => '#ffffff',
'image' => null,
'repeat' => 'repeat',
'size' => 'inherit',
'attach' => 'inherit',
'position' => 'left-top',
'opacity' => false,
),
'priority' => 10,
'output' => '.full-width-middle',/* was #ez-home-middle-container before */
);
return $controls;
}
//* Create EZ Home Bottom section
add_action( 'customize_register', 'jr_ez_home_bottom_section' );
function jr_ez_home_bottom_section( $wp_customize ) {
$wp_customize->add_section( 'ez_home_bottom_section', array(
'title' => __( 'EZ Home Bottom', 'dyanmik-gen' ),
'priority' => 230
) );
}
//* Create EZ Home Bottom background setting
add_filter( 'kirki/controls', 'jr_ez_home_bottom_bg' );
function jr_ez_home_bottom_bg ( $controls ) {
$controls[] = array(
'type' => 'background',
'setting' => 'ez_home_bottom_bg_setting',
'label' => __( 'Background', 'dynamik-gen' ),
'section' => 'ez_home_bottom_section',
'default' => array(
'color' => '#ffffff',
'image' => null,
'repeat' => 'repeat',
'size' => 'inherit',
'attach' => 'inherit',
'position' => 'left-top',
'opacity' => false,
),
'priority' => 10,
'output' => '.full-width-bottom', /* was #ez-home-bottom-container before */
);
return $controls;
}
//* Create Above EZ Home widget section
add_action( 'customize_register', 'sg_above_ez_home_section' );
function sg_above_ez_home_section( $wp_customize ) {
$wp_customize->add_section( 'above_ez_home_section', array(
'title' => __( 'Above EZ Home', 'dyanmik-gen' ),
'priority' => 190
) );
}
//* Create Above EZ Home widget background setting
add_filter( 'kirki/controls', 'above_ez_home_bg' );
function above_ez_home_bg ( $controls ) {
$controls[] = array(
'type' => 'background',
'setting' => 'above_ez_home_bg_setting',
'label' => __( 'Background', 'dynamik-gen' ),
'section' => 'above_ez_home_section',
'default' => array(
'color' => '#ffffff',
'image' => null,
'repeat' => 'repeat',
'size' => 'inherit',
'attach' => 'inherit',
'position' => 'left-top',
'opacity' => false,
),
'priority' => 10,
'output' => '.above-ez-home-full-width',
);
return $controls;
}
//* Create Below EZ Home widget section
add_action( 'customize_register', 'sg_below_ez_home_section' );
function sg_below_ez_home_section( $wp_customize ) {
$wp_customize->add_section( 'below_ez_home_section', array(
'title' => __( 'Below EZ Home', 'dynamik-gen' ),
'priority' => 240
) );
}
//* Create Below EZ Home widget background setting
add_filter( 'kirki/controls', 'below_ez_home_bg' );
function below_ez_home_bg ( $controls ) {
$controls[] = array(
'type' => 'background',
'setting' => 'below_ez_home_bg_setting',
'label' => __( 'Background', 'dynamik-gen' ),
'section' => 'below_ez_home_section',
'default' => array(
'color' => '#ffffff',
'image' => null,
'repeat' => 'repeat',
'size' => 'inherit',
'attach' => 'inherit',
'position' => 'left-top',
'opacity' => false,
),
'priority' => 10,
'output' => '.below-ez-home-full-width',
);
return $controls;
}
//* Create Before Footer widget section
add_action( 'customize_register', 'sg_before_footer_section' );
function sg_before_footer_section( $wp_customize ) {
$wp_customize->add_section( 'before_footer_section', array(
'title' => __( 'Before Footer', 'dynamik-gen' ),
'priority' => 250
) );
}
//* Create Before Footer widget background setting
add_filter( 'kirki/controls', 'before_footer_bg' );
function before_footer_bg ( $controls ) {
$controls[] = array(
'type' => 'background',
'setting' => 'before_footer_bg_setting',
'label' => __( 'Background', 'dynamik-gen' ),
'section' => 'before_footer_section',
'default' => array(
'color' => '#ffffff',
'image' => null,
'repeat' => 'repeat',
'size' => 'inherit',
'attach' => 'inherit',
'position' => 'left-top',
'opacity' => false,
),
'priority' => 10,
'output' => '.before-footer-full-width',
);
return $controls;
}
}
Raw
wrap_ez_rows.js
/* http://stackoverflow.com/questions/7081269/create-wrapper-div-around-two-other-divs-with-jquery */
/* Goes to Dynamik Custom - JS */
jQuery(document).ready(function($) {
$('#ez-home-top-container').wrapAll('<div class="full-width-top" />');
$('#ez-home-middle-container').wrapAll('<div class="full-width-middle" />');
$('#ez-home-bottom-container').wrapAll('<div class="full-width-bottom" />');
});
Raw
wrap_ez_rows_styles.css
/* Custom CSS for EZ rows skin - goes to Dynamik Custom - CSS */
/*Make all wrapper divs full width*/
body.ez-home .site-inner, #home-hook-wrap, #ez-home-slider-container-wrap, #ez-home-container-wrap
{max-width:100%; margin:0; padding:0;}
/*Adjust to your desired content width here, match with Dynamik Design - Widths, count the padding, too*/
#ez-home-slider, #ez-home-top-container, #ez-home-middle-container, #ez-home-bottom-container, .above-ez-home, .below-ez-home, .before-footer
{max-width:1140px; margin:0 auto; float:none; }
/*Add padding to the EZ home widget rows and slider wrap*/
/*Others can be controlled from Dynamik Design - EZ or Widgets*/
#ez-home-top-container, #ez-home-middle-container, #ez-home-bottom-container, #ez-home-slider
{box-sizing:border-box; padding: 30px 20px;}
/* If you want to have your feature top image from Dynamik EZ settings cover whole width - uncomment */
/* #ez-feature-top-container-wrap {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
*/
/*Set the color of slider wrap and ez rows manually without using Kirki - uncomment and go on from here*/
/*
#ez-home-slider-container-wrap {background: #F9CEB8;}
.above-ez-home-full-width {background: #CCCCCC;}
.full-width-top {background: #F5DEF7;}
.full-width-middle {background: #CCCCCC;}
.full-width-bottom {background: #D4F7F5;}
.below-ez-home-full-width {background: #CCCCCC;}
.before-footer-full-width {background: #F5DEF7;}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment