treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Main-Content v.s. Sidebar Spacing Issues

  • Hey, I had posted about this a while back.
    I've been working on this site for a bit - http://www.onedollaronebrick.org

    - My client has requested that I make a separate template for the first page so the main content area and the sidebar are not as tall/long.

    I achieved that with the main content area, but had tried pasting in the code I had in the sidebar.php file, in place of get_sidebar(), and it makes 2 duplicate sidebars instead of 1 static sidebar.

    I want to set a custom div for the sidebar in the index, so that it becomes shorter.

    I have already enabled a JS script that makes both the main-content and the sidebar's heights equal to eachother, so that's not the issue, the dynamic PHP stuff is.

    It has been suggested that the <?php get_sidebar(); ?> function is being called twice. I just can't figure out *where* it's being called twice.

    Your help would be greatly appreciated!

    Thanks!
    Adam
  • The index page:

    <?php
    /*
    Template Name: One Dollar, One Brick: Home
    */

    get_header(); ?>
    <div id="content-wrapper">
    <div class="column" id="index-content">
    <div id="slogan"><font size="+3">All It Takes Is One Dollar.</font></div>

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <?php if ( is_front_page() ) { ?>
    <?php } else { ?>
    <?php } ?>

    <?php the_content(); ?>
    <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
    <?php edit_post_link( __( 'Edit', 'twentyten' ), '', '' ); ?>


    <?php endwhile; ?>

    </div><!-- END BODY -->


    <center><font size="5" color="#09F">
    Help Us Help The<br />
    People of Nuqui</font>
    <br /><br />

    <?php
    $args = array( 'numberposts' => 10, 'order'=> 'ASC', 'orderby' => 'title' );
    $postslist = get_posts( $args );
    foreach ($postslist as $post) : setup_postdata($post); ?>
    <div>
    <?php the_date(); ?>
    <br />
    <h2><?php the_title(); ?></h2>
    <?php the_excerpt(); ?>
    </div>
    <?php endforeach; ?>

    </center>

    <div id="primary" class="widget-area" role="complementary">
    <ul class="xoxo">

    <!-- Feedzilla Widget BEGIN -->

    <center></center>

    <!-- Feedzilla Widget END -->

    <p align="right"><?php
    /* When we call the dynamic_sidebar() function, it'll spit out
    * the widgets for that widget area. If it instead returns false,
    * then the sidebar simply doesn't exist, so we'll hard-code in
    * some default sidebar stuff just in case.
    */
    if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>





    <li id="archives" class="widget-container">
    <h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
    <ul>
    <?php wp_get_archives( 'type=monthly' ); ?>
    </ul>
    </li>

    <li id="meta" class="widget-container">
    </li>

    <?php endif; // end primary widget area ?>
    </ul>
    </div><!-- #primary .widget-area -->

    <?php
    // A second sidebar for widgets, just because.
    if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>

    <div id="secondary" class="widget-area" role="complementary">
    <ul class="xoxo">
    <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
    </ul>
    </div><!-- #secondary .widget-area -->

    <?php endif; ?>

    <?php get_footer(); ?>
  • The sidebar page:

    <div class="column" id="sidebar">
    <br />
    <center><font size="5" color="#09F">
    Help Us Help The<br />
    People of Nuqui</font>
    <br /><br />

    <?php
    $args = array( 'numberposts' => 10, 'order'=> 'ASC', 'orderby' => 'title' );
    $postslist = get_posts( $args );
    foreach ($postslist as $post) : setup_postdata($post); ?>
    <div>
    <?php the_date(); ?>
    <br />
    <h2><?php the_title(); ?></h2>
    <?php the_excerpt(); ?>
    </div>
    <?php endforeach; ?>

    </center>

    <div id="primary" class="widget-area" role="complementary">
    <ul class="xoxo">

    <!-- Feedzilla Widget BEGIN -->

    <center></center>

    <!-- Feedzilla Widget END -->

    <p align="right"><?php
    /* When we call the dynamic_sidebar() function, it'll spit out
    * the widgets for that widget area. If it instead returns false,
    * then the sidebar simply doesn't exist, so we'll hard-code in
    * some default sidebar stuff just in case.
    */
    if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>





    <li id="archives" class="widget-container">
    <h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
    <ul>
    <?php wp_get_archives( 'type=monthly' ); ?>
    </ul>
    </li>

    <li id="meta" class="widget-container">
    </li>

    <?php endif; // end primary widget area ?>
    </ul>
    </div><!-- #primary .widget-area -->

    <?php
    // A second sidebar for widgets, just because.
    if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>

    <div id="secondary" class="widget-area" role="complementary">
    <ul class="xoxo">
    <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
    </ul>
    </div><!-- #secondary .widget-area -->

    <?php endif; ?>
    </p>

    </div><!--END SIDEBAR-->
    <div style="clear:both;"></div>
    </div><!--END CONTENT WRAPPER-->
  • From what I can see, on all pages the main content and the sidebar get the same height by assigning them a fixed height -- I assume that's the Javascript you mentioned.

    On the main page, both the main content and the sidebar also get a fixed height, but too much height for the sidebar (1098 pixels, the main content is 858 pixels), so I'm wondering if your Javascript is doing it's proper job there.