WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Howto add a side by side widget area to thehomepage? (15 posts)

  1. Aus Digital Media
    Member
    Posted 10 months ago #

    Hi guys and girls.

    I want to add a side by side widget area to the homepage.
    I have managed to fins some code on the net but cant figure out how to get the widgets side by side instead of on top of each other. Can anyone help with this?

    here's my code.

    if ( function_exists('register_sidebar') )
        register_sidebar( array(
       'name' => __( 'Homepage Widget Area &cells=2'),
       'id' => 'mycustomwidgetarea',
       'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
       'before_widget' => '<aside id="%1$s" class="widget %2$s">',
       'after_widget' => "</aside>",
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
       ) );

    AND

    <?php
     // Custom widget Area Start
     if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Widget Area &cells=2') ) : ?>
    <?php endif;
    // Custom widget Area End
    ?>
  2. CrouchingBruin
    Member
    Posted 10 months ago #

    You probably need to add a CSS rule if you want the individual widget items to appear "inline-block" (horizontally) instead of block (stacked vertically). It would look something like this:

    #mycustomwidgetarea aside {
       display: inline-block;
    };
  3. Aus Digital Media
    Member
    Posted 10 months ago #

    Thanks for replying CrouchingBruin.

    I added `#Homepage Widget Area &cells=2 {
    display: inline;
    };
    ` to my themes custom css page but the result is the same as before.

    See the homepage here http://www.thewattletree.com

  4. CrouchingBruin
    Member
    Posted 10 months ago #

    According to your original post, this is one of the parameters for register_sidebar:

    'id' => 'mycustomwidgetarea',

    That should mean that your new widget area has an ID of mycustomwidgetarea, and that's how you would refer to it in your CSS, not with the widget name Homepage Widget Area, which is how you would see it if you go to Appearances > Widgets from your dashboard.

    When you go to Appearances > Widgets, do you see your widget area there, where you can drag widgets into? Have you added any widgets? And where in your page did you add the new sidebar? I don't see it either there or in your source code. Did you add it to one of your templates?

  5. Aus Digital Media
    Member
    Posted 10 months ago #

    Hi again.
    Ok I have changed the code to 'id' => 'mycustomwidgetarea', in the custom css sheet.

    Yes I have the widgetized area available within the dashboard and I have 2 widgets added to it.
    See on the homepage of my site there is a social media wieget and a search widget placed in this widget area.

  6. CrouchingBruin
    Member
    Posted 10 months ago #

    I just took a look at your site using Firefox. Wow, that's very interesting. You have two widgets in the middle of your content area, and there's no widget container (sidebar) that contains them. That's why the CSS I first provided isn't working.

    OK, here's a very crude way to do it. Copy and paste this to your custom CSS file:

    /* Display rules for the Subscribe widget */
    #woo_subscribe-3 {
    width: 200px;
    display: inline-block;
    }
    /* Display rules for the search widget */
    #woo_search-2 {
    width: 300px;
    display: inline-block;
    margin-left: 20px;
    }

    You can adjust the widths for the different elements above if they are too wide or narrow. The margin-left line is the amount of spacing between the two widgets.

  7. Aus Digital Media
    Member
    Posted 10 months ago #

    ok thanks but still no joy. The 2 widgets are still not side by side.

  8. Aus Digital Media
    Member
    Posted 10 months ago #

    PS heres the css code so far `#mycustomwidgetarea aside {
    width: 300px;
    display: inline-block;
    margin-left: 20px;
    };
    /* Display rules for the Subscribe widget */
    #woo_subscribe-3 {
    width: 300px;
    display: inline-block;
    margin-left: 20px;
    }
    /* Display rules for the search widget */
    #woo_search-2 {
    width: 300px;
    display: inline-block;
    margin-left: 20px;
    }`

  9. CrouchingBruin
    Member
    Posted 10 months ago #

    It looks like it's almost there, because the search widget picked up the correct CSS and its width is narrower than it used to be. For some reason, the social media widget isn't picking up its CSS.

    Can you try taking this part out?

    #mycustomwidgetarea aside {
    width: 300px;
    display: inline-block;
    margin-left: 20px;
    };
  10. Aus Digital Media
    Member
    Posted 10 months ago #

    Ok I have replaced all the previous css code with that last one. But no luck .

  11. CrouchingBruin
    Member
    Posted 10 months ago #

    It looks like you removed those widgets? I don't see them anymore.

  12. Aus Digital Media
    Member
    Posted 10 months ago #

    Yes Just for the moment till I sort out the code.
    Just in case the client is watching.

  13. alchymyth
    The Sweeper & Moderator
    Posted 10 months ago #

    alternative approach:

    you can give your widget area a container div with specific css class by changing this:

    <?php
     // Custom widget Area Start
     if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Widget Area &cells=2') ) : ?>
    <?php endif;
    // Custom widget Area End
    ?>

    to:

    <?php if( is_active_sidebar( 'mycustomwidgetarea' ) ) : ?>
    <div class="homepage-widget-area">
    <?php // Custom widget Area Start
    dynamic_sidebar('mycustomwidgetarea');
    // Custom widget Area End ?>
    </div>
    <?php endif; ?>

    http://codex.wordpress.org/Function_Reference/is_active_sidebar
    http://codex.wordpress.org/Function_Reference/is_active_sidebar#Examples

    in your stylesheet, use this to format the widgets side-by-side;
    example:

    .homepage-widget-area { float: left; width: 100%; clear: both; }
    .homepage-widget-area aside { width: 50%; float: left; }
  14. Aus Digital Media
    Member
    Posted 10 months ago #

    Ah thanks alchymyth.
    That's got it sorted.
    Cheers :)

  15. WP Sites - Brad Dalton
    Member
    Posted 3 months ago #

    How about if you're using 2 separate widget areas side by side?

    I assume the above CSS works for one widget area populated by 2 widgets.

Reply

You must log in to post.

About this Topic

Tags