I'm using the Twenty Seventeen Wordpress Theme. I'm trying to do something similar to the below image for the static front page:

![enter image description here

Currently, this is an image of what I have on my site:

enter image description here The post title is currently on the bottom of the image. I would like it to be on the image as seen in the above image.

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[2] / $thumbnail_attributes[1] * 100;

    <div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
        <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">
                /* translators: %s: Name of current post */
                the_content( sprintf(
                    __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
                ) );
        </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">
    $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' ); ?>
    </li><!-- .post-thumbnail -->

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.

  • What does it mean "keeps breaking my site"?
    – Max Yudin
    Aug 5, 2017 at 7:03
  • you should reset post data after finishing loop. use wp_reset_postdata(); right after endwhile; . and also while($recentPosts->have_posts()): $query->the_post(); line should be while($recentPosts->have_posts()): $recentPosts->the_post(); Aug 5, 2017 at 8:00
  • @SabbirHasan: if I could upvote you, I would. thank you so much. The post title being on top of the image, can be achieved through css? I'll just try getting the look that I want try on my own and if I have any questions, I'll look through the archives before posting another question. :)
    – hnewbie
    Aug 7, 2017 at 15:01
  • check my answer for this. Aug 8, 2017 at 16:04

1 Answer 1


Here is the answer for you CSS issue. yes you can achieve that layout using CSS. Just follow this structure:

<div class="parent">
  <div class="image"><img src=""/></div>
  <div class = "overlay"> Add you title here </div>

here .parent must me position:relative and .overlay must be position:absolute with 100%width and bottom:0 . you can play around with style.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.