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.

Set featured image for your post
Set featured image for your post

What we will achieve in this post:

Twenty Fourteen thumbnail
Twenty Fourteen thumbnail

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.

Related: 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.

Twenty Fourteen default thumbnail
Twenty Fourteen default 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:

To display thumbnails in both home and post
To display thumbnails in both home and post

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.

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.

The code which should be deleted and replaced
The code which should be deleted and replaced
Paste the "Twenty Fourteen thumbnail" code here
Paste the “Twenty Fourteen thumbnail” code here

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

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.

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

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page

Comments

  1. Imre says

    Hello Kim,

    I am a bit puzzled, I can’t find the definition of twentyfourteen_post_thumbnail() in functions.php, I think this functions doesn’t do anything at all? Where do I need to look for the definition in the theme to find it?

    Thank you.
    Imre

      • Imre says

        Hi again,

        I am learning to write themes from scratch and using the Twenty Fourteen theme as an example. I have digged a little deeper and found the function in the /inc directory of the theme, for some reason sublime was not able to find it for first.

        Thanks for the video.

        Imre

  2. Joseph says

    Hi Kim,

    Great tutorial again. May I ask you some questions:

    I don’t wanna put all images as featured image, and sometimes I want to place inside the content or at the bottom.

    1) In those cases, can we have the same thumbnail from content image as well. (not only from the featured image).

    2) And also when it open up in a single post view, can we make the image appear as it original size (I mean not show as thumbnail in post view)?

    3) Instead of manually “insert read more tag”, is there a possible to make it auto insert read more tag after certain amount of characters?

    Regards,
    Joseph