Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active August 29, 2015 14:11
Show Gist options
  • Select an option

  • Save srikat/2f131d6e15a49c97e85e to your computer and use it in GitHub Desktop.

Select an option

Save srikat/2f131d6e15a49c97e85e to your computer and use it in GitHub Desktop.
Collapsible Horizontal Opt-in form in Genesis. http://sridharkatakam.com/collapsible-horizontal-opt-form-genesis/
//* Register Home Optin widget area
genesis_register_sidebar( array(
'id' => 'home-optin',
'name' => __( 'Home Optin', 'lifestyle' ),
'description' => __( 'This is the home opt-in form section.', 'lifestyle' ),
) );
add_action( 'genesis_after_header', 'sk_optin_below_header' );
/**
* Display Home Optin widget area
*
* Context: Front page - only if Home Optin widget area is populated
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/collapsible-horizontal-opt-form-genesis/
*/
function sk_optin_below_header() {
if ( is_front_page() && is_active_sidebar( 'home-optin' ) ) {
genesis_widget_area( 'home-optin', array(
'before' => '<div class="horizontal-optin widget-area"><div class="wrap">',
'after' => '</div></div>',
));
}
}
//* Enqueue home.js
add_action( 'wp_enqueue_scripts', 'sk_home_js' );
function sk_home_js() {
if ( is_front_page() && is_active_sidebar( 'home-optin' ) ) {
wp_enqueue_style( 'dashicons' );
wp_enqueue_script( 'home-js', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0', true );
}
}
jQuery(function( $ ){
$( '.horizontal-optin .enews' ).before( $('.horizontal-optin .enews .widget-title') );
$( '.horizontal-optin .enews-widget .widget-title' ).click( function(){
$( this ).next( '.enews' ).slideToggle();
$( this ).toggleClass( 'closed' );
})
});
/* Opt-in below header
--------------------------------------------- */
.horizontal-optin {
margin-top: 40px; /*Delete this in Minimum Pro*/
background-color: #f4f4f4;
padding: 25px;
}
.horizontal-optin .enews-widget {
margin-bottom: 0;
}
.horizontal-optin .enews-widget input {
width: 33% !important;
}
.horizontal-optin .enews-widget .widget-title {
cursor: pointer;
position: relative;
}
.horizontal-optin .enews-widget .widget-title:after {
content: "\f343";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 15px/1 'dashicons';
position: absolute;
right: 0;
top: 5px;
}
.horizontal-optin .enews-widget .widget-title.closed:after {
content: "\f347";
}
.horizontal-optin .enews-widget .widget-title.closed {
margin-bottom: 0;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
@media only screen and (max-width: 1023px) {
.horizontal-optin .enews-widget input {
width: 32% !important;
}
}
@media only screen and (max-width: 500px) {
.horizontal-optin .enews-widget input {
width: 100% !important;
margin-bottom: 1rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment