How do I use featured images on index.php?

Question

In 'Reading Settings' I have chosen the static-page drop-down menu of a page I created to be the post page.

I've put the html, php, and css from my page.php in index.php to style it. I'm unable to get the featured image. The php I use to get it on page.php isn't working. It's not rendering any html. Also <?php the_title(); ?> is pulling up the title of the most recent blog post, not the page title of the page I have switched over.

This is how I"m generating the featured image on page.php

            <div class="single-image-anchor">
                <?php if (has_post_thumbnail( $post->ID ) ): ?>
                <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                <div class="single-image" style="background-image: url('<?php echo $image[0]; ?>')">
                <?php endif; ?>
            </div>

I am fairly new to Wordpress so thanks in advance.

Answer 1

This is not trivial to do as once you have set a specific page to be an aggregation of posts (being a posts page), wordpress will "forget" the initial information it gets of the page itself and will behave like it was a normal home page of a blog. This means that all the global variables used in the loop will not be ralated and will not indicate the page itself, and therefor API like the_title that rely on the global information will not return the same values as it would have if it was a normal page.

The way to solve this, is to create a specific page template to be used with this page, and in it use get_option( 'page_for_posts' ) as the post id parameter used to all the API calls that you make, so instead of has_post_thumbnail( $post->ID ) you will have has_post_thumbnail( get_option( 'page_for_posts' ) )

Answer 2

One example is Twenty Fifteen which uses a template tag in the content.php files like this:

twentyfifteen_post_thumbnail();

And then the function for the template tag in inc/template-tags.php:

if ( ! function_exists( 'twentyfifteen_post_thumbnail' ) ) :
/**
 * Display an optional post thumbnail.
 *
 * Wraps the post thumbnail in an anchor element on index views, or a div
 * element when on single views.
 *
 * @since Twenty Fifteen 1.0
 */
function twentyfifteen_post_thumbnail() {
    if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) {
        return;
    }

    if ( is_singular() ) :
    ?>

    <div class="post-thumbnail">
        <?php the_post_thumbnail(); ?>
    </div><!-- .post-thumbnail -->

    <?php else : ?>

    <a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
        <?php
            the_post_thumbnail( 'post-thumbnail', array( 'alt' => get_the_title() ) );
        ?>
    </a>

    <?php endif; // End is_singular()
}
endif;

Not sure i understand your title question however you can take a look in the archive.php file and you'll see this code to display the archive page title:

<header class="page-header">
        <?php
            the_archive_title( '<h1 class="page-title">', '</h1>' );
            the_archive_description( '<div class="taxonomy-description">', '</div>' );
        ?>
    </header><!-- .page-header -->

Answer 3

             <div class="page-section clear">
                <div class="single-image-anchor">
                <?php if (get_option( 'page_for_posts' ) ): ?>
                <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_option( 'page_for_posts' )), 'single-post-thumbnail' ); ?>
                <div class="single-image" style="background-image: url('<?php echo $image[0]; ?>')">
                <?php endif; ?>
                </div>
            </div>
        <h1 class='title'><?php if(get_option( 'page_for_posts' ) ) echo get_the_title( get_option( 'page_for_posts' ) ); ?> </h2>
        <h1><?php _e( 'Latest Posts', 'html5blank' ); ?></h1>