Support » Fixing WordPress » Two-column layout (blogposts and sidebar) on home page

  • Resolved Golok

    (@golok)


    Hello,

    I’m working with a child theme of Twenty Seventeen. I’m using a static page as a home page where I’m trying to get a serie of latest posts on the left and a sidebar on the right. For this, I modified the front-page.php and content-front-page.php as below:

    front-page.php

    get_header(); ?>
    	
    <div class="wrap">
    
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    	
    			<?php // Show the selected frontpage content.
    			if ( have_posts() ) :
    				while ( have_posts() ) : the_post();
    					get_template_part( 'template-parts/page/content', 'front-page' );
    				endwhile;
    			else :
    				get_template_part( 'template-parts/post/content', 'none' );
    			endif; ?>
    	
    			<?php
    			// Get each of our panels and show the post data.
    			if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.
    	
    				/**
    				 * Filter number of front page sections in Twenty Seventeen.
    				 *
    				 * @since Twenty Seventeen 1.0
    				 *
    				 * @param int $num_sections Number of front page sections.
    				 */
    				$num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
    				global $twentyseventeencounter;
    	
    				// Create a setting and control for each of the sections available in the theme.
    				for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
    					$twentyseventeencounter = $i;
    					twentyseventeen_front_page_section( null, $i );
    				}
    	
    		endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>
    	
    		</main><!-- #main -->
    		<div><?php get_sidebar(); ?></div>
    	</div><!-- #primary -->
    
    </div>
    
    <?php get_footer();

    content-front-page.php

    <div class="panel-content">
    	<div class="wrap">
    		<div class="latest-posts>
    		<?php the_content(); ?>
    		<?php
    		  $args = array(
    		    'post_type' => 'post', // enter custom post type
    		    'orderby' => 'date',
    		    'order' => 'DESC',
    		    'posts_per_page' => 5,
    		    'offset'=> 1
    		  );
    		
    		  $loop = new WP_Query( $args );
    		  if( $loop->have_posts() ):
    		  while( $loop->have_posts() ): $loop->the_post(); global $post;
    		  
    			  echo '<div style="border-top: 1px solid #666; margin: 20px 0;"></div>';
    			  echo '<div class="casestudy"><a href="'.get_permalink().'" class="anchor-hover">'.get_the_post_thumbnail( $id, array(120,120) ).'<span class="details"><h3>'.get_the_title().'</h3></a><p class="entry-date published">'.get_the_date().'</p><p class="desc">'.get_the_excerpt().'</p></span></div><br />';
    		
    		  endwhile;
    		  endif;
    		?>
    		</div><!-- .latest-posts -->
    
    		</div><!-- .wrap -->
    	</div><!-- .panel-content -->
    
    </article><!-- #post-## -->

    I managed to get both latest posts (offset 1) and a sidebar on my home page, but I cannot figure out how to get these two blocs set in two columns; whatever I do, my sidebar stays below my latest posts.

    I’ve obviously messed up by trying to use the #secondary div; anyone to help me with this?

    Optionally, if one could also add the code to display the latest post above the
    lits of older posts (a post that will be set with more emphasis), it would be fantastic!

    No styling is need — unless of course it affects my two columns problem; it’s the code that gives me headache.

    In advance thank you zillions for your precious help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • you can do this with css. take a look at

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    this might help.

    Wow, thanks a lot @danthefan for this link! It definitely helps a lot to understand containers and items in CSS.

    When I start from scratch I usually don’t have much problem, but since I’m working on existing code and css, it just can’t find my way.

    Anyone who could spot where I got it wrong?

    you have to make a wrapping <div> around the two blocks, give it a display: flex;

    • This reply was modified 1 year, 2 months ago by danthefan.

    Fantastic, it worked.

    It took me quite a while to figure out where to insert this famous flex (and my code is still in a mess), but I’m on the right track: my home page is set on two columns as I wished.

    I’m not sure if this was normal, but to avoid having the two columns sitting next to each other on mobile devices, I had to use the following media queries to apply different widths:

    @media screen and (min-width: 30em) {	
    	.home-left { width: 100%; }
    	.home-right { width: 100%; }
    }
    
    @media screen and (min-width: 48em) {
    	.home-left { width: 58%; }
    	.home-right { width: 36%; }
    }

    Once again, thanks a lot @danthefan.

    • This reply was modified 1 year, 2 months ago by .
    • This reply was modified 1 year, 2 months ago by .

    maybe you can make it with only one media query. that is all right.

    but, don’t use em on media queries, unless you have a good reason. em is based on the font size of the body element. in most browsers it’s 16px, but if you change it, your queries will also change. as all devices do have an explicit width in pixel, use px.

    here’s a list with common device widths:

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Thanks @danthefan for this em advice. Actually I was only copying the formatting from Twenty Seventeen’s style.css. I’ve got to do some homework.

    And thanks a bunch for this “Media Queries for Standard Devices” link, that exactly the reference I needed!

    Closing the topic as resolved. Thanks @danthefan.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Two-column layout (blogposts and sidebar) on home page’ is closed to new replies.