Showing Twenty Fourteen Thumbnail in A Smaller Size

If you are currently using Twenty Fourteen theme, the WordPress 3.9 default theme, you will notice the big featured image that I wrote in this page, about how to properly use this feature.

In this post, I will show you how I remove this default featured image and replace the Twenty Fourteen thumbnail with smaller size images.

What you need to know:

1. Creating Child theme is always the best idea, so you won’t loose all modification next time it’s updated.

2. In your dashboard, in “Settings” and “Media” you will see 3 image sizes that WordPress use by default, which is, “Thumbnail size”, “Medium size”, and “Large size”.

We will use the “Thumbnail size” setting, which is on 150×150 px (150px width and 150px height).

3. Post thumbnail WP codex page.

4. You know how to show the thumbnail or featured image, if you don’t, no worries, it’s easy, in each post, you can look at the right sidebar on your post page in dashboard, you should see, “Featured Image” tab, and click the “Set featured image” to show your thumbnails.

What we will achieve in this post:

1. Displaying post thumbnail in both, homepage and single page (post page). So whenever user click the thumbnail in homepage, it will bring them to post page, and the thumbnail is still there.

2. Displaying post thumbnail only in homepage. (which I personally prefer).
This means, your thumbnails will only be displayed in homepage, and won’t be displayed in your post page.

Let’s get started.

How to Remove Twenty Fourteen Author Name or Link

How to show Twenty Fourteen Thumbnail Steps

1. Inside the child theme, copy the original parent theme’s Twenty Fourteen content.php

You can do this either in your cPanel or with FTP client. In the video, I use FileZilla.

2. Once you have content.php in the child theme, open it, and delete the following php code which is red framed in the image below.

<?php twentyfourteen_post_thumbnail(); ?>

This will remove the default Twenty Fourteen thumbnail.

3. You can copy and paste this following code, and paste it in the area that I marked in the screenshot below, basically, after div class=“entry-content” 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; ?>

The code above, will show thumbnails with 150x150px dimension, and has “alignleft” class, both in homepage and in post page.

If this is what you want, you can stop right here, but if you want to display it only in homepage, you can continue to read this post.

• Is my site loading fast? I use this shared hosting
• Try my theme >

Showing the thumbnails only in Homepage and not in the post pages

To do this, we’ll need to modify most of the codes in the content.php of the child theme from step 1 above.

So delete the whole code that is red framed in the picture below, and replace the code with this following code, and save the file.

Paste the code in the red highlighted area in the above picture:

<?php if ( is_search() ) { ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

<?php } elseif ( is_home() ) { ?>
<div class="entry-content">
<?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 the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) ); ?>
</div><!-- .entry-content -->

<?php } else { ?>
<div class="entry-content">
<?php
the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) );
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) );
?>
</div><!-- .entry-content -->
<?php } ?>

If you use FTP client, don’t forget to update back to the server.

Refresh your site, and it should display the thumbnail only in the homepage.

In the video I forgot to mention the added thumbnail style example, so you can modify this style with this tutorial, or just copy the following css code to your child theme’s style.css.

/*thumbnail*/
img.wp-post-image{
background: grey;
border: 1px solid #ddd;
padding:6px;
}

So, that’s how I did it, if you have more ways, please leave your opinion below.