Add Custom Size Featured Image in Blog Post

To make blog post more attractive we use featured image with every blog post. Assume that you are using a free WordPress theme and want to add custom size featured image. With a little bit of coding knowledge you can add this function easily. Here is the step by step guide to add custom size featured image in blog post. If your current theme do not support featured image then first of all add the following function in your theme’s functions.php file:

[php]

add_theme_support( ‘post-thumbnails’, array( ‘post’ ) );

[/php]

After adding the function in admin panel you can see the portion to add featured image. Here in array we add post which is the post type. If you have custom post type then change the name.

add-custom-size-featured-image

 

In front-end where you want to show featured image, add the following code:

[php]<?php the_post_thumbnail(); ?>[/php]

add-custom-size-featured-image1

 

But if you add featured image by this method then image size cannot fit in proper size. So you have to add a fixed size. Now add the following code:

[html]

add_theme_support( ‘post-thumbnails’, array( ‘post’ ) );

set_post_thumbnail_size( 290, 150); // It Creates a proportionate image 290px by 150px

set_post_thumbnail_size( 290, 150, true ); // Creates a cropped image 290px by 150px

[/html]

Here we have defined image width 290px and  height 150px. Just change the number as your theme’s requirement. Now if you want to introduce many different size featured image in different page then you have to write the function as follows:’

[html]

add_image_size( ‘medium-featured’, 250); // It Creates an image size of 300px wide with unlimited height

add_image_size( ‘medium-cropped’, 250, 290, true ); // It Creates a cropped new image 250px by 290px high

[/html]

Now in front-end you can pull out these images in two different ways:

[html]

<?php the_post_thumbnail( ‘medium-featured’ ); ?>

<?php the_post_thumbnail( ‘medium-cropped’, array(‘class’ => ‘medium-cropped’)); // added a class medium-cropped to the img tag

?>

[/html]

In second query we have added a class “medium-cropped” to design the image. If you do not want to use an class then use only first query.

Author: mytutorialguru

Share This Post On

Submit a Comment

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