-
-
Save About2git/74d4bc4a106864adf755 to your computer and use it in GitHub Desktop.
Sample Widgetized Front Page with Full Width Sections in 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
| jQuery(document).ready(function($) { | |
| $('.home-testimonials .testimonials').bxSlider({ | |
| minSlides: 1, | |
| maxSlides: 1, | |
| slideWidth: 800, | |
| }); | |
| }); |
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
| <?php | |
| /** | |
| * Front Page with full width sections. | |
| * | |
| * @author Sridhar Katakam | |
| * @license GPL-2.0+ | |
| */ | |
| //* Enqueue Front page scripts and styles | |
| add_action( 'wp_enqueue_scripts', 'sk_front_page_scripts_styles' ); | |
| function sk_front_page_scripts_styles() { | |
| wp_enqueue_style( 'bxslider-styles', get_stylesheet_directory_uri() . '/css/jquery.bxslider.css' ); | |
| wp_enqueue_script( 'bxslider-js', get_stylesheet_directory_uri() . '/js/jquery.bxslider.min.js', array( 'jquery' ), '4.1.2', true ); | |
| wp_enqueue_script( 'bxslider-init', get_stylesheet_directory_uri() . '/js/bxslider-init.js', array( 'bxslider-js' ), '1.0.0', true ); | |
| } | |
| /** | |
| * Homepage Content | |
| * | |
| */ | |
| function sk_homepage_content() { | |
| //* Home Slider (Full Width) section | |
| genesis_widget_area( 'home-slider', array( | |
| 'before' => '<div class="home-slider home-section home-odd">', | |
| 'after' => '</div>', | |
| ) ); | |
| //* Horizontal Opt-in | |
| genesis_widget_area( 'horizontal-optin', array( | |
| 'before' => '<div class="horizontal-optin home-section home-even"><div class="wrap">', | |
| 'after' => '</div></div>', | |
| )); | |
| //* 2-column Home Featured section | |
| echo '<div class="home-featured home-section home-odd"><div class="wrap">'; | |
| genesis_widget_area( 'home-featured-left', array( | |
| 'before' => '<div class="home-featured-left one-half first">', | |
| 'after' => '</div>', | |
| ) ); | |
| genesis_widget_area( 'home-featured-right', array( | |
| 'before' => '<div class="home-featured-right one-half">', | |
| 'after' => '</div>', | |
| ) ); | |
| echo '</div></div>'; | |
| //* Home Blog Posts section | |
| genesis_widget_area( 'home-blog', array( | |
| 'before' => '<div class="home-blog home-section home-even"><div class="wrap">', | |
| 'after' => '</div></div>', | |
| ) ); | |
| //* Home Testimonials section | |
| genesis_widget_area( 'home-testimonials', array( | |
| 'before' => '<div class="home-testimonials home-section home-odd"><div class="wrap">', | |
| 'after' => '</div></div>', | |
| ) ); | |
| } | |
| add_action( 'sk_content_area', 'sk_homepage_content' ); | |
| // Remove 'site-inner' from structural wrap | |
| add_theme_support( 'genesis-structural-wraps', array( | |
| 'header', | |
| 'nav', | |
| 'subnav', | |
| // 'site-inner', | |
| 'footer-widgets', | |
| 'footer' | |
| ) ); | |
| // Build the page | |
| get_header(); | |
| do_action( 'sk_content_area' ); | |
| get_footer(); |
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
| //* Enqueue Sitewide scripts and styles | |
| add_action( 'wp_enqueue_scripts', 'sk_sitewide_scripts_styles' ); | |
| function sk_sitewide_scripts_styles() { | |
| wp_enqueue_script( 'sitewide', get_stylesheet_directory_uri() . '/js/sitewide.js', array( 'jquery' ), '1.0.0', true ); | |
| wp_enqueue_style( 'dashicons' ); | |
| } | |
| //* Register widget areas | |
| genesis_register_sidebar( array( | |
| 'id' => 'horizontal-optin', | |
| 'name' => __( 'Horizontal Optin', 'themename' ), | |
| 'description' => __( 'This is the Horizontal Opt-in form section', 'themename' ), | |
| ) ); | |
| genesis_register_sidebar( array( | |
| 'id' => 'home-slider', | |
| 'name' => __( 'Home Slider', 'themename' ), | |
| 'description' => __( 'This is the Home Slider section', 'themename' ), | |
| ) ); | |
| genesis_register_sidebar( array( | |
| 'id' => 'home-featured-left', | |
| 'name' => __( 'Home Featured Left', 'themename' ), | |
| 'description' => __( 'This is the Home Featured Left section', 'themename' ), | |
| ) ); | |
| genesis_register_sidebar( array( | |
| 'id' => 'home-featured-right', | |
| 'name' => __( 'Home Featured Right', 'themename' ), | |
| 'description' => __( 'This is the Home Featured Right section', 'themename' ), | |
| ) ); | |
| genesis_register_sidebar( array( | |
| 'id' => 'home-blog', | |
| 'name' => __( 'Home Blog', 'themename' ), | |
| 'description' => __( 'This is the Home Blog section', 'themename' ), | |
| ) ); | |
| genesis_register_sidebar( array( | |
| 'id' => 'home-testimonials', | |
| 'name' => __( 'Home Testimonials', 'themename' ), | |
| 'description' => __( 'This is the Home Testimonials section', 'themename' ), | |
| ) ); | |
| add_action( 'genesis_after_header', 'sk_optin_below_header' ); | |
| /** | |
| * Display Home Optin widget area below the header | |
| * | |
| * Context: Everywhere excerpt the front page | |
| * | |
| * @author Sridhar Katakam | |
| * @link http://sridharkatakam.com/collapsible-horizontal-opt-form-genesis/ | |
| */ | |
| function sk_optin_below_header() { | |
| if ( is_front_page() ) { | |
| return; | |
| } | |
| genesis_widget_area( 'horizontal-optin', array( | |
| 'before' => '<div class="horizontal-optin widget-area"><div class="wrap">', | |
| 'after' => '</div></div>', | |
| )); | |
| } | |
| //* Define a custom image size for Home Blog featured images | |
| add_image_size( 'home-blog', 648, 351, 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
| <div class="testimonials"> | |
| <div class="testimonial"> | |
| <p class="testimonial-text">Sed lorem libero, rhoncus vitae ullamcorper sed, semper sit amet mauris. Sed mollis iaculis lacus, non porttitor felis semper ac. Curabitur vehicula tristique ultricies. Etiam vel nulla lectus. Cras id eros sit amet libero mollis ornare. Duis feugiat diam et leo facilisis posuere. In id mattis augue.</p> | |
| <p class="testifier">- Sri Kat</p> | |
| </div> | |
| <div class="testimonial"> | |
| <p class="testimonial-text">Vestibulum viverra justo a blandit dictum. Etiam mollis, augue non consectetur interdum, neque metus scelerisque felis, vitae facilisis arcu nibh sit amet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> | |
| <p class="testifier">- John Doe</p> | |
| </div> | |
| <div class="testimonial"> | |
| <p class="testimonial-text">Suspendisse nec gravida metus. Ut viverra tortor vitae risus gravida, eu sodales turpis aliquam. Aliquam vel odio mauris. Nunc non neque at ligula iaculis ultrices.</p> | |
| <p class="testifier">- Mary Jane</p> | |
| </div> | |
| <div class="testimonial"> | |
| <p class="testimonial-text">Suspendisse dictum quam vel scelerisque ultricies. Etiam in sodales ex. Etiam euismod pretium interdum. Vivamus gravida dui dapibus, egestas ligula eget, eleifend nisi.</p> | |
| <p class="testifier">- Sullivan</p> | |
| </div> | |
| </div> |
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
| <div class="slide-caption-text wrap"> | |
| Ut bibendum condimentum magna vitae fermentum. Vestibulum auctor rhoncus elit, tempus ullamcorper massa vehicula quis. Proin vestibulum sed velit id laoreet. Donec sit amet tellus et lectus tristique aliquet ut. | |
| <p><a href="#" class="button">Explore <span class="dashicons dashicons-arrow-right-alt"></span></a></p> | |
| </div> |
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( $ ){ | |
| $("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>'); | |
| $(".responsive-menu-icon").click(function(){ | |
| $(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle(); | |
| }); | |
| $(window).resize(function(){ | |
| if(window.innerWidth > 1024) { | |
| $("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style"); | |
| $(".responsive-menu > .menu-item").removeClass("menu-open"); | |
| } | |
| }); | |
| $(".responsive-menu > .menu-item").click(function(event){ | |
| if (event.target !== this) | |
| return; | |
| $(this).find(".sub-menu:first").slideToggle(function() { | |
| $(this).parent().toggleClass("menu-open"); | |
| }); | |
| }); | |
| }); |
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
| /* # Sample Widgetized Front Page with Full Width Sections | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .entry-header { | |
| margin-bottom: 40px; | |
| } | |
| /* To avoid noticeable vertical movement for hover state of Soliloquy's Control Nav (typically circles) and bxSlider's left and right arrows */ | |
| .soliloquy-container .soliloquy-control-nav li a, | |
| .soliloquy-theme-classic .soliloquy-pager-link, | |
| .bx-wrapper .bx-controls-direction a { | |
| -webkit-transition: none; | |
| -moz-transition: none; | |
| -ms-transition: none; | |
| -o-transition: none; | |
| transition: none; | |
| } | |
| /* Responsive Menu */ | |
| .responsive-menu-icon { | |
| display: none; | |
| margin-bottom: -1px; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .responsive-menu-icon::before { | |
| display: inline-block; | |
| margin: 0 auto; | |
| padding: 10px; | |
| font: normal 20px/1 "dashicons"; | |
| content: "\f333"; | |
| } | |
| /* General */ | |
| .home .site-inner { | |
| max-width: none; | |
| padding-top: 0; | |
| } | |
| .site-header .widget-area { | |
| margin-top: 7px; | |
| } | |
| .home-section { | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .home-odd { | |
| background: #fff; | |
| } | |
| .home-even { | |
| background: #f5f5f5; | |
| } | |
| .home-section .widget-title { | |
| font-size: 30px; | |
| } | |
| /* Home Slider section */ | |
| .home-slider { | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| } | |
| .home-slider .soliloquy-container { | |
| margin-bottom: 0 !important; | |
| } | |
| .home-slider .soliloquy-container .soliloquy-pager { | |
| padding-left: 5px; | |
| text-align: left; | |
| } | |
| .soliloquy-container .slide-caption-text { | |
| padding: 10px 0; | |
| line-height: 1.3; | |
| } | |
| .soliloquy-container .wrap { | |
| margin: 0 auto; | |
| } | |
| .soliloquy-caption a.button { | |
| display: inline-block; | |
| margin-top: 20px; | |
| padding: 10px; | |
| color: #fff; | |
| background: #f68700; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| .soliloquy-caption a.button:hover { | |
| background: #fcaa00; | |
| } | |
| /* Opt-in below header */ | |
| .horizontal-optin { | |
| padding-top: 40px; | |
| background-color: #50c5b5; | |
| } | |
| .horizontal-optin .enews-widget { | |
| color: #fff; | |
| } | |
| .horizontal-optin .enews-widget p { | |
| float: left; | |
| width: 40%; | |
| margin-top: 7px; | |
| margin-bottom: 0; | |
| font-weight: bold; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .horizontal-optin #subscribe { | |
| float: right; | |
| width: 60%; | |
| } | |
| .horizontal-optin .enews-widget input { | |
| float: left; | |
| width: 35%; | |
| margin-right: 10px; | |
| margin-bottom: 0; | |
| padding: 10px; | |
| border: 1px solid #38aa9a; | |
| } | |
| .horizontal-optin .enews-widget input[type="submit"] { | |
| width: auto; | |
| padding: 10px 34px; | |
| background-color: #222; | |
| } | |
| .horizontal-optin .enews-widget input[type="submit"]:hover { | |
| color: #fff; | |
| background-color: #000; | |
| } | |
| /* Home Blog section */ | |
| .home-blog .featured-content .entry { | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| border-bottom: none; | |
| } | |
| .home-blog .featured-content .entry p { | |
| margin-bottom: 0; | |
| } | |
| /* Home Testimonials section */ | |
| p.testimonial-text:before { | |
| display: inline-block; | |
| padding-right: 5px; | |
| font: normal 20px/1 "dashicons"; | |
| -webkit-font-smoothing: antialiased; | |
| vertical-align: top; | |
| content: "\f205"; | |
| } | |
| .home-testimonials .bx-wrapper .bx-viewport { | |
| border: none; | |
| box-shadow: none; | |
| } | |
| .home-testimonials .bx-wrapper .bx-prev { | |
| left: -70px; | |
| } | |
| .home-testimonials .bx-wrapper .bx-next { | |
| right: -70px; | |
| } | |
| /* Site Footer */ | |
| .site-footer { | |
| color: #fff; | |
| background: #333; | |
| } | |
| /* Media Queries */ | |
| @media only screen and (max-width: 1240px) { | |
| .home-featured, | |
| .home-blog { | |
| padding-right: 2%; | |
| padding-left: 2%; | |
| } | |
| } | |
| @media only screen and (max-width: 1200px) { | |
| .horizontal-optin .enews-widget p { | |
| font-size: 16px; | |
| text-align: left; | |
| } | |
| .horizontal-optin .enews-widget input { | |
| width: 30%; | |
| } | |
| } | |
| @media only screen and (max-width: 1024px) { | |
| .site-header .widget-area, | |
| .title-area { | |
| width: 100%; | |
| } | |
| .site-header .title-area { | |
| text-align: center; | |
| } | |
| .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, | |
| .genesis-nav-menu.responsive-menu { | |
| display: none; | |
| } | |
| .genesis-nav-menu.responsive-menu .menu-item, | |
| .responsive-menu-icon { | |
| display: block; | |
| } | |
| .genesis-nav-menu.responsive-menu .menu-item { | |
| margin: 0; | |
| } | |
| .genesis-nav-menu.responsive-menu .menu-item:hover { | |
| position: static; | |
| } | |
| .genesis-nav-menu.responsive-menu .current-menu-item > a, | |
| .genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover, | |
| .genesis-nav-menu.responsive-menu a, | |
| .genesis-nav-menu.responsive-menu a:hover { | |
| padding: 16px 20px; | |
| background: none; | |
| line-height: 1; | |
| } | |
| .genesis-nav-menu.responsive-menu .menu-item-has-children { | |
| cursor: pointer; | |
| } | |
| .genesis-nav-menu.responsive-menu .menu-item-has-children > a { | |
| margin-right: 60px; | |
| } | |
| .genesis-nav-menu.responsive-menu > .menu-item-has-children:before { | |
| float: right; | |
| z-index: 9999; | |
| right: 0; | |
| height: 16px; | |
| padding: 16px 20px; | |
| font: normal 16px/1 "dashicons"; | |
| text-align: right; | |
| content: "\f347"; | |
| } | |
| .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { | |
| content: "\f343"; | |
| } | |
| .genesis-nav-menu.responsive-menu .sub-menu { | |
| position: relative; | |
| z-index: 99; | |
| left: auto; | |
| width: 100%; | |
| padding-left: 25px; | |
| border: none; | |
| opacity: 1; | |
| -webkit-transition: opacity 0.4s ease-in-out; | |
| -moz-transition: opacity 0.4s ease-in-out; | |
| -ms-transition: opacity 0.4s ease-in-out; | |
| -o-transition: opacity 0.4s ease-in-out; | |
| transition: opacity 0.4s ease-in-out; | |
| } | |
| .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { | |
| margin: 0; | |
| } | |
| .genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover, | |
| .genesis-nav-menu.responsive-menu .sub-menu li a, | |
| .genesis-nav-menu.responsive-menu .sub-menu li a:hover { | |
| position: relative; | |
| width: 100%; | |
| padding: 12px 20px; | |
| border: none; | |
| background: none; | |
| } | |
| } | |
| @media only screen and (max-width: 960px) { | |
| .horizontal-optin .wrap { | |
| padding-right: 5%; | |
| padding-left: 5%; | |
| } | |
| .horizontal-optin .enews-widget p { | |
| float: none; | |
| width: 100%; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .horizontal-optin #subscribe { | |
| float: none; | |
| width: 100%; | |
| } | |
| .horizontal-optin .enews-widget input { | |
| width: 100%; | |
| margin-bottom: 20px; | |
| } | |
| .horizontal-optin .enews-widget input[type="submit"] { | |
| float: none; | |
| width: 100%; | |
| } | |
| } | |
| @media only screen and (max-width: 950px) { | |
| .home-testimonials .bx-controls-direction { | |
| display: none; | |
| } | |
| } | |
| @media only screen and (max-width: 800px) { | |
| .home .site-inner { | |
| padding-right: 0; | |
| padding-left: 0; | |
| } | |
| .home-section .widget-area { | |
| margin-bottom: 30px; | |
| } | |
| .home-section .widget-area:last-child { | |
| margin-bottom: 0; | |
| } | |
| .home-featured-left { | |
| margin-bottom: 40px; | |
| } | |
| .home-blog .featured-content .entry { | |
| margin-bottom: 30px; | |
| } | |
| .home-blog .featured-content .entry a.aligncenter { | |
| margin-bottom: 10px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment