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.
1 | <?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:
1 2 3 4 5 | <?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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?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">→</span>', 'twentyfourteen' ) ); ?> </div><!-- .entry-content --> <?php } else { ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</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.
1 2 3 4 5 6 | /*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.
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
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.
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
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
Will this show in post list page?
Hello, there are two options written above, showing in homepage and post list page, and showing only in homepage.
Thanks a lot!
Great Help…