Post in Confusing Order in Homepage Loop

  • Hi! With the current layout on a laptop or desktop, my posts show in two horizontal columns showing my newest (#1, 2, etc) aligned with older posts (#5, 6, etc) next to each other which visibly confuses the reader. They actually read 5 and 6 before 3 like this:

    1 5
    2 6
    3 7
    4 8

    I assume this is probably so it looks better on a phone or mobile device.

    Is it possible for the theme to recognize the visitor’s device or computer so that it shows in this order instead, this way the latest posts show up and in better order that doesn’t confuse, left to right:

    1 2
    3 4
    5 6
    7 8

    BTW, absolutely love your theme and this is the only thing that I wish was different or could be changed. Can it be changed on our end or yours?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author ThemesMatic

    (@themesmatic)

    Yes, there is a way to do this that I figured out recently.
    I’ll post it here in a few minutes.
    Glad you like the theme.
    If you could leave a review you would be awesome! Thanks.

    Theme Author ThemesMatic

    (@themesmatic)

    Here is the 1st option (the easiest).
    The downside is it removes the sidebar from the home page but it has more of the magazine style seen on major websites.
    Change this code on home.php:

    <div class="wrap">
	<div class="container">
		<div class="col-md-8 blog">

		<?php if( !is_paged() ) {

			get_template_part( 'content', 'intro');

		} ?>

		<div class="row">

			<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_post(); ?>
			    <div class="post blog-block">
					<h2 id="post-<?php the_ID(); ?>" <?php $classes = array('align-left','social-magazine-one-post-link',); post_class( $classes ); ?>><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

						<?php get_template_part( 'post', 'date' ); ?>

						<?php if ( has_post_thumbnail() ) { the_post_thumbnail( array(300, 300) ); } ?>

						<?php get_template_part( 'post','meta' ); ?>

						<?php the_excerpt(); ?>
							<p class="posted-in">
								<small>
								<?php if (has_category()) { ?><?php esc_attr_e('Posted in ', 'social-magazine' ); ?><?php the_category(', ') ?><?php } ?>
								<?php the_tags(__('Tagged with: ','social-magazine')); ?>
								</small>
							</p>
				</div><!-- /blog-block -->

			<?php endwhile; ?>

			</div>

				<div class="alignleft"><?php previous_posts_link( __( '← Previous Article', 'social-magazine' ) ); ?></div>
				<div class="alignright"><?php next_posts_link( __( 'Next Articles »', 'social-magazine' ) ); ?></div>

		<?php

			endif; ?>

</div><!-- /col-md-8 blog -->
<?php get_sidebar(); ?>
</div><!-- /container -->
<?php get_footer(); ?>

    to this: 

    <div class="wrap">
	<div class="container">
		<div class="blog">

		<?php if( !is_paged() ) {

			get_template_part( 'content', 'intro');

		} ?>

		<div class="row">

			<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_post(); ?>
			    <div class="post blog-block">
					<h2 id="post-<?php the_ID(); ?>" <?php $classes = array('align-left','social-magazine-one-post-link',); post_class( $classes ); ?>><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

						<?php get_template_part( 'post', 'date' ); ?>

						<?php if ( has_post_thumbnail() ) { the_post_thumbnail( array(300, 300) ); } ?>

						<?php get_template_part( 'post','meta' ); ?>

						<?php the_excerpt(); ?>
							<p class="posted-in">
								<small>
								<?php if (has_category()) { ?><?php esc_attr_e('Posted in ', 'social-magazine' ); ?><?php the_category(', ') ?><?php } ?>
								<?php the_tags(__('Tagged with: ','social-magazine')); ?>
								</small>
							</p>
				</div><!-- /blog-block -->

			<?php endwhile; ?>

			</div>

				<div class="alignleft"><?php previous_posts_link( __( '← Previous Article', 'social-magazine' ) ); ?></div>
				<div class="alignright"><?php next_posts_link( __( 'Next Articles »', 'social-magazine' ) ); ?></div>

		<?php

			endif; ?>

</div><!-- /col-md-8 blog -->
</div><!-- /container -->
<?php get_footer(); ?>
    Theme Author ThemesMatic

    (@themesmatic)

    Scratch everything above and ignore it.

    I figured out a temp work around that looks good.
    In home.php starting with <div class=”wrap”> replace it with this:

    <div class="wrap">
    	<div class="container">
    		<div class="blog">

    		<?php if( !is_paged() ) {

    			get_template_part( 'content', 'intro');

    		} ?>

			<div class="home-section">
    			<?php if (have_posts()) : ?>
    			<?php while (have_posts()) : the_post(); ?>
    			<div class="col-md-6">
    			    <div class="post blog-block">
    					<h2 id="post-<?php the_ID(); ?>" <?php $classes = array('align-left','social-magazine-one-post-link',); post_class( $classes ); ?>><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

    						<?php get_template_part( 'post', 'date' ); ?>

    						<?php if ( has_post_thumbnail() ) { the_post_thumbnail( array(300, 300) ); } ?>

    						<?php get_template_part( 'post','meta' ); ?>

    						<?php the_excerpt(); ?>
    							<p class="posted-in">
    								<small>
    								<?php if (has_category()) { ?><?php esc_attr_e('Posted in ', 'social-magazine' ); ?><?php the_category(', ') ?><?php } ?>
    								<?php the_tags(__('Tagged with: ','social-magazine')); ?>
    								</small>
    							</p>
    				</div><!-- /blog-block -->
    			</div><!-- /home-section -->

    			<?php endwhile; ?>

    				<div class="alignleft"><?php previous_posts_link( __( '← Previous Article', 'social-magazine' ) ); ?></div>
    				<div class="alignright"><?php next_posts_link( __( 'Next Articles ?', 'social-magazine' ) ); ?></div>

    		<?php

    			endif; ?>

    </div><!-- /col-md-8 blog -->
    <?php get_sidebar(); ?>
    </div><!-- /container -->
    <?php get_footer(); ?>
    Theme Author ThemesMatic

    (@themesmatic)

    Next in style.css on line 126.
    Replace

    /** Masonry layout for front-page.php
-------------------------------------------------------------- */
.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
}
.blog-block {
 display: inline-block;
 padding:  .25rem;
 width:  100%;
}

    with this

    /** Masonry layout for front-page.php
-------------------------------------------------------------- */
.blog-block {
	height: 500px;
}
.home-section {
	width: 66.6666%;
	float:left;
}
    Theme Author ThemesMatic

    (@themesmatic)

    also in style.css on line 768
    replace `/** Custom Device Specific CSS
    ————————————————————– */
    @media screen and (max-width: 768px) {
    .footer-copy,
    .footer-attr p {
    float: none;
    text-align: center;
    }
    }`
    with this

    /** Custom Device Specific CSS
-------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.home-section {
	float:none;
	width: 100%;
	}
	.footer-copy,
	.footer-attr p {
	float: none;
	text-align: center;
}
}

    enjoy ?? Please leave a review + happy holidays!

    This is what I am looking for.

    I change all as you wrote.

    But I have problem with second way of change.

    1) Footer is on right side under sidebar and line from footer is under the menu.
    2)Can you do this without height: 500px; of posts?

    Thank you!

    Theme Author ThemesMatic

    (@themesmatic)

    It sounds like a div or float issue but I’m not sure.
    It would be helpful to post a link to be able to see what it is.
    Without that… all I can do is make an educated guess.

    I believe I have the height there so that all posts are all displayed in a uniform way and so that one post doesn’t mess up the structure.

    It’s the .blog-block in line 457. I changed mine to:

    .blog-block {
    height: inherit;
    }

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Post in Confusing Order in Homepage Loop’ is closed to new replies.