Two-column layout (blogposts and sidebar) on home page
-
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.
- The topic ‘Two-column layout (blogposts and sidebar) on home page’ is closed to new replies.