How can I change the look of a post as is displayed

Question

In TwentyTwelve index.php:

<?php while ( have_posts() ) : the_post(); ?>
   <?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>

the line in the middle is loading the content.php to show the posts on the homepage.

a. In content.php, the_post_thumbnail() in line 18 is responsible for the image, specifically the Featured Image, of a post.

b. And this portion is responsible for the Title of the post:

<h1 class="entry-title">
       <a href="https://wordpress.stackexchange.com/questions/103903/<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
    </h1>

c. The content or excerpt is responsible for the details of the post:

<?php the_excerpt(); ?>

<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>

d. And the whole <footer class="entry-meta"> ... </footer> is responsible for the author information and post information etc.

And the code-blocks are conditional specific to different pages, like:

is_single() – Detail of a Post
is_archive() – Archive of posts, can also refer to day-month-year archives
is_home() – Index of the site
is_front_page() – If you have any front-page.php
is_page() – The detail page of any page content
is_search() – For search result page

Now,
Specific to your problem, just make a new page called content-custom.php with:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <h1 class="entry-title"><?php the_title(); ?></h1>

    <?php if ( has_post_thumbnail() ) : ?>
    <div class="post-image">
        <?php the_post_thumbnail(); ?>
    </div> <!-- .post-image -->
    <?php endif; ?>

    <div class="post-details">
        <div class="post-meta">
            <?php // Thanks to Ian Stewart for the bit of codes below ?>
            <span class="author vcard"><a class="url fn n" href="https://wordpress.stackexchange.com/questions/103903/<?php echo get_author_posts_url( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
            <span class="meta-sep"> | </span>
            <span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
        </div> <!-- .post-meta -->
        <div class="post-text">
            <?php // For a simple exceprt of the body content ?>
            <?php the_excerpt(); ?>
        </div> <!-- .post-text -->
    </div> <!-- .post-details -->

</article><!-- #post -->

And you have to add a simple float to the image div in your style.css:

.post-image{ float: left; }

Now, in your index.php, instead of loading any custom template, load your custom content page using the following code within your WordPress loop:

<?php get_template_part( 'content', 'custom' ); ?>

Related Posts: