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 How I add thumbnails with Twenty Twelve theme

WordPress themes

How I add thumbnails with Twenty Twelve theme

Last updated on February 18, 2017
Posted on July 3, 2014

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.

Twenty Twelve thumbnail on homepage
Twenty Twelve thumbnail on homepage

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

Featured image in post
You have to set Featured image in post

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

This will display thumbnails in homepage and in post page.

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

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

 

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;
}

Modify them as you like.

featured image thumbnail twenty twelve

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
← Change Default Green Color WP 2014 Theme
→ How to Remove Twenty Fourteen Author Name or Link

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
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • 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