• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to Divide .home-top area?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to Divide .home-top area?

This topic is: not resolved

Tagged: home-top

  • This topic has 11 replies, 6 voices, and was last updated 8 years, 10 months ago by maicuel.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 15, 2013 at 10:17 am #73151
    ithacaindy
    Member

    The .home-top div is currently just one area where the top content goes. I want to split that div so that the top story is displayed on the left 75% portion and top headlines are show on the right. How do I add the second div within the .home-top div?

    http://ithacaindy.org
    November 15, 2013 at 12:42 pm #73214
    nutsandbolts
    Member

    The easiest way would be to create two new widget areas (something like home top left and home top right) within the overall home-top div, then use CSS to give the left one 75% width and the right one 25% width - maybe more or less depending on padding.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 18, 2013 at 11:33 am #73976
    ithacaindy
    Member

    That's what I thought. But I'm working out the mechanics. The genesis_widget_area tag has '<div class="home-top widget-area">' as the before. Do I edit this along the lines of '<div class="home-top widget-area"><div class="home-top-left widget-area">'?

    November 18, 2013 at 1:09 pm #73990
    nutsandbolts
    Member

    What I would do is add the two areas within the overall Home Top div. So within home-top, you'd have a home-top-left and a home-top-right.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 19, 2013 at 9:32 am #74172
    ithacaindy
    Member

    I'm still working out the mechanics. For instance, The genesis_widget_area tag creates one widget area with starting and ending divs. If I create home-top-left and home-top-right within home-top, the coding would go something like this, I think:

    echo '<div class="home-top">';
    genesis_widget_area( 'home-top-left', array(
    'before' => '<div class="home-top-left widget-area">',
    'after' => '</div>',
    ) );
    genesis_widget_area( 'home-top-right', array(
    'before' => '<div class="home-top-right widget-area">',
    'after' => '</div>',
    ) );
    echo '</div'>';

    But what displays is the home-top-left div and widget with the home-top-right widget appearing just below. The css for the two divs has the left floated left and the right floated right. I'm not sure what I'm missing to get the two divs to align correctly.

    November 19, 2013 at 10:13 am #74178
    nutsandbolts
    Member

    Okay, I got this working on a test site (though home top will need some padding on the bottom). Here's what I've got in functions.php:

    //* Register widget areas
    genesis_register_sidebar( array(
    	'id'          => 'home-top',
    	'name'        => __( 'Home - Top', 'magazine' ),
    	'description' => __( 'This is the top section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'home-top-left',
    	'name'        => __( 'Home - Top Left', 'magazine' ),
    	'description' => __( 'This is the top section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'home-top-right',
    	'name'        => __( 'Home - Top Right', 'magazine' ),
    	'description' => __( 'This is the top section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'home-middle',
    	'name'        => __( 'Home - Middle', 'magazine' ),
    	'description' => __( 'This is the middle section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'home-bottom',
    	'name'        => __( 'Home - Bottom', 'magazine' ),
    	'description' => __( 'This is the bottom section of the homepage.', 'magazine' ),
    ) );
    genesis_register_sidebar( array(
    	'id'          => 'after-entry',
    	'name'        => __( 'After Entry', 'magazine' ),
    	'description' => __( 'This is the after entry section.', 'magazine' ),
    ) );

    And here's the two parts of front-page.php I had to alter:

    function magazine_home_genesis_meta() {
    
    	if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-top-left') || is_active_sidebar( 'home-top-right') || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-bottom' ) ) {
    function magazine_homepage_widgets() {
    
    	genesis_widget_area( 'home-top', array(
    		'before' => '<div class="home-top widget-area">',
    	) );
    
    	genesis_widget_area( 'home-top-left', array(
    		'before' => '<div class="home-top-left widget-area">',
    		'after'  => '</div>',
    	) );
            
    	genesis_widget_area( 'home-top-right', array(
    		'before' => '<div class="home-top-right widget-area">',
    		'after'  => '</div></div>',
    	) );
    
    	genesis_widget_area( 'home-middle', array(
    		'before' => '<div class="home-middle widget-area">',
    		'after'  => '</div>',
    	) );
    
    	genesis_widget_area( 'home-bottom', array(
    		'before' => '<div class="home-bottom widget-area">',
    		'after'  => '</div>',
    	) );
    
    }

    Then I added the following to my stylesheet:

    .home-top-left {
            float: left;
            width: 48%;
    }
    
    .home-top-right {
            float: right;
            width: 48%;
    }

    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 19, 2013 at 10:14 am #74179
    nutsandbolts
    Member

    The media queries section will need some attention as well - ideally home top left and right will be 100% width on phones and tablets.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 19, 2013 at 11:09 am #74194
    ithacaindy
    Member

    Thanks. I'm working on making home-top-left/right 100% in media queries.

    November 19, 2013 at 11:33 am #74201
    ashabele
    Member

    This is perfection! Thank you so very much!

    November 19, 2013 at 12:08 pm #74207
    TeeTide
    Member

    Wowzer! Works great! Andrea, you rock!

    March 5, 2014 at 8:10 am #93514
    BabsSaul
    Participant

    Just wanted to add my thanks for this. Very easy to follow and did exactly what I wanted. Thanks Andrea

    August 25, 2016 at 1:15 pm #192043
    maicuel
    Member

    works perfect! thanks

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble