HomeBlogHow to Adjust the Size of a Featured Image on WordPress

How to Adjust the Size of a Featured Image on WordPress

Adjust size of a featured image

This article has been updated in March of 2019 to include other options for adjusting the featured image size in WordPress.

The featured image is arguably the most important piece of a blog post on a WordPress website.

After all, this is the piece of content that will visually grab your visitor’s attention. The featured image is also the image that is displayed on social media networks and other content pieces. Most SEO plugins such as Yoast SEO or All in One SEO Pack, will set the image used on social networks to the first image found in the content if you do not set a featured image.

For this reason, many people are very selective about what size their featured image should be. And they should be! After all, this image is going to get people to give attention to the site beyond the “excerpt”.

Sometimes the default featured image size just won’t cut it, and you will want to change this. Here are a 4 different ways you can change the size of a featured image, depending your WordPress install.

Select A Featured Image Size Using Conductor Blocks

One way to adjust your featured image sizes is through our Conductor plugin. Conductor allows you to display content in blocks by building a query and a display. Items which determine displayed content are what define a query. While building your Conductor block, you can select a featured image size in the Advanced Settings section.

Here’s an example Conductor block that displays two featured blog posts with thumbnail sized featured images:

The Featured Image Size setting allows you to select a featured image size for the content you’ve chosen to display. You can choose an image size,from all of the image sizes that exist within your WordPress install. Select a featured image size that works best for you and your content.

Conductor Advanced Settings Featured Image Size Section

Conductor blocks display a specific set of content within your WordPress website based on the parameters you define. The Featured Image Size setting only applies to that particular Conductor block. It does not adjust your theme’s featured image size. Rather it adjusts the featured image size for content displayed within that Conductor block.

You can learn more about how Conductor works and even trial Conductor for free before deciding to purchase it. Conductor can be an affordable way to display content using a featured image that works best for your website.

Other Ways to change your featured image size

There are a few other different ways to set the featured image size, from PHP, to CSS, to built-in theme functions.

Determining what to do depends on your skill level and how involved you want to get with setting the size, as well as what theme you are using. Here are the general rules:

  1. If you are a developer looking to set the default featured image size, you will want to use PHP code.
  2. Are you a designer looking to use CSS to modify the size? You can do that as well.
  3. If you have one of our themes, we have added an easy option to select a featured image size that works for you. Most of our themes contain this option.

Set Featured Image size using PHP

One way to set the featured image size is through PHP. This should only be done by developers or professionals who know how to add PHP code to their websites. It should also only be done on child themes or within a plugin, so changes are not lost with an update to your WordPress theme. You should never make changes directly to your parent theme in WordPress.

Here is the string of code you can use to set the “post_thumbnail” or featured image size. Of course, the theme and WordPress install you are using has to support featured images for any of this to work as well (most do). You may need to contact your website host or manager to find out if there may be a complication with changing this.

Add the following code to your functions.php file:

<?php 
    set_post_thumbnail_size( $width, $height, $crop );
?>

Some themes may specify their own featured image size when displaying featured images. If the above code does not work for you out of the box, you may need to dive deeper into your theme’s code to determine if they are using the default featured image (“post_thumbnail“).

If you have a website that has been established for some time, simply adding the code above to your functions.php file may not do the trick. You may need to regenerate your images to ensure the new featured image size is utilized properly. Otherwise WordPress may use the full size image and this may affect your page speed.

This is the most high-tier way to set the featured image size on your website as it will apply to most any website. But it can also be tricky if you are not comfortable with code.

Adjust or set WordPress featured image size using CSS

With some handy CSS chops, you can also potentially edit the display of the featured image on your stylesheet by discovering what the class of the featured image is on your theme and modifying from there.

You will also want to do this in a child theme, on your child theme’s style.css file so that changes are not lost when the theme is updated. You can also use WordPress’ built-in Additional CSS module.

Like PHP, this is a bit tricky to accomplish if you are not an experienced designer or developer, but it is a way to adjust the width or height of a featured image manually. This can also be done by percentages. Not happy with a 100% width featured image? Go in and adjust the featured image to display at 80%! Play around and have fun, but, most importantly, try not to break your live website! It’s best to try any of these methods on a staging or development environment first.

Adjust featured image size socialize

Notice how a quick change of CSS changes the properties of the featured image size.

As an example, most of our themes use the figure.post-image class, so you would want to modify this element to set properties like width, height, percentage, border, and etc. on the featured image using CSS.

Change Default size of featured images using our WordPress themes

We have implemented technology into most of our WordPress themes to make it very easy to modify the default featured image size. This is handled by installing one of our themes and navigating to the Appearance > Theme Options pane. Under the “General” section you will see a “Featured Image Size” option if the theme supports this feature.

There you will see a space to change the size of the featured image.

Set Featured Image size on WordPress with our themes

Beyond this, you can even select featured image sizes that may have been added with the addition of other plugins on your website.

In the below example, you can see that the default featured image selections also include sizes set by other plugins, like Max Gallery or Sensei by WooThemes.

Featured images wordpress

Make sure to save your work when finished by clicking on the Save button below the options to save the changes made to the default featured image.

Themes that support this option

We hope this information was helpful

If you have any other tips to share, leave them in the comments below. Additionally, for more help, feel free to contact us or purchase one of our themes for additional support and more goodies!

This entry was posted in Blog, Design, Development, Theme Features

Leave a Reply

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