The featured image is arguably the most important piece of a blog post on a website.
After all, this is the piece of content that will visually grab your visitor. It will also be the image that displays on social media and other content pieces.
For this reason, many people are very picky about what size their featured image should be. And they should be! After all, this image is going to get people to take attention to the site beyond the “excerpt”. Here are a 3 different ways that you can go about changing the size of a featured image, depending on what sort of WordPress install you have.
Sometimes the default featured image size just won’t cut it, and you will want to change this. Here are a few ways to change your featured image size.
Determining how to change your featured image size
There are a few different ways to edit the featured image size, from PHP, to CSS, to built-in theme functions.
Determining what to do depends on how involved you want to get with setting the size, as well as what theme you are using, but here are the general rules:
- If you are a developer looking to add new default featured image sizes, you will want to use PHP code to change the WordPress featured image size.
- If you are a designer looking to use CSS to modify the size, you can do that as well.
- If you have one of our themes, we have added an easy option to select between numerous default sizes or default sizes created by plugins you have activated.
Set Featured Image size using PHP
One way to set the featured image size is through PHP. This should only be done by professionals who know how to add PHP code to their websites. It should also only be done on child themes, so changes are not lost with an update to your WordPress theme.
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.
<?php set_post_thumbnail_size( $width, $height, $crop ); ?>
Add this code to your functions.php file.
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.
Like PHP, this is a bit tricky to accomplish if you are not an experience 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!
As an example our themes use the figure.post-image class, so you would want to modify this using CSS to set the height, width, percentage, border, and more details on the featured image using CSS.
Change Default size of featured images using our WordPress themes
We have implemented technology into 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 and then going to the “General” section.
There you will see a space to change the size of the featured image.
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.
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
- Simple Shop Pro WooCommerce theme
- Modern Business Pro WordPress theme
- Symphony Pro theme
- Journal Pro WordPress theme
- Capture Photography theme
- Socialize Pro Blog Theme
- Modern Real Estate WordPress Theme
- Epic Pro Responsive WordPress Theme
- Minimize Pro Responsive WordPress Theme
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!