Last active
August 29, 2015 14:11
-
-
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/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* 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 ); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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' ); | |
| }) | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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