Sridhar Katakam

Genesis and WordPress Tutorials

Sample Widgetized Front Page with Full Width Sections in Genesis

by 11 Comments

In this article I provide a working example of how Bill Erickson's code can be used as a foundation for creating a typical front page in WordPress using Genesis.

widgetized-genesis-frontpage-example

Our front page is going to be made up of these sections:

  1. Header (sitewide) - site title/logo at left and custom menu in 'Header Right' widget area.
  2. Home Slider - Full width Soliloquy slider.
  3. Home Horizontal Opt-in (appears below header on inner pages) - using Genesis eNews Extended plugin.
  4. 2-column (50/50) Home Featured section - Text widget at left and a image widget in the right.
  5. Home Blog Posts section - 4 Posts set to appear side-by-side using Genesis column classes via Genesis Sandbox Featured Content Widget plugin's widget.
  6. Home Testimonials section - Hard-coded i.e., pre-set (can be set to be pulled from a Testimonials CPT, but not covering that now) Testimonials text being shown 1 at a time with carousel powered by bxSlider.

All the sections in the above list except the header are custom widget areas.

Sample output:

Screen Shot 2015-01-19 at 11.30.13 pm

The solution below is written for Genesis Sample child theme and might need to be modified if you are using another Genesis child theme. Mobile responsiveness has been taken care of incl. a hamburger menu that's set to appear at screen widths of 1024px and less.

Plugins used:

External jQuery script used: bxSlider for Testimonials carousel.

Step 1

Download jquery.bxslider.zip and extract its contents.

Upload ‘jquery.bxslider.css’ and ‘images’ folder to your child theme directory/css (create, if not existing).

Upload ‘jquery.bxslider.min.js’ to your child theme directory/js (create, if not existing).

Create a file named bxslider-init.js to the same location having the following:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thanks for this! Can the widget area under the slider (what is the green bar/newsletter sign up on your example) be a slider as well – a text rotating area? On this site: http://www.bodybyginny.com/ I have Revolution Slider for the rotating text area under the main slider, which works great for my client who can change this text herself. I am thinking of converting her site, currently a Themify theme, to Genesis, so your example caught my eye.
    Thanks!

    Reply

    • I got it. “Home Featured Left” and “Home Featured Right” are used to display text widget and image widget side by side.

      Reply

  • How can I get this to work with the lite version of Soliloquy or, failing that, the Genesis Responsive Slider?

    Many thanks.

    Reply

  • I’ve done all the above, but I would like to add in the page’s post content and have the widget areas below that. What would I add to the front-page.php template?


    function web_homepage_content() {

    // WOULD LIKE TO INSERT PAGE POST CONTENT HERE AND HAVE WIDGETS DIRECTLY BELOW IN .SITE-INNER

    genesis_widget_area( 'home-recent-posts', array(
    'before' => '',
    'after' => ''
    ));

    genesis_widget_area( 'home-about', array(
    'before' => '',
    'after' => ''
    ));

    genesis_widget_area( 'home-decorative-text', array(
    'before' => '',
    'after' => ''
    ));

    }
    add_action( 'web_content_area', 'web_homepage_content' );

    // Remove the '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( 'web_content_area' );
    get_footer();

    Any help would be appreciated!

    Reply

  • Hi!

    Very nice tutorial. Thanks for that. I have one issue. When I resize the window for smaller screens, the images within the home-blog section get very narrow. As a result, on an Ipad this doesn’t look very pretty. (The proportion of the image changes)

    Any help with this would be apprciated.

    Reply

  • I am using the code above for a site and it all works well with JavaScript enabled. Without JavaScript naturally the slideshow does not appear. I am interested in a fallback for users with JavaScript disabled. However I also realized that with JavaScript disabled when I added more than one image to the slideshows – not only did the slideshow not appear – nor did the page content beneath the slideshow. I wondered if you could throw any light on this?

    Reply

  • Truly appreciate the cleanliness of your code… not that mine was bloated – but just within reading through three of your tutorials, I see that there’s a few things I can do to make my projects more concise. Thanks!!!

    Reply
    • >