.hentry to two column layout (origin theme)

  • Unknown's avatar
    papallas · Member ·

    Hello all,

    I’m doing some CSS style modifications on an origin theme (using a child theme) (link here) and I’m having some trouble. Initially the theme had a side bar to the right and one column on the left. I have removed the side bar and used .hentry to create two columns. However as you can see there is this weird thing going on with some posts having more top space than others. I’ve tried a few things but I can’t figure out why this is happening. Probably I’m not doing this properly as I have no coding experience.

    I would appreciate your thoughts on this.
    Thank you.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    papallas · Member ·

    Ok I have had some progress… I have used the following code in order to differentiate between even and odd posts to separate them in two separate categories (left_column and right_column) so I can split them using CSS. However, it gets all the posts that was supposed to be in the left_column and display them as first and then the other ones, which I guess makes sense but I don’t know how to fix it.

    Code: 

    get_header(); // Loads the header.php template. ?>

	<?php do_atomic( 'before_content' ); // origin_before_content ?>

	<div id="content">

		<?php do_atomic( 'open_content' ); // origin_open_content ?>

		<div class="hfeed">

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="left-column">

	<?php do_atomic( 'before_entry' ); // origin_before_entry ?>

						<div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">

							<?php do_atomic( 'open_entry' ); // origin_open_entry ?>

							<div class="sticky-header">

								<?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>

								<?php echo apply_atomic_shortcode( 'byline', '<div class="byline">' . __( '[entry-published] &middot; by [entry-author] &middot; in [entry-terms taxonomy="category" before=""] [entry-edit-link before=" &middot; "]', 'origin' ) . '</div>' ); ?>

							</div><!-- .sticky-header -->

							<?php if ( current_theme_supports( 'get-the-image' ) ) {

								if ( is_sticky ( $post->ID ) ) {

									get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'single-thumbnail', 'image_class' => 'featured' ) );

								} else {

									get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'thumbnail', 'image_class' => 'featured' ) );

								}

							} ?>

							<div class="entry-summary">

								<?php the_excerpt(); ?>

								<?php wp_link_pages( array( 'before' => '<p class="page-links">' . __( 'Pages:', 'origin' ), 'after' => '</p>' ) ); ?>

							</div><!-- .entry-summary -->

							<?php do_atomic( 'close_entry' ); // origin_close_entry ?>

						</div><!-- .hentry -->

					<?php do_atomic( 'after_entry' ); // origin_after_entry ?>

</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="right-column">

		<?php do_atomic( 'before_entry' ); // origin_before_entry ?>

						<div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">

							<?php do_atomic( 'open_entry' ); // origin_open_entry ?>

							<div class="sticky-header">

								<?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>

								<?php echo apply_atomic_shortcode( 'byline', '<div class="byline">' . __( '[entry-published] &middot; by [entry-author] &middot; in [entry-terms taxonomy="category" before=""] [entry-edit-link before=" &middot; "]', 'origin' ) . '</div>' ); ?>

							</div><!-- .sticky-header -->

							<?php if ( current_theme_supports( 'get-the-image' ) ) {

								if ( is_sticky ( $post->ID ) ) {

									get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'single-thumbnail', 'image_class' => 'featured' ) );

								} else {

									get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'thumbnail', 'image_class' => 'featured' ) );

								}

							} ?>

							<div class="entry-summary">

								<?php the_excerpt(); ?>

								<?php wp_link_pages( array( 'before' => '<p class="page-links">' . __( 'Pages:', 'origin' ), 'after' => '</p>' ) ); ?>

							</div><!-- .entry-summary -->

							<?php do_atomic( 'close_entry' ); // origin_close_entry ?>

						</div><!-- .hentry -->

					<?php do_atomic( 'after_entry' ); // origin_after_entry ?>

</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

		</div><!-- .hfeed -->

		<?php do_atomic( 'close_content' ); // origin_close_content ?>

		<?php get_template_part( 'loop-nav' ); // Loads the loop-nav.php template. ?>

	</div><!-- #content -->

	<?php do_atomic( 'after_content' ); // origin_after_content ?>

<?php get_footer(); // Loads the footer.php template. ?>

    CSS here: 

    div#left-column {
	width: 330px;
	float: left;
	clear: none;
    margin: 0px 20px 20px;

	}
div#right-column {
	width: 330px;
	float: left;
	clear: none;
    margin: 0px 20px 20px;

	}
  • Unknown's avatar
    lizthefair · Member ·

    I’m glad you are making progress, but it looks like you have a self-hosted WordPress site. That means you’ll get much better help over on the WordPress.ORG support forum.

    wordpress.org/support/

    This is a support form for blogs hosted on WordPress.COM

    WordPress.com vs. WordPress.org

  • Unknown's avatar
    designsimply · Member ·

    Because you are working with the Origin theme on a self-hosted WordPress setup, the best place to ask for help would be at http://wordpress.org/support/theme/origin

    Before you head over there, here are some ideas:

    Use the CSS3 property columns-count. The downside is that it’s not supported in some IE browsers, see http://caniuse.com/#search=column-count , and it’s better suited for text that can break at any point, so the titles may not always stay together when you think they should.

    .hentry {
	float: none;
	width: 100%;
}

#content > div {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
}

    Another solution would be to use a script like masonry, which stacks HTML elements into a brick-like layout to prevent gaps just like the ones you’re seeing from showing up. You can find out more about masonry at http://masonry.desandro.com/

    The last solution would be to actually split the content area into two div columns and use a set number of posts per column. That may not work well if the posts have very different heights like yours do with some containing images and some not. Also, an edit like that would require more in-depth help from someone willing to volunteer their time to help you in the WordPress.org forums at http://wordpress.org/support/theme/origin or http://wordpress.org/support/

  • The topic ‘.hentry to two column layout (origin theme)’ is closed to new replies.