Set Thumbnail Image in Blog Post WordPress Tutorial

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)
Loading...

Set Thumbnail

How to set Thumbnail image in WordPress blog posts actually if your post has image then looks good and attractive so this necessary to add some image Now to set Thumbnail in your post an option come while creating or editing new blog post called “set featured image” some time below “Tags” if your WordPress theme support that option you can also try our WordPress themes Wrock Metro or Magazine Style these are fully function and support awesome features with SEO optimize.

Set Thumbnail Image in WordPress post:

 Steps 1:Open post where you want to add thumbnail then click edit it comes to your dashboard post editor click on “set featured image” as shown in below screenshot:

Set Featured Image

Set Thumbnail

Step 2:Select any image from from your WordPress post or upload new one and you are done

Set Thumbnail
Select featured image

you can Give title, alt tag ,description, and caption to this image also you can set image site or direct usr or attachment usl to your image.

After selecting image it show like this:

Set Thumbnail

Finish update or publish your post thumbnail will automatically show already told your if your theme support this this thumbnail work on any widget and plugins like recent post.

Set Thumbnail

Note: you can also remove thumbnail from post with same option so try your self.If you theme does no support thumbnail feature then read below.

Add thumbnail feature in WordPress theme:

In latest theme almost every theme support thumbnail you can read WordPress Codex or just open up your theme’s functions.php file in your favorite editor or create it if there’s no such file in your theme folder. Add this little code snippet to this file:

add_theme_support('post-thumbnails');

For backwards compatibility you should wrap this inside a function check for the new add_theme_support:

if ( function_exists('add_theme_support' ) )
add_theme_support('post-thumbnails');

This makes sure WordPress installation prior to 2.9 won’t get screwed up when using a theme with this new feature.After you’ve added the above mentioned code into your functions.php file there should be a new Post Thumbnail box in the WordPress editor view on the right side we already discuss above.

Display The Post Thumbnail in Your Theme

Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your index.php file

<?php the_post_thumbnail(); ?>

This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as:

<?php the_post_thumbnail('thumbnail'); ?>

But of course you can grab the other sizes WordPress automatically creates when you upload an image:

<?php the_post_thumbnail('medium'); ?>

<?php the_post_thumbnail('large'); ?>

The code will output a generic <img /> tag with a class of wp-post-image.

Customize you Output: If you want to adjust the generated output of the <img /> tag you can do this by using some array stuff. So let’s say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so

<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>

If you want to add more than one class you can do this like so

<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>

And you can add any attributes to the <img /> tag like a title, rel or an alt attribute. For accessibility reasons you should always add at least the alt-attribute

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>

This how you can set thumbnail image in WordPress if you any question please write in comment box.

personal technology columnist, author and founder of wRock.org, a widely read tech and how-to blog since 2009. Wants to explore and share interesting Tips, Tutorials and More. Also WordPress Theme Designer @ here. Contact: Contact

Leave a Reply

Your email address will not be published. Required fields are marked *