wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Showing Twenty Fourteen Thumbnail in A Smaller Size

WordPress themes

Showing Twenty Fourteen Thumbnail in A Smaller Size

Last updated on February 18, 2017
Posted on April 24, 2014

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.

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(); ?>
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:

<?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; ?>
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.

  • 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.

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:

<?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.

featured image thumbnail twenty fourteen twentyfourteen

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← How To Style WordPress Caption in WP Twenty Fourteen Child
→ Change Default Green Color WP 2014 Theme

Comments

  1. Imre says

    June 13, 2014 at 3:59 pm

    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

    • Kim Muellner says

      June 13, 2014 at 4:28 pm

      Hey Imre 🙂

      It’s not in functions.php, but it is inside content.php (make sure it is copied in to the child theme. In this video, at 6 minutes 42 seconds. In sublime text, around line 14.

      http://youtu.be/oLct6SLTtjc?t=6m42s

      Let me know if it works.

      Kindly Kim.

      • Imre says

        June 13, 2014 at 7:57 pm

        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

    June 23, 2014 at 2:15 am

    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

  3. Pintu says

    October 8, 2014 at 9:14 am

    Will this show in post list page?

    • Kim Muellner says

      October 10, 2014 at 4:13 pm

      Hello, there are two options written above, showing in homepage and post list page, and showing only in homepage.

  4. Samir says

    October 15, 2015 at 4:58 am

    Thanks a lot!
    Great Help…

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen
  • Setting Autoplay Twenty Fourteen Slider

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept