WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

When an article is posted it comes out like this:
Where the title is on top, then the picture, then the image.

enter image description here

But what I would like to do is how technobuffalo.com has it:

enter image description here

How is this done? is a template html copied and pasted for each new article and displays in that format or does WordPress render it for each posting?


share|improve this question
The look of the post-details, depends on the theme you are using. And it's obviously a bigger matter of CSS, compared to HTML. I guess you are using your own custom theme. For us, from a distant perspective, it'd be better if you post your index.php, functions.php codes for us. You can use Pastebin.com for pasting the bigger codes. :) – Mayeenul Islam Jun 23 '13 at 5:29
im not using any template, its a fresh installation of wordpress. – Sarmen B. Jun 23 '13 at 5:35
Then please confirm that, you are using the default theme TwentyTwelve. – Mayeenul Islam Jun 23 '13 at 5:41
i am using the theme named Alexandria by ThemeAlley.com but i'll still understand what to do if you explain it using twentytwelve – Sarmen B. Jun 23 '13 at 5:43
up vote 2 down vote accepted

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="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>

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

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="<?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' ); ?>
share|improve this answer
thank you so much, you have thought me how to customize a posts page. Thank you so much for that. Now all i have to do is setup the css. – Sarmen B. Jun 23 '13 at 7:39
Mention not please. :) – Mayeenul Islam Jun 23 '13 at 8:59

Look into your archive.php and single.php files in your template. Then modify the html output of those files, and also fix css related to those items.

share|improve this answer
I'm afraid, the question is not specific to archive or detail of a post. The technobuffalow screenshot is clearly showing a home page-display of the post, so it means the index.php. – Mayeenul Islam Jun 23 '13 at 5:48

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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