I'm using the Twenty Seventeen Wordpress Theme. I'm trying to do something similar to the below image for the static front page:
Currently, this is an image of what I have on my site:
Right now in my code, I have the default code from Twenty Seventeen theme's
content-front-page.php populating the the post thread. Below:
<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> > <?php if ( has_post_thumbnail() ) : $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' ); $post_thumbnail_id = get_post_thumbnail_id( $post->ID ); $thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' ); // Calculate aspect ratio: h / w * 100%. $ratio = $thumbnail_attributes / $thumbnail_attributes * 100; ?> <div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail ); ?>);"> <div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div> </div><!-- .panel-image --> <?php endif; ?> <div class="panel-content"> <div class="wrap"> <div class="entry-content"> <?php /* translators: %s: Name of current post */ the_content( sprintf( __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), get_the_title() ) ); ?> </div><!-- .entry-content --> </div><!-- .wrap --> </div><!-- .panel-content --> </article><!-- #post-## -->
My additional code is below. What I'm trying to achieve right now is to pull 3 recent posts with the post title placed over the post's featured image. I haven't completed the CSS, that's something I'll work on by myself after I can call those 3 posts to the page.
<div class="row featured-posts-box"> <ul class="top-featured-image"> <?php $recentPosts = new WP_Query(array('posts_per_page'=>'3',)); while($recentPosts->have_posts()): $query->the_post(); ?> <li class="post-thumbnail"> <span><a href="<?php the_permalink(); ?>"> <?php the_title(); ?><?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?> </a></span> </li><!-- .post-thumbnail --> <?php endwhile; ?> </ul>
The code above keeps breaking my site. I think it's the
while loop, but I'm not sure.
I don't want to use a plugin. I actually want to learn how to develop a wordpress theme.