How I add thumbnails with Twenty Twelve theme

I actually already considered posting this tip long time ago, but I always forgot, and then I received a message from my YouTube channel if showing thumbnails in Twenty Twelve theme is possible.

Take a look at this page if you use 2014 theme.

Also a few months ago, I saw someone asked the same question in a forum.

Then I saw many people are using Twenty Twelve theme, and I can understand why, as it’s a clean theme, and also a responsive one.

The only drawback is this theme has thumbnails set, but above the title, and a little bit big in size.

So we are going to add thumbnails using Twenty Twelve child theme, and default size of a thumbnail in WP which is 150x150px, haven’t created child theme? visit this page to see how I did it, easy and straightforward.

Also important to know, you have to set featured image in your post to show these thumbnails.

Steps to add Twenty Twelve thumbnails

1. Copy content.php from parent to the child theme

Showing Twenty Fourteen Thumbnail in A Smaller Size

2. Delete these code of content.php (the red bordered in the screenshot) from the child theme

Default Twenty Twelve thumbnails — Remove these code

3. Then, below this code <div class=”entry-content”> add theses code:

<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>
</a>
<?php endif; ?>

<?php if ( has_post_thumbnail()) : ?>

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

</a>

<?php endif; ?>

This will display thumbnails in homepage and in post page.

If you want to only displaying them in homepage, add this code instead of above:

<?php if(is_home() ) { ?>

<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>
</a>
<?php endif; ?>

<?php } ?>

<?php if(is_home() ) { ?>

<?php if ( has_post_thumbnail()) : ?>

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

</a>

<?php endif; ?>

<?php } ?>

Thumbnails only on post - Twenty Twelve — Thumbnails only on post – Twenty Twelve

We’re done! If you want to style the css you can use following, paste them in style.css of the child theme. (Don’t forget click “Update File“).

/*Thumbnails CSS*/

.wp-post-image { 
border:1px solid #0B1C09;
padding:2px;
background:#B1B8B0;
}

/*Thumbnails CSS*/

.wp-post-image {

border:1px solid #0B1C09;

padding:2px;

background:#B1B8B0;

}

Modify them as you like.

How I add thumbnails with Twenty Twelve theme

Steps to add Twenty Twelve thumbnails

Rate This Post?

Latest Posts